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!

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

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

  1. "Designing Web Usability" by Jakob Nielsen
  2. "Designing For Emotion" by Aarron Walter
  3. "100 Things Every Designer Needs to Know About People" by Susan Weinschenk
  4. "Responsive Web Design" by Ethan Marcotte
  5. "Grid System in Graphic Design" by Joseph Muller-Brockmann
  6. "Don't make me think" by Steve Krug
  7. "Prioritizing Web Usability" by Jakob Nielsen & Hoa Loranger
  8. "Elements of User Experience" by Jesse Garret
  9. "Web Desing for ROI" by Lance Loveday & Sandra Niehaus
  10. "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.

Accessible design from the get-go β€” Martian Chronicles
20% of designer effort that can take care of 80% of a11y challenges

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

Grids
The educational project about grids which Obys uses every day with unusual storytelling.

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.
gridless.design
get rid of the grid!

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
Create a Color Scheme Around Any Color in 8 Easy Steps
Have you ever found that one color you just had to use in your next project? But, when you try and generate a color palette around it…

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.

β€’ other web
In the era of countless interfaces, landings of products and services, there exists another web design. This quirky term refers to projects that stand out in their design and content from the usual, standardized sites.

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
Everything I Know About Style Guides, Design Systems, and Component Libraries – Lee Robinson
A deep-dive on everything I’ve learned in the past year building style guides, design systems, component libraries, and their best practices.

Design Systems

Figma team has updated its website with a collection of articles about the design and development of design systems.

Design Systems articles on building and maintaining design systems
A Figma publication for design systems creators, designers, developers, and managers

Design Systems Survey by Sparkbox

Research report on the "market" of design systems. Who uses it and how, in what condition, what they give.

The 2019 Design Systems Survey by Sparkbox
How are design systems for websites and apps changing the way the industry works? Sparkbox conducted a survey and is excited to share findings on the benefits and challenges of this impactful, systemic work.

⚑️ Briefly

Law of UX

A really helpful collection of best practices that designers can consider when building user interfaces.

Home | Laws of UX
Laws of UX is a collection of best practices that designers can consider when building user interfaces.

Hello πŸ‘‹

I'm Levi and welcome to the πŸ”’subscriber-only editionπŸ”’ of the magazine. Each week I'm picking some of the best examples and articles in the world of design. Join our cozy community of design professionals and learn together.

Already have an account? Sign in.

Subscribe to Bezier

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe