We’ve all been there. We’ve all tried to design software that feels fresh and unique, yet familiar and intuitive. We’ve all spent days AB testing our designs, reviewing the screens on multiple devices. We get excited about the look and feel, and we hope the customer will appreciate our modern, colorful designs. Sometimes we may forget to consider (or ask the developers) how hard they think it would be to integrate our designs into code. This is a big mistake. The reality is teams often lack a good process for transitioning from design to development. This means assets, specs, style guides, color codes, fonts and even UX micro-interaction libraries. Just because we assume our designs are perfect, and can envision them animating smoothly, doesn’t guarantee that developers will correctly interpret things. Try not to hold this against them. They’re doing their best with what they’re given.
And as development starts implementing your gorgeous UX/UI design, you might notice some minor aesthetic defects. That animation you designed to reveal the menu or shrink the title bar on scroll-up isn’t there. You get worried, or maybe just disappointed.
But you shouldn’t. Because in early development stages, development and testing teams focus on the technical aspects of the project. Even the Project Managers will consider the defects you raise as low priority since they don’t represent a blocker. And they’re right. Technical architecture/implementation is always the core of a project. Issues around these will always cause a project to fail, no matter how great it looks.
Our advice is to keep things simple in the early project stages. Simple ≠ ugly. In fact, the simpler the UI is, the easier it will be to rework it in the next iteration. This will make your developers’ lives easier since it will reduce considerably the time required to integrate the UI. So while these may not be your best designs, always remember you’re just creating a pilot, not the final project. You’ll be able to add in all the detail, irregular shapes, shadows and custom micro-interactions once technical implementation is mature and up-and-running. Be patient.
Think of this approach as akin to building the first model of a styled chair. In order to ensure the chair supports ample weight, is comfortable and ergonomic you’ll probably need to create a series of basic core models first. This process avoids wasting time applying style to something that’s not functional yet.
UI Skeletons apply a UI design in a similar fashion. The first thing to focus on as designers is to be sure the UI is user friendly and includes the requested functionality, without worrying about the details.
The characteristics of UI skeletons include:
Once this approach is implemented and the technical stuff works just fine, start testing out the UX to see how it interacts with the backend and how intuitive it is for users. Evaluating the project state at this point will indicate if you’re ready to develop the final style, or if the team needs to keep making adjustments to the UI.
You may think this approach will cause the project take longer to reach the point where the product looks as is should. But always remember this simple rule: “Adding is easier than removing.”
Lastly, if your organization is developing an app and needs some design help, or needs help updating or extending an existing application’s UI/UX, please check out our Mobile UI/UX Design Kickstart or simply reach out to us—we’d love to help you get started.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
|cookielawinfo-checbox-analytics||11 months||This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".|
|cookielawinfo-checbox-functional||11 months||The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".|
|cookielawinfo-checbox-others||11 months||This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.|
|cookielawinfo-checkbox-necessary||11 months||This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".|
|cookielawinfo-checkbox-performance||11 months||This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".|
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.