DEV Community

Cover image for Talking about UI planning
Igor Duca
Igor Duca

Posted on

Talking about UI planning

There are 2 years since I started working as a full-time developer -- before this, I was a programmer just for hobby.

From the very first day to this date, one of my major goals was: start planning and creating pretty interfaces, and, sincerely, it was HARD to start having this "good taste" for pretty UIs.

So, this article will be composed with some random knowledge that could and would help you while planning UI that actually give value to your product.

Basics

The basics of planning a UI is for you to understand why things look and work the way they do.

Better elaborating the phrase above: you need to create a consciousness about why an icon is placed before a text, why there are more images than text in most actual websites, why not to use some type of components on mobile, and there it goes.

Mobile-first

Mobile-first is a term that has to be in your knowledge if you want to create a better relationship between code and design.

It works this way because when you plan a interface for a mobile device, your major concern will be about the content itself, once the device forces you to make the content centered, you do not need to worry much about how things will be displaced in the screen, so, this need to be your first shot at a planning.

Alright, you have the mobile design and now you have all of the content that will be displaced in the screen. So, now it is time for you to create the web workflows and wireframes.

Wireframes

Creating a wireframe must be your first approach when trying to plan the disposing of a content in your website.

Wireframes are low-fidelity representations of your final website.

Example wireframe

Content disposition

All webpages are organized from left to right, because the major part of the worlds languages are disposed this same way.
So, your website must have to be planned counting that your users will always read your posts or articles from left to right, and, after that, they will try to help their understanding with some support image, so, your content must always have this flow:

webpages reading flow

10 Useful Findings About How People View Websites

Talking about colors

I am not a wise when we talk about choosing colors for website, specially because sometimes I fail very much about color contrast for accessibility.

But, basically: you need always to choose complementary colors for your websites in order to improve their legibility, such as the most common pairs of colors that works well together: black & white, white & blue, black & red, white & orange (these are my opinion).

Color contrast checker

Color theory

Color theory is a great subject to start studying if you are willing to be a master at web design. The color theory implies that some colors or their combinations are responsible to rise some of the human emotions, such as:

color emotions

What is color theory?

Flat design?

Back to the basics: the flat design movement is a design pattern that is composed by flat colors (without shades, effects or gradients) and primarily uses pastel tones, secondary and tertiary colors.

flat design website

Understand how mailchimp uses flat design

Skeuomorphic design (I love this one)

Remember that old youtube logo that looked like a TV? Yeah, that is a skeuomorphic design, a design pattern that were created in order to mimic real objects, shaders and forms.

skeuomorphic design

Understand about how the skeuomorphism works

Final thoughts

I know this article may be a little chaotic, unrelatable and messy, but its contents while studied in an isolated way make a real good job at teaching you how to improve your creative thinking and understanding about how websites work and why they work the way they do.

I am always talking about topics like this one in my X (Twitter), so you should really get to know me better.


Photo by Don Kaveen on Unsplash

Top comments (2)

Collapse
 
lushiane profile image
Luciana Sales

Which tools did you used to create the wireframes?

Collapse
 
yelldutz profile image
Igor Duca

Excalidraw