Creating UI Comps
After you have chosen what style you are going with, the next step in the design is creating all of the comps for each screen. It can sometimes be easy to focus on only creating the layout or graphics, but for this next phase of the design, it is important to keep in mind all the previous research that you have done and always be considerate of the user throughout the design process. It is imperative to keep designing for the user at this stage and not get lost in what your personal preferences are, as they may not always align with what is best for the user.
“It’s up to the designer to make completing necessary tasks as easy as possible. Eliminating everything that isn’t absolutely vital to each task is a great place to start.”
Simplification is everything. You shouldn’t have your users click through a bunch of pages just to get to their destination. Everything should be as quick and easy as possible and not feel like a hassle to obtain.
“Nothing important should ever be more than two clicks away”
Steve Krug
For mobile design, it is also important to keep in mind how the user is interacting with their device. Some parts of the screen are easier to reach than others, so you should try and keep the most important and constantly used buttons at an easy, reachable distance.
Having these things in mind, while working on the UI of the design, means that if you are working and realize you need to change your design from your wireframes, that’s okay! We don’t always get it right the first time, and if simplifying the app takes away or added pages, that can be easily changed. You shouldn’t feel the need to stick with something because it is what you pictured or planned.
This past week I have spent creating every page for my Planty app redesign. While, designing, I tried to keep the user experience in the forefront of my thoughts, and this did mean changing a few things that I had really grown to like. I originally had all of the plant titles in the font Arista Signature, but after really taking a closer look, I began to worry that the font may not be legible enough for the user. I sent some images to a few people, to see what the user feedback would be, and they agreed with me that it was a bit to hard to read and they didn’t want to struggle to understand what the names of the plants were. After that, I did end up changing my design, and while I was sad to let the font go, it made world of difference to the readability of the interface and I limited Arista Signature to page titles only.
Overall, it took me a lot longer to get through my comps than I originally anticipated. It took me over 20 hours of work to create them all, and this was mostly due to the style that I chose. I decided to go with the hand-drawn look because I believe it sets Planty apart from other, similar, planter apps. I didn’t end up using any UI kits, because of the specific style that I wanted. This, along with drawing all the plants is really what took the longest.
UI is so important and takes time and dedication to execute. Even being able to step back and look at the designs with fresh eyes, I see a few more things I would change before the prototype. Always keep an open mind to change to create the best interface for the user, that is possible.
Sources:
https://blog.adobe.com/en/2017/05/15/mobile-design-best-practices.html#gs.vka1ii
https://uxdesign.cc/mobile-ux-design-principles-and-best-practices-594bec53a31e