Graphic Design for App Development
"We have a tight deadline and there's no time for doodling. We need to get started"
As a UX/UI designer, you should have heard this once in your life. If you are doing web development, mobile app design or digital product design, people sometimes don't really know how to estimate the effort it really takes to have a good graphic design for a final interface.
The Background on UI Design
The “UI” stands for “user interface", and refers to the graphical layout of an application or software, all the access points where users interact with designs: buttons, text, images, sliders, entry fields, etc. This also includes the screen layout, all transitions, animations and every single micro-interaction between the user and the final product.
Nonetheless, overall graphic design for app development is way more complex than just doing pretty buttons, logos, icons, typography and colors. Of course, it is very important to have a visually appealing design. However, people who are not involved in this kind of process may think that the visually content is the most important part.
8 Steps of Graphic Design for App Development
The truth is, creating a good experience for mobile development involves 7 phases before UI Design. That's right, it's not only sketching, wireframing, and designing.
1. Market Research
Before developing a mobile app, first you need to know what your global market is. Before starting an UI app, you need to research the market, such as finding similar products. It could be websites, web apps, software, hardware and real products that help you to compare your product offering.
2. Navigation Flowchart
I have my research, what's next? Now, we need to make an interaction or navigation flowchart by creating a diagram with all the possible interactions, navigations and conditions between screens. A flowchart helps to understand the process and follow the next step, which is making user stories.
3. User Stories
A user story is one or more sentences in the everyday or business language of the user. This story captures what a user does or needs to do as part of his or her job function, representing a fictional users that called "Personas". Those fictional characters are created to represent the different user types within a targeted demographic, behavior and other characteristics that might use your mobile app.
4. Old School Sketching
Now, designers can start the process of sketching the old school style, without computer, just using creativity, a pencil and paper. This helps to identify the principal functionalities of the interface that is going to be wireframed.
5. Wireframing
Wireframing is focused on layout elements and controllers around the screen, no prototyping, no vector graphics, just boxes to give direction to the ideas. After that, designers make the mockups, which are not the final designs.
6. Mockups
Mockups are like blueprints of development. Using simple vector graphics like illustrator files we can now have real sizes and layout of each screen. This way the designers can make changes faster and reorder or duplicate screens as needed.
7. UX Notes & Diagrams
Before starting the Graphic Interface design, the designer implements user experience notes and diagrams. These include on each mockup screen UX notes (animations, transitions, human interaction and finger movements). Then, there is the optional choice to make a prototype with the software of preference (keynote, balsamic, invision, flash, etc.).
8. Graphic Interface Design
Then you can start designing your web interface or mobile app avoiding extreme changes in this part of the software development process. This will allow you to making any changes before the mobile app is actually in the software development phase. This helps to improve the mobile application Interface and helps to focus just in a "pixel by pixel" perfect design and not in wireframing design.
Final Thoughts
Designing this kind of experience helps not only the designer but also the software developer to be more familiar with the mobile app, receive easier changes for your client/users, and for having a better user experience in your mobile application.
Hand-Picked Related Reads For You
How To Achieve Better UI Design With CSS Grid Layout
READ MORE
4 Important Tips for Better Mobile App and Web Design
READ MORE
Creating a Brief Before Starting a Mobile UX Design Project
READ MORE
About the Author
Ana Karen Ramirez is a Digital Artist. She has been involved in User Experience Design, User Interface Design and Visual Design for more than 5 years. Ana is passionate about startups, always searching for innovation in our team and software mobile app development processes. You can follow her on twitter.
Post Your Comment Here