When it comes to web design, programmers think it is a graphic designer’s job. The situation gets trickier when there is a clash of ideas on a design matter between a designer and developer. The project manager has to step in to resolve the issue.
Why learn web design?
Not all can afford the luxury of design and developer teams, especially small companies where people have to wear multiple hats. The programmer in this situation has to do web design as well. It is especially true for single-person businesses such as freelancing and entrepreneurship.
Learn design to create UX and UI
User Experience or UX Design or User Interface (UI) Design are interrelated concepts that have gained much importance in recent years. UI is a subset of UX; the primary aim is to make users experience pleasant so they become permanent users and eventually customers.
Design concepts are easy to understand
Basic design principles are quite easy to grasp and implement. All web developers, and programmers, in general, should spend some time learning the basics. Learning them will help you appreciate the designers’ point of view and share holistic insight for your next project.
If you are a front-end developer and want to make cool websites or a full-stack developer working on a fantastic mobile or web app, then this article is for you. Similarly, if you are making some software and developing its GUI, you need to implement some of the design principles mentioned here to make them popup and impress the users.
I have enlisted the basics of design here. Let’s explore them one by one:
Design Principles:
Design principles are like a recipe for your favorite dish. While design elements are the ingredients that make up the dish, design principles tell you how to use them. For example, if you are designing a webpage, you can use the principle of contrast to highlight the text or bring attention to a particular object on the page. Either you can make it bigger than the rest of the text or you can use the contrasting colors such as the black font on white background, blue text on a yellow background, and vice versa.
Another example is news websites, they use different sizes of fonts which creates a visual hierarchy. The user reads the biggest text (headline) first, then the bigger one (sub-headings), and finally the smaller (the body of news).
I have enumerated the design principles in the following list:
Alignment: Almost everyone who has used a computer or used word processor must be familiar with alignment. There are usually four options for alignment: right-aligned, left-aligned, center-aligned, and justified.
Unaligned elements on a web page are the hallmark of amateur designers. The text and images on the web are haphazardly put together without any alignment. Use the grid in CSS to align objects. It helps you align elements in different rows and columns. Alignment creates an invisible wall, which makes the user absorb information in a defined way. There is no excuse not to use it. So use it wisely.
Repetition: Simply put, it is consistent reuse of design elements such as lines, shapes, colors to create unity and consistency on a page or series of pages.
For example, the same elements repeated across on inner pages consistently shows that you are on the same site. It also prompts users that a piece of particular information could be found in a specific place. For example, the social media icons in the footer let users know that the icons would be in the footer on all pages.
Hierarchy: It means emphasizing elements on a page in the order of importance. For example, The bigger the font, the more attention they attract. You can use the hierarchy to attract the attention of users on a particular text/copy or action. For example, the subheadings let users skim the long pieces of content.
Check the advertisements on websites and magazines; they use it deliberately to attract attention to a particular text/copy. Learn from them and use them in your web design. Another example is that if you want someone to download an ebook, you should make the call-to-action/download button bold and more prominent, having contrasting colors to the background.
Balance: You can achieve balance when you put visual elements in a fixed proportion. It helps make the design of the entire page pleasant without jeopardizing other aspects. The absence of balance will make some part of your page pop out while the rest will go into obscurity. Primarily balance is achieved using symmetry. However, its opposite (asymmetry) can sometimes be used to create balance.
For example, when creating a UI design, you may create a message box left-aligned. But if the rest of the page is empty, it would disturb the balance. However, if you add a body of text on the right side, it would create a delicate balance between the message box and the text column on the right.
Contrast: As its name implies, contrast is achieved if two contrasting design elements are used. The contrast is more pronounced in color use. The most basic example is black font on a white or light background and vice versa.
Color Theory: Absurd color use is the most notorious feature of programmers. They don’t know which color goes with which, so they use it sporadically and generously. The thumb rule for color use in web design or design of any sort is: Less is more! There is a concept called Color theory. All programmers should know this concept. Stick to a couple of primary and secondary colors.
Color theory states that there are 3 primary colors, i.e., red, green, and blue. They fall on opposite sides of the color wheel. The color wheel is a circular arrangement of colors which shows the relationship between primary, secondary, and tertiary colors.
When primary colors are mixed together they form secondary colors. A mixture of blue and green produces cyan, blue and red give magenta, and yellow (a mixture of green and red). And when different primary and secondary colors are mixed, they form tertiary colors.
There are different color schemes that help you choose the colors, e.g., complementary, monochromatic, analogous, split complementary, triadic, and tetradic. For example in complementary color schemes, you use the colors falling on opposite sides of the color wheel.
Harmony: It refers to the state when all elements and principles of design have been done rightly without over or underuse. Make a checklist of design elements and principles and mark checks for accomplished items. If you have all elements checked, then you are good to go, otherwise keep working on the design.
Design Elements
Now let’s focus on design elements. These are the ingredients that actually make up the design. Let’s explore them one-by-one.
1. Line: The line is the most basic but essential design ingredient. It is used to create division between different design elements and focus your attention on a particular object or text.
For example, the line divides content, headlines, and side panels. Notice how Microsoft Word and Google Docs use lines to separate menus and sub-menus. It also creates a hierarchy. The essential elements are in the first row. In the drop-down menu too, the related options are packaged together and separated by lines.
2. Shapes: We get shapes when the line is connected from end to end, e.g., square, triangle, circle, rectangle, and polygon. Shapes add interest and energy to the design.
Some shapes are synonymous with particular design elements, such as place holders are usually in squares and rectangles. Buttons are almost rectangles. Profile images on Instagram are round.
3. Color: Color is the most powerful tool in the toolbox of a designer. It evokes emotions and responses, like no other elements. As a designer, you must know the concept of color psychology, i.e., how each color is associated with emotions. For example, red shows danger. However, it is also closely related to love and passion. Cool colors exude calmness and clarity.
As mentioned earlier, you should also learn about color theory and color wheel. It will tell you about primary, secondary, tertiary colors. You can learn about complementary and contrasting colors in color theory. Blue and yellow are complementary colors, while black and white are contrasting colors.
4. Space: Space is the empty region in your design. It is also called negative space. It lets your design breathe. Many novices fill up all space on-screen with text or elements, which make the design team smirk.
To avoid their smirk and subtle sarcasm, learn how to use negative space. There is a ton of material available on design elements, including space. So learn it.
5. Texture: The texture is the look and feels of objects on the screen. It appears that you can’t touch the elements on the screen, but the fact of the matter is that elements do exude texture. It makes elements have an element of depth.
6. Typography: Typography is as old as the printing machines. This art was born when the first printing presses emerged in Europe. In a nutshell, it is the use of text or font in your design. Each font evokes a different reaction from the reader, just like the colors. Primarily, the fonts are divided into Serifs and San Serif. Serif fonts have edges and lines protruding from corners and edges. San serif is without these frills and is less formal.
Use the single font for your site or app according to its nature. If the website is a formal and technical, serif and cursive fonts wouldn’t be a good choice. Its use also depends on the end-user. For example, fonts for a mobile app must be legible on a small screen.
7. Size: Size or Scale is also a crucial element of design. It refers to the size of the elements. For example, the bigger the font/text, the more important it will appear.
Similarly, size adds interest to the design. If all elements on the page are of the same size, you would have a hard time grabbing users' attention.
Conclusion
Having a good sense of design is not optional for solopreneurs and freelancers. It is a make-or-break factor for your career. Let us know in your opinion if you learned something new or how you will use this information in your design? Feel free to comment below or read our previous posts.
Get Started
Already have an account? Please Login