I enrolled for a web design course offered by Vako Shvili that helped me learn about graphic design concepts like layout, typography, visual hierarchy, the art of color, how to use photos and many more.
1. Layout is king
The Power of Alignment and Grid
Underestimating the impact of good design alignment is a mistake to avoid. Simple alignment can elevate the overall appearance, giving it a well-designed look, while misalignment can lead to a sloppy and amateurish outcome.
To achieve a balanced and structured page, a valuable approach is to divide it into equal-width columns, forming a grid that serves as a foundation for effectively aligning various elements within.
Grid and alignment
Establishing Visual Hierarchy
Visual hierarchy is crucial in facilitating easy information digestion for the audience. When everything appears equally important, it becomes challenging to discern where to direct our attention, leaving us feeling overwhelmed and unsure of where to look. However, good design acts as a guide, ensuring a clear and organized flow for the audience to follow.
Visual hierarchy
Emphasizing Proximity
Another vital concept in good design is Proximity, which involves bringing related elements closer together to create a stronger visual association. By employing this technique, designers can effectively group and organize content, enhancing the overall readability and coherence of the layout.
Proximity
2. Typography
Infusing Personality into Typefaces
Typefaces possess distinct personalities, ranging from fun and playful to strict and blunt, or even academic and fancy.
Selecting an appropriate typeface with the right personality is akin to choosing the perfect outfit for a specific occasion. Just as clothing can set the tone and impression, the right typeface can significantly impact the overall look and feel of a design, making it a crucial consideration in the creative process.
Typography
The Art of Letter Spacing
Letter spacing is a fundamental property that allows us to adjust fonts on the web. We have the flexibility to set letters close together, creating a tight and snug appearance, or space them widely to achieve an airy and expansive feel, like the example provided.
Designers leverage the power of wide letter spacing to create a striking effect known as "Panorama." This technique enhances the visual impact of the text, contributing to the overall aesthetics of the design.
Letter spacing
Striking the Perfect Line Height
Line height refers to the vertical spacing between lines of text within a paragraph. While well-designed and balanced fonts typically come with appropriate default line heights, some fonts may require adjustments, often by increasing the line height.
Ensuring adequate line height is crucial for readability and a comfortable reading experience. Lines that are too closely spaced can make reading challenging and cumbersome, underscoring the importance of thoughtful line height adjustments in typography.
Line height
TIP: In most cases, for the body text, 140% (1.4 x font-size) is an excellent line height. Don't go over 180% unless you know what you're doing.
3. The art of color
Drawing Inspiration from the Real World
In the realm of design, a highly effective approach is to sample colors from the real world. This method often leads to remarkable results, infusing designs with authentic and captivating color schemes.
TIP: For even greater efficiency when sampling colors, try employing the technique of blurring the image to average out the colors, yielding more balanced and harmonious combinations.
Color sampling
Mastering the Art of Fine-Tuning
An invaluable skill possessed by designers is the ability to fine-tune colors. Through precise adjustments to color saturation and brightness, one can achieve the desired color palette and elevate the overall design to perfection. This can be achieved either by editing HSB fields or using the color map's indicator, granting designers greater control over their creative vision.
Fine tuning
4. Some useful design tricks
Harnessing the Power of Contrast
Contrast plays a pivotal role in composition and can be expressed in three main ways:
Contrast in Weight: Pairing light and heavy objects to create visual interest. Contrast in Size: Placing very large and very small elements side by side for striking effects. Contrast in Color: Employing contrasting and complementary colors, such as black and white or red and white, to enhance visual appeal.
Embracing Whitespace
Whitespace, the empty space surrounding elements, serves as a powerful design tool. It draws attention to the main objects, making them more visually appealing and significant.
The Power of Iteration in Design
Repetition is a popular design technique that can transform mundane elements into something captivating. By repeating an otherwise unremarkable item multiple times, it gains intrigue and becomes more engaging.
Layering for Visual Depth
Overlapping elements is a clever design trick that adds an extra dimension to the composition. By juxtaposing different elements and tying them together, designers can inject interest and drama into the design.
Overlapping
Engaging Visual Tension
Visual tension brings a captivating allure to design. It can be achieved through various methods, including:
- Angled Elements: Tilting elements and using angles to create a sense of movement.
- Placing Objects on the Edge: Positioning objects at the edges to evoke a dynamic feel.
- Unbalanced Arrangements: Moving elements out of balance for a visually intriguing effect.
- Partial Hiding: Hiding parts of objects, even extreme cropping, to generate tension.
- Overlapping Elements: Utilizing overlaps to add depth and intrigue.
Tension
Resources:
Following the above patterns and tricks I successfully launched a couple of responsive web pages to practice my design skills on the web. I worked my way from project briefing, to creating moodboards, wireframes, design and eventually created functional websites.
1. Chat App
Homepage design concept built for a chat application. The design mockups and high fidelity wireframes were built in Figma and later moved on to build the responsive web page on Webflow.
- Link - Chat
Chat App
2. Team Collaboration App
Website design concept for remote team collaboration. It includes a minimal and powerful blog. Built the website in Webflow, one of the best CMS for blog hosting. Want to collaborate with your team remotely?
- Link Team
Team App
- Stopify - Powerful Ecommerce Mobile UI Kit with clean and elegant design. The prototype and micro-interactions are built using Figma. Stopify is the one-stop spot for electronic essentials. Designed to kickstart your e-commerce almost instantly.