brookeacohen

View Original

Design of UI

After the wireframes of a project have been completed, the next step is creating the user interface (UI). While this may be the fun part and you can be eager to jump in, it is important that you, first, have a good baseline understanding of what makes a great UI design. There are so many aspects that go into the design and it is necessary to research and explore before just jumping in.

When creating a UI design there are multiple elements to consider, including typography, images and media, and forms. It is also important to “start to identify common design patterns and build around these.” Building these patterns into your designs creates both consistency and efficiency. All of these aspects are necessary to create a good, solid design. Knowing how to put these elements together in your design can really make or break it. The most useful way to learn how to how to do that is by research. Always be studying designs and analyzing the elements that make them good or bad and then use that knowledge in your own designs.

“Every new idea is just a mashup or a remix of one or more previous ideas”

Austin Kleon

This past week, I have spent time researching designs and creating multiple design layouts of four important pages in my app redesign of Planty. I created three different designs for the app in order to explore and figure out what the best UI approach is for this app. 

In this first design, I stuck with a green and yellow color palette, because I wanted it to reflect the nature that the app embodies. I created a pattern for the homepage that I wanted to carry out through the other pages to give it a bit of personality, along with having a handwritten style of type. 

For this design, I completely changed the color palette and went in the direction of bright saturated blues, yellows, and oranges. I wanted it to pop and stand out from the typical plant app. There are so many great plant apps out there already, it is important to be able to make this design stand out from the crowd.

This last design is my personal favorite, and probably the direction I’ll be moving forward in. For the color palette, I used greens, yellows, and oranges to represent the colors of a potted plant. I also decided to head in a completely different design direction in regards to the images and displays of the plant. I wanted this design to be made up of illustrations of the plants instead of images. I think this is a great way to have the design stand out from the other plant apps, as none of them really use illustrations. I also chose a script font to pair with this, so give it a comforting, homey feeling. I also chose a white background for this design, because I feel like it helps the colored text stand out even more, compared to the other designs.

There are so many ways and directions you can go about designing the same thing, It is important to do your research and figure out not only what you think looks best, but what could appeal to the users of the design.

Sources:

Kennedy, Erik D. “7 Rules for Creating Gorgeous UI (Part 1).” Medium, Medium, 28 Feb. 2020, medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda.

Kennedy, Erik D. “7 Rules for Creating Gorgeous UI (Part 2).” Medium, Medium, 28 Feb. 2020, medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96.

Mardita, Rizki. “Creating a High-Fidelity User Interface & Interactive Prototype in 1 Hour.” Medium, UX Planet, 18 June 2019, uxplanet.org/creating-a-high-fidelity-user-interface-interactive-prototype-in-1-hour-f0550dfc966a.

Tomczyk, Dawid. “7 Simple Methods to Get Better at Visual/UI Design.” Medium, UX Collective, 16 Aug. 2019, uxdesign.cc/7-simple-methods-to-get-better-at-visual-ui-design-21fec0f417b5.