IDEALI — IT Project Costing Calculator (2024)
Introducing IDEALI, an intuitive and sleek project costing calculator designed to streamline estimating for IT projects. Built on the Webflow platform, this tool offers a seamless user experience with clean design and smooth navigation.
🟠🔵Color and Logo Decision
The branding for IDEALI centers around a clean, vibrant, and modern look, combining both playful and professional vibes. Each logo and color choice was carefully made to create a distinct yet approachable identity for the service.
Primary Logo: The primary logo of IDEALI immediately draws attention with its blend of sleek black typography and an orange exclamation mark, signaling the app’s excitement and uniqueness. The blue “i” (with a starburst symbol) adds balance, ensuring the design feels grounded but fresh. This creates a memorable impression, especially with the starburst representing something special or important. The font has a modern twist with its bold, sans-serif style, making the app's name feel approachable yet reliable.
Secondary Logo: This version simplifies the brand further—an orange “i” centered within a blue circle, topped with the starburst symbol. This minimal design makes the logo versatile for app icons, smaller placements, or in digital environments where a full logo might not be ideal.
Submark Logo: Featuring just the starburst icon in a circle, this is the brand's most distilled essence. It's designed to be instantly recognizable and can be used in small spaces like buttons, social media icons, or watermarks without losing brand association.
Color Palette:
#0A53DD (Vibrant Blue): Dominates the UI for action buttons, headers, and other interactive elements. This shade of blue signifies trust, a staple in financial tools, ensuring users feel secure.
#FF984D (Orange): Represents enthusiasm and creativity, giving the app an upbeat and friendly energy. It's primarily used for icons, accents, and call-to-action elements.
#F5F5F5 (Soft Gray): Serves as a neutral background, letting the core brand colors pop while maintaining a clean, user-friendly interface.
#C7EEF6 (Light Blue): Adds a fresh, calming tone to the interface, perfect for contrast and balancing out the vivid blue and orange.
#000000 (Black): Provides the typography and primary text color, offering sharp readability across all UI elements.
Together, these design decisions create a cohesive and approachable look, emphasizing simplicity, user engagement, and reliability for users managing IT project costs.
🔑 Log In
The log-in screen is designed with both practicality and aesthetics in mind. The minimalist layout focuses on user convenience, offering large, intuitive input fields that make it easy to enter login credentials without fuss. The split-screen design features vibrant orange on one side, instantly drawing attention to the action area, while a soft blue illustration on the other side creates a welcoming atmosphere, showcasing financial elements in a playful yet professional way.
The call-to-action buttons are prominent and well-placed, with bold blue styling to ensure clarity and visibility. The “Log In” button is designed for quick recognition, making the login process feel smooth and easy. To enhance user experience, features like “Remember Me” and “Forgot Password?” are clearly placed, ensuring that users can either save their session or retrieve their login details effortlessly.
Practical additions include auto-fill support, allowing users to quickly enter previously saved credentials, and error handling that highlights incomplete or incorrect fields, ensuring users can easily correct mistakes without confusion. This thoughtful functionality minimizes friction, helping users start their IDEALI journey smoothly.
🔐 Sign Up
The sign-up page mirrors the clean and intuitive design of the log-in screen, focusing on usability and efficiency. On the left, a friendly illustration adds visual appeal, while the right side is dedicated to functionality. The input fields are large and easy to navigate, making the process of entering personal information quick and hassle-free.
The bold CTA button in vibrant orange immediately draws the eye, encouraging users to take action and complete their registration. Key practical features include:
Clear field validation: As users fill in their details, real-time validation ensures that fields like email and password meet the necessary criteria, preventing errors before submission.
Password visibility toggle: A simple eye icon allows users to double-check their password as they type, reducing the likelihood of mistakes.
Auto-fill support: Saves time by pulling in information from users' saved browser data, speeding up the registration process.
Once the sign-up form is completed, users can smoothly transition to their new account dashboard with minimal steps, ensuring an efficient onboarding experience. The layout is designed to minimize friction and make joining IDEALI as seamless as possible.
📋 Project Board (Empty)
A sleek and straightforward interface welcomes users to the project board. The absence of existing projects leaves the space feeling clean and organized, with ample white space to prevent visual clutter. At the center is a simple yet effective folder icon, symbolizing project management in a light, intuitive way.
Practical design choices, like the folder icon, softly introduce users to the board’s purpose, encouraging them to explore without confusion. The "New Project" button is placed prominently in vibrant orange, creating a strong visual cue that urges users to begin their first calculation. The button’s size and placement ensure it’s the focal point of the screen, drawing attention and inviting users to take immediate action.
📂 Project Board (With Projects)
Once users begin adding projects, the board truly comes to life! 🎉 Projects are neatly arranged in a structured list, with clear labels, icons, and tags that indicate the status and key details of each project. The design is crafted to maintain an organized, clutter-free aesthetic, ensuring that even as the board fills up, it stays easy to navigate.
Each project entry feels interactive, providing quick access to important details and allowing users to manage projects seamlessly. The orange action buttons pop against the clean layout, standing out for quick actions like editing or adding new projects. These buttons ensure that users can easily expand or tweak their project list at any time, making project management effortless.
📊 Calculator
This is where the magic happens! ✨ Powered by JavaScript, the IDEALI calculator operates seamlessly within the Webflow environment, making complex IT project cost calculations feel effortless. The formula behind the calculations is custom-built by the designer, factoring in team roles, hourly rates, project duration, and complexity.
Every detail is accounted for—from overheads and resources to the various phases of the project. The clean and intuitive interface allows users to input all necessary information through well-labeled fields. A summary card on the right dynamically updates, giving users a clear breakdown of their project’s financials, with milestones and detailed cost estimates.
Subtle icons guide users through each stage, adding a visual touch to the financial data. Best of all, users can save their calculations to their account, allowing them to revisit and adjust their estimates at any time!
👤 Account
The Account page combines simplicity with a personalized touch. The layout is clean, ensuring users can update their profile details effortlessly. Large, easy-to-use input fields dominate the page, making edits feel smooth and intuitive. The design utilizes the signature vibrant orange and calming blue palette—creating a balanced visual hierarchy that draws the user’s attention to the most important actions.
Key buttons, such as "Save Changes" and "Log Out," pop with bold orange accents, ensuring clear call-to-action elements while reinforcing brand consistency. The typography is readable and approachable, and subtle shadows around the buttons enhance interactivity, making each click feel responsive. Overall, this page seamlessly integrates functionality with aesthetic appeal, keeping the user experience streamlined and user-focused.
✨ IDEALI's clean, modern design and powerful functionality make IT project costing easy and accurate. The JavaScript-powered calculation, hosted on Webflow, ensures dynamic, real-time results for each project estimate. With custom formulas and the ability to save calculations directly in your account, IDEALI offers a personalized, efficient project management experience.
This is a design created for a Bachelor's degree in Computer Science as a qualifying project in 2024.