Improving the Quality of Your Screen Design

After creating my wireframes, the next step was to build prototypes to truly make my app come to life. I was responsible for making 3 completely different designs. The first design, I created was almost like a modern and clean cookbook. I used a modern san serif font that had a slight fun nature to it because cooking should be fun! I also used photos with a large portion of white space and creating white overlays over some of the photos. I believe this really captured both a clean and modern kitchen style. The next design I created, was an earthy and natural design. I choose earth-toned colors and an organic font. I believe this creates the user to feel like the recipes they will be found in this app will be healthy and more organic than your average recipe. For my final design, I wanted to do something completely opposite from my other design directions, which was fun, bright, highly pigmented colors with some color block. After creating the three different designs, they all portrayed a different feeling of the type of recipes in the application. The clean and modern design emphasizes new and unheard-of recipes, while the earthy design felt organic and all-natural recipes and the color block design felt young and fresh. Overall, each of these designs spoke incredibly different from each other.

This week, I also did some research about UI design. An article called the “A Comprehensive Guide to UI Design”, mentioned that designers should create an “interface inventory” when designing for a screen.

“If you’re redesigning an existing product, an interface inventory starts by mapping out all of your components — no matter how large or small — so that they are systematically documented. If you’re embarking on a new project, you might like to map out a competitor’s product, undertaking an analysis of others’ work. This helps you to get a feel for the different interface components you’ll need to consider.”

Another interesting aspect that was mentioned was “Atomic Design”,

“Frost’s methodology establishes five distinct levels that comprise atomic design: atoms, molecules, organisms, templates, and pages. By building from the atom up, we create fundamental building blocks of design that allow us to build anything.”

Reading this really demonstrated the importance of the functionality of designing for the screen. As I mentioned in previous blog posts, I often will get caught up in design for beauty rather than functionally. However, if you creating through “Atomic Design”, it really pushes the designer to focus on movement and functionality within the app. Breaking down each individual function forces the designer to respond and use these critical pieces in their design.

Another interesting reading I came across was “7 Rules for Creating Gorgeous UI”. Throughout the article, the author, Erik D. Kennedy, describes these rules that are incredibly key for screen design. The first rule in the article is called “Light Comes from the Sky”, prior to reading this I never realized this aspect of web design. A designer should not create drop shadows, (which I did and will have to change) but should design how the lighting would hit a button if it were actually 3D. Throughout the article Kennedy continues to explain powerful design rules that I will be incorporating into my designs for next week. Overall, my research will continue to help improve the quality of my design.

Full PDF of work –> ColoneseDiBello_artifacts4

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s