I would like to better at design and building user interfaces.
How do I go about this?
2 Likes
You want to design the look of the interface, the back end or both?
Interfaces for a website or something like IOT projects?
1 Like
I was thinking about GUI’s in general, but mostly websites.
Are there some theories, that one can study, to learn how to build better layouts?
1 Like
If you’re talking about the design aspect rather than the dev aspect, then what you’re looking for is UI design and UX design.
UX design (or user experience design) is the process of improving the experience users have with a product. This includes the usability, accessibility, desirability, and value that the product provides.
UI design (or user interface design) is a subsection of UX design that specifically focuses on designing the user interface. This has more to do with colors, typography, UI layouts, graphics, etc.
In Chapter 4 of this post, I briefly talk about some basic visual design concepts that affect UI layouts. I’ll put the TLDR version here:
- Typography: Typography is the visual style and appearance of words. It’s one of the methods designers and writers use to represent the tone of their work. From looking authoritative to appearing friendly, you can communicate a great deal of this often overlooked visual principle.
Google’s Material Design website explains typography in great detail: Understanding Typography - Color: Just like typography, the colors you use can elicit emotions and reactions from your users. If you can use it correctly, you can create a truly beautiful work of art with your designs. Here’s a great article from Cameron Chapman that explains color theory for designers: Color Theory for Designers, Part 1: The Meaning of Color
- Contrast: Contrast helps differentiate elements on a page. It’s one of many indicators that tells your users what’s important on a page. Wojciech Zieliñski gives very easy-to-understand examples of how to use contrast in your UI: How to Use Contrast in UI Design
- Scale: Making elements on a page different sizes help users know what to look for first, second, third, etc… And just like with contrast, it can communicate to users the hierarchy of information. Steven Bradley explains scale well here: How to Use Size, Scale, and Proportion in Web Design
- Repetition: If you want to gain a user’s attention, you can always use repetition. By repeating the look of an element, you can both gather attention as well as let the user know they have more than one option. Interaction Design Foundation go into more detail in this article: Repetition, Pattern, and Rhythm
- Balance: As humans, we’re naturally attracted to balance. Visual balance is no exception. From balancing an element to balancing many elements on a page, this principle ties many of the earlier principles together. Steven Bradley talks about difference types of balance in his post here: Design Principles: Compositional, Symmetrical and Asymmetrical Balance
I also often use Dribbble as a source of inspiration when coming up with creative UI designs. Many of them are unrealistic, but still, a great way to get some initial ideas flowing. I also look at what competitors are doing in the same space/industry.
When designing, I often use Sketch, which you can think of like Photoshop but for UI/UX designers. It’s also pretty much the standard visual design tool for our industry.
My best advice for getting better at designing layouts is through studying not only theories but also what other people have designed. Then practice, practice, practice.
4 Likes
Don’t forget accessibility if you want to build better layouts.
1 Like
If you don’t have any design experience whatsoever or a degree, then I’d recommend following these steps:
1. Set your targets
The starting point for the learning process is to understand your focal area/niche/field.
- Are you into visuals? — If the answer is yes, then you should become a user interface designer (UI).
- Are you more into analyzing interface usability, user needs, and testing? - then you should consider user experience design.
- If both mentioned options seem interesting to you, plus you’d like to get into the nitty-gritty of the product and lead the development process? - Product designer will then be your stop.
- If you like POS-materials that help dress up the company’s identity — then you should be a graphic designer.
In general, the design is a multi-faceted area, so make sure to know your wants.
2. Learn the basics (including work tools, UI/UX principles, and others)
Start by learning the foundations of your field, including main design principles, programs, and tools, like Sketch, Figma, Adobe XD, Invision App, etc. You can definitely find all the information on the Internet, however, I’d recommend enrolling in any trustworthy course to have a comprehensive and structured learning process. However, books, tutorials, and self-study are perfectly fine as well.
3. Watch and copy others.
Then goes practice. I’d recommend starting with surrounding yourself with design, monitoring the latest trends and tools, and copying others. Without trying someone else’s, you won’t find your own style.
Good luck!
P.S. The topic is a huge one, so I’ve described the whole process VEEEEERY briefly.
2 Likes
Console programming. here was my console. You need layers of interactivity. a GUI interface is often called a console interface. Designing the console is the framework for how it is programmed and interacts during runtime. Here was my console design
1 Like
Hi
I don’t know if this is what you want here in the forum, but I can recommend udemy - I hope that this is not taken as advertising. You can find a lot of good UI UX courses there.
And …
Don’t be fooled by the prices. Regularly every couple of weeks there are strong discounts, so that the courses only cost 10% of the regular price.
Hi, from our personal experiences, we can say that you got to get down and do it. Start with small steps and learn as you go. Along the way, be observant and look around. Pay attention to similar artworks that you wish to create and try to understand the rationale for designing it this way.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.