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.
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:
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 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:
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.
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.
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)
Which tools did you used to create the wireframes?
Excalidraw