By Simon in Members-only — Aug 27, 2022

Issue 10: Web designer and how to be the one, the good one

Special edition: A large selection of articles; portfolio of studios and individual designers; collections of various tools and assets and sooooo much more!

Hello, dear readers! 👋

This is my first special issue dedicated to tenth edition🎉, that is why it's slightly different from others!

In this issue, among other things:

Books on typography, layout, project management and other topics
A large selection of articles
Portfolio of studios and individual designers
Collections of various tools and assets

In this issue, I focused specifically on the profession of a website designer and deliberately avoided materials on a broader topic — interface design and user experience (UX). Web design is an integral part of them.

What exactly do web designers do? They design websites. Landing pages, portfolio sites, corporate portals, online stores, online publications and other types of sites.

Web design is a great entry point into the profession. Their tools are developed, the theory is well developed, there are a lot of training materials. And if you have knowledge and skills in the related field of design, it will not be difficult to roll in at all.

What to focus the attention of a web designer on:

Universal design principles: typography, layout, composition, coloristicsInteractive elements: buttons, forms, menus
Icons and pictograms
Technologies: HTML, CSS, JavaScript, CMS, WebGL
Availability

Also, a web designer can add to his arsenal any skills, from illustration and 3D graphics to animation and video editing. All this will come in handy and help you stand out in the market (quite competitive).

Separately, it is worth mentioning the development of No Code tools. These are editors like Webflow, which allow you to radically reduce the participation of developers, and hence the timing of the launch of the project. A designer who owns the same Webflow can go through all the stages himself from research and sketches to launching a full-fledged adaptive website with a content management system.

Enjoy reading!

📚 Books for web design

"Designing Web Usability" by Jakob Nielsen
"Designing For Emotion" by Aarron Walter
"100 Things Every Designer Needs to Know About People" by Susan Weinschenk
"Responsive Web Design" by Ethan Marcotte
"Grid System in Graphic Design" by Joseph Muller-Brockmann
"Don't make me think" by Steve Krug
"Prioritizing Web Usability" by Jakob Nielsen & Hoa Loranger
"Elements of User Experience" by Jesse Garret
"Web Desing for ROI" by Lance Loveday & Sandra Niehaus
"Rocket Surgery Made Simple" by Steve Krug

🗞 News and articles

Roman Shamin from "Evil Martians" wrote about 20% of the designer's efforts, which give 80% of the availability of on-screen interfaces. A very good applied article that everyone should read.

Achieving 100% availability is a complex and parallel task for product development. To solve it, we need the efforts of the entire development team, and the responsible attitude of the customer of the product, and, ideally, a separate specialist.

Grids

An interactive long post by Obys Agency about the basics of graphic design, this time about grids, their types, applicability and when they can be neglected. At the end there is a list of recommended literature.

Previous long posts: typography principles, colors combinations

Get rid of grid

A "blasphemous" article about the rejection of the grid in web design. About the origin and history of the grid: how it came to web design, what limitations and disadvantages it has in the context of adaptive design, how to move away from its use and what advantages such a refusal gives.

Three important thoughts from the article:

The layout should not change due to the size of the device. It should change due to the fact that the content does not fit the current layout
Designers should think of containers in terms of % of the parent container it occupies, not in terms of the number of grid columns
One of the best ways to achieve a beautiful layout is to have a set of reused variables for indentation between elements.

How to create a color scheme around any color

Alexis Wright wrote about how to create a color scheme using the HSL color model and a simple mathematical pattern.

Steps to create a palette:

Choose the color that will be the main one and create 10 copies
In the HLS color model, change the value of "L" in increments of 10 or any other number. You will get a monochrome set of shades
Create copies of your monochrome scale and change the value of "H" to get additional colors. For example, add 30, 120, 150, 180, 210, 240 or 300
Choose the colors that best suit your design. For example, dark for background and light for text

Other Web

An article by Pavel Kedzich, in which he points to a lot of functional, but identical, faceless and lifeless sites with a standard structure of "floors" — horizontal blocks with content stacked on top of each other. He contrasts this design with the "other", where composition, navigation and animation are determined by content, and typography is a separate expressive means. And gives convincing examples.

Everything I Know About Style Guides, Design Systems, and Component Libraries

An applied article by Lee Robinson, in which he summarizes his knowledge of guides, design systems and component libraries.

Section names and their super short essence:

Why it's important: Speeds up the workflow
What is a guide: rules of visual design and illustration + style of communication and text
What is a component library: guides implemented in layouts and/or code, sets of elements that developers can use
What is a design system: a complete set of standards, documentation and principles, coupled with a library of components
Building a design system: examines in detail the different stages from assembling existing patterns to writing documentation