Feiliang ZhouPosted on June 19, 2023

WEB DESIGN

#webdev#CSS#beginners#programming

Limiting your choices is actually a good idea.

#1 Why take design seriously?

#2 What is good design?

• Good web design is not subjective or creative
• Everyone can learn basics by following a framework/system

#3 Web design ingredients

• Typography
• Colors
• img/Illustrations
• Icons
• Shadows
• Border-radius
• Whitespace
• Visual Hierarchy
• User experience
• Components/Layout

#4 Overview of website personalities

1. Serious/Elegant: For luxury and elegance, based on thin serif typefaces, golden or pastel colors, and big high-quality images
2. Minimalist/Simple: Focusses on the essential text content, using small or medium-sized sans-serif black text, lines, and few images and icons
3. Plain/Neutral: Design that gets out of the way by using neutral and small typefaces, and a very structured layout. Common in big corporations
4. Bold/Confident: Makes and impact, by featuring big and bold typography, paired with confident use of big and bright colored blocks
5. Calm/Peaceful: For products and services that care, transmitted by calming pastel colors, soft serif headings, and matching img/illustrations
6. Startup/Upbeat: Widely used in startups, featuring medium-sized sans-serif typefaces, light-grey text and backgrounds, and rounded elements
7. Playful/Fun: Colorful and round designs, fueled by creative elements like hand-drawn icons or illustrations, animations, and fun language

#5 Web design RULE #1: Typography

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed -Wikipedia

1. Use only good and popular typefaces and play it safe Sans-serif typefaces:

   Inter Almost before we knew it, we had left the ground. Open Sans Almost before we knew it, we had left the ground. Roboto Almost before we knew it, we had left the ground. Montserrat Almost before we knew it, we had left the ground. Work Sans Almost before we knew it, we had left the ground. Lato Almost before we knew it, we had left the ground.

   Serif typefaces:

   Merriweather Almost before we knew it, we had left the ground. Aleo Almost before we knew it, we had left the ground. Playfair Display Almost before we knew it, we had left the ground. Cormorant Almost before we knew it, we had left the ground. Cardo Almost before we knew it, we had left the ground. Lora Almost before we knew it, we had left the ground.

2. It's Okay to use just one typeface per page! If you want more, limit to 2 typefaces.

3. Choose the right typeface according to your website personality

   • Choose the right personality for your website
   • Decide between a serif and sans-serif typeface
   • Experiment with all the "good" typefaces to see which one best fits your website's message
   • You can keep trying different typefaces as you design and build the page

4. When choosing font-sizes, limit choices! Use a "type scale" tool or other pre-defined range

5. Use a font size between 16px and 32px for "normal" text

6. For long text (like a blog post), try a size of 20px or even bigger

7. For headlines, you can go really big (50px+) and bold (600+), depending on personality

8. For any text, don't use a font weight under 400 (regular)

Create a Good reading experience

9. Use less than 75 characters per line (65-72 characters are good)
10. For normal-sized text, use a line height between 1.5 and 2. For big text, go below 1.5
    • The smaller or longer the text, the larger the line height needs to be!
11. Decrease letter spacing in headlines, if it looks unnatural
12. Experiment with all caps for short title. Make them small and bold and increase letter-spacing
13. Usually, don't justify text
14. Don't center long text blocks. Small blocks are fine.

#6 Web design RULE #2: Colors

Choose the right color

1. make the main color match your website's personality: colors convey meaning!

   • Red draws a lot of attention, and symbolizes power, passion and excitement
   • Orange is less aggressive, and conveys happiness, cheerfulness, and creativity
   • Yellow means joy, brightness, and intelligence
   • Green represents harmony, nature, growth, and health
   • Blue is associated with peace, trustworthiness, and professionalism
   • Purple conveys wealth, wisdom, and magic
   • Pink represents romance, care, and affection
   • Brown is associated with nature, durability and comfort
   • Black symbolizes power, elegance and minimalism, but also grief and sorrow

2. Use a good color tone! Don't choose a random tone or CSS named colors.

3. You need at least two types of colors in your color palette: a main color and a grey color

4. With more experience, you can add more colors: accent (secondary) colors (use a tool)

5. For diversity, create lighter and darker "versions" (tints and shades) (with a tool called "tint & shade generator")

   main color accent color grey color

When and How to use colors

6. Use your main color to draw attention to the most important elements on the page
7. Use colors to add interesting accents or make entire components or sections stand out
8. You can try to use your color strategically in images and illustrations

Colors and Typography

9. On dark colored background, try to use a tint of the background ("lighter version") for text
10. Text should usually not be completely black. Lighten it up, it looks heavy and uninviting
11. Don't make text too light! Use a tool to check contrast between text and background colors ( e.g. Coolors)

    Contrast radio needs to ba at least 4.5:1 for normal text and 3:1 for large text (18px+)

#7 Web design RULE #3: Images and Illustrations

Use good images

1. Different types of images: product photos, storytelling photos, illustrations, patterns
2. Use images to support your website's message and story, So only use relevant images!
3. Prefer original images. If not possible, use original-looking stock images (not generic ones!)

Use images well

4. try to show real people to trigger user's emotions
5. If necessary, crop images to fit your message
6. Experiment combining photos, illustrations and patterns

Handling TEXT on Images

7. Method #1: Darker or brighten the image (completely or partially, using a gradient)
8. Method #2: Position text into neutral image area
9. Method #3: Put text in a box

Some technical details while using images

10. To account for high-res screens, make image dimensions 2x as big as their displayed size

    • Scale factor: Actual pixels the screen contains/Pixels represented on screen
    • On high-res screen, scale factor is 2x or even 3x, on "normal" screens it's just 1x (1 physical pixel = 1 design pixel)

11. Compress images for a lower file size and better performance

12. When using multiple images side-by-side, make sure they have the exact same dimensions

#7 Web design RULE #4: Icons

Use good icons

1. Use a good icon pack, there are tons of free and paid icons packs

   • Free icon pack

     HeroIcons Phosphor icons Ionicons Icons8

2. Use only one icon pack. Don't mix icons from different icon packs

3. Use SVG icons or icon fonts. Don't use bitmap image formats (.jpg and .png)!

   • Vector based
   • SVG images and icon fonts
   • Scale indefinitely

4. Adjust to web personality! Roundness, weight and filled/outlined depend on typography.

When to use icons

5. Use icons to provide visual assistance to text
6. Use icons for product feature blocks
7. Use icons associated with actions, and label them (unless no space or icon is 100% clear)
8. Use icons as bullet points
9. To keep icons neutral, use same color as text. To draw more attention, use different colors
10. Don't confuse your users, icons need to make sense and **fit the text or actions **.
11. Don't make icons larger than they were designed for. If needed, enclose them in a shape

#8 Web design RULE #5: Shadows

Use shadows well

1. You don't have to use shadows! Only use them if it makes sense fof the website personality.
2. Use shadows in small doses: don't add shadows to every elements!
3. Go light on shadows, not make them too dark.

Use shadows in the right situation

4. Use small shadows for smaller elements that should stand out (to draw attention)
5. Use medium-sized shadows for larger area that should stand out a bit more
6. Use large shadows for elements that should really float above the interface
7. Experiment with changing shadows on mouse interaction (click and hover)
8. Bonus: Experiment with glows (colored shadows)

#9 Web design RULE #6: Border radius

Use border-radius well

1. Use border-radius to increase the playfulness and fun of the design, to make it less serious
2. Typefaces have a certain roundness, make sure that border-radius matches the roundness!
3. Use border-radius on buttons, images, around icons, standout sections and other elements.

#10 Web design RULE #7: Whitespace

Why whitespace

1. The right amount of whitespace makes designs look clean, modern and polished
2. Whitespace communicates how different pieces of information are related to one another
3. Whitespace implies invisible relationships between the elements of a layout

Where to use whitespace

4. Use tons of whitespace between sections
5. Use a lot of whitespace between groups of elements
6. Use whitespace between elements
7. Inside group of elements, try to use whitespace instead of lines.

How much whitespace

8. The more some elements (or group of elements) belong together, the closer they should be! (the law of proximity)
9. Start with a lot of whitespace, maybe even too much! Then remove whitespace from there (Too much whitespace looks detached, too little looks too crammed)
10. Match other design choices. If you have big text or big icons, you need more whitespace
11. Try a hard rule, such as using multiples of 16px for all spacing

#11 Web design RULE #8: Visual Hierarchy

What is visual hierarchy

1. Visual hierarchy is about establishing which elements of a design are the most important ones
2. Visual hierarchy is about drawing attention to these most important elements
3. Visual hierarchy is about defining a "path" for users, to guide them through the page
4. We use a combination of position, size, colors, spacing, borders and shadows to establish a meaningful visual hierarchy between elements/components

Visual hierarchy fundamentals

5. Position important elements closer to the top of the page, where they get more attention
6. Use images mindfully, as they draw a lot of attention (larger images get more attention)
7. Whitespace creates separation, so use whitespace strategically to emphasize elements

Visual hierarchy for text elements

8. For text elements, use font size, font weight, color, and whitespace to convey importance
9. What elements to emphasize? Titles, sub-titles, links, buttons, data points, icons (you can also de-emphasize less important text, like labels or secondary/additional information)

Visual hierarchy between components

10. Emphasize an important component using background-color, shadow, or border (or multiple)
11. Try emphasizing some component A over component B by de-emphasizing component B
12. What components to emphasize? Testimonial, call-to-action sections, highlight sections, preview cards, forms, pricing tables, important rows/columns in tables, etc.

#12 Web design RULE #9: User Experience (UX)

What is user experience?

"Design is not just what it looks like and feels like. Design is how it works." -Steve Jobs

User Interface (UI) is the visual presentation of a product. It's how the graphical interface looks and feels like (Layout, "Personality", Typography, colors, icons, etc.)

User Experience (UX) is the overall experience the user has while interacting with the product

• Does the app feel logical and well thought out?
• Does the navigation work intuitively?
• Are users reaching their goals?

UI is graphical interface -> UI Design is what makes an interface beautiful

UX is experience with interface -> UX Design is what makes an interface useful and functional

UX design guiding principle: GOALS

1. A website or application exists for a reason: a user has a goal for visiting it, and a business has a goal for creating it

UX rules for usability

2. Don't design complicated layouts. Don't reinvent the wheel. Use patterns that users know
3. Make your call-to-action the most prominent element, and make the text descriptive
4. Use blue text and underline text only for links!
5. Animations should have a purpose and be fast: between 200 and 500 ms
6. In forms, align labels and fields in a single vertical line, to make the form easier to scan
7. Offer users good feedback for all actions: form errors, form success, etc.
8. Place action buttons where they will create an effect (law of locality)

UX rules for website content

9. Use a descriptive, keyword-focused headline on your main page. Don't be vague of fancy!
10. Only include relevant information, efficiently! Cut out fluff and make the content 100% clear
11. Use simple words! Avoid technical jargon and "smart-sounding" words
12. Break up long text with sub-heading, images, block quotes, bullet point, etc.

The Website Personalities Framework

The 7 personalities

1. Serious/Elegant
2. Minimalist/Simple
3. Plain/Neutral
4. Bold/Confident
5. Calm/Peaceful
6. Startup/Upbeat
7. Playful/Fun

Progress

How do you want website to appear to users? What "vibe" do you want to transmit? ↓ Choose one of the website personalities accordingly ↓ Apply personality traits to each design ingredient (Typography, colors, images, icons, shadows, border-radius, Layout)

1. Serious/Elegant Overview: Design for luxury and elegance, based on thin serif typeface, golden or pastel colors, and big high-quality images

Industries: Real estate, high fashion, jewelry, luxury products or services

Typography: Serif typefaces (especially in headings), light font weight, small body font size

Colors: Gold, pastel colors, black, dark blue or grey

Images: Big, high-quality images are used to feature elegant and expensive products

Icons: Usually no icons, but thin icons and lines may be used

Shadows: Usually no shadows

Border-radius: Usually no border-radius

Layout: A creative and experimental layout is quite common

2. Minimalist/Simple

Overview: focusses on the essential text content, using small or medium-sized sans-serif black text, lines, and few images and icons

Industries: Fashion, portfolios, minimalism companies, software startups

Typography: Boxy/squared sans-serif typefaces, small body font sizes

Colors: Usually black or dark grey, on pure white background. Usually just one color throughout the design

Images: Few images, which can be used to add some color to the design. Usually no illustrations, but if, than just black

Icons: Usually no icons, but small simple black icons may be used

Shadows: Usually no shadows

Border-radius: Usually no border-radius

Layout: Simple layout, a narrow one-column layout is quite common

3. Plain/Neutral

Overview: Design that gets out of the way by using very neutral and small typefaces, and a boxy, structures, and condensed layout

Industries: Well-established corporations, companies that don't want to make an impact through design

Typography: Neutral-looking sans-serif typefaces are used, adn text is usually small and doesn't have visual impact

Colors: Safe colors are employed, nothing too bright or to washed-out. Blues and blacks are common

Images: Images are frequently used, but usually in a small format

Icons: Usually no icons, but simple icons may be used

Shadows: Usually no shadows

Border-radius: usually no border-radius

Layout: Structured and condensed layout, with lots of boxes and rows

4. Bold/Confident

Overview: Design that makes an impact, by featuring big and bold typography, paired with confident use of big colored blocks

Industries: Digital agencies, software startups, travel, "strong" companies

Typography: Boxy/squared sans-serif typefaces, big and bold typography, especially headings. Uppercase headings are common

Colors: Usually multiple bright colors. Big color blocks/sections are used to draw attention

Images: Lots of big images are usually displayed

Icons: Usually no icons

Shadows: Usually no shadows

Border-radius: Usually no border-radius

Layout: All kinds of layouts, no particular tendencies

5. Calm/Peaceful

Overview: For products and services that care about the consumer, which is transmitted by calming pastel colors and soft serif headings

Industries: Healthcare, all products with focus on consumer well-being

Typography: Soft serif typefaces frequently used for headings, but sans-serif headings might be used too (e.g for software products)

Colors: Pastel/washed-out colors: light oranges, yellows, brows, greens, blues

Images: Images and illustrations are usual, matching calm color palette

Icons: Icons are quite frequent

Shadows: Usually no shadows, but might be used sparingly

Border-radius: Some border-radius is usual

Layout: All kinds of layouts, no particular tendencies

6. Startup/Upbeat

Overview: Widely used in startups, featuring medius-sized sans-serif typefaces, light-grey backgrounds, and rounded elements

Industries: Software startups, and other modern-looking companies

Typography: Medius-sized headings (not too large), usually one sans-sefrf typeface in whole design. Tendency for lighter text colors

Colors: Blues, greens and purples are widely used. Lots of light backgrounds (mainly gray), gradients are also common

Images: Images or illustrations are always used. 3D illustrations are modern. Sometimes patterns and shapes add visual details

Icons: Icons are very frequent

Shadows: Subtle shadows are frequent. Glows are becoming modern

Border-radius: Border-radius is very common

Layout: Rows of cards and Z-patterns are usual, as well as animations

7. Playful/Fun

Overview: Colorful and round designs, fueled by creative elements like hand-drawn icons or illustrations, animations, and fun language

Industries: Child products, animal products, food

Typography: Round and creative (e.g. handwritten) sans-serif typefaces are frequent. Centered text is more common

Colors: Multiple colors are frequently used to design a colorful layout, all over backgrounds and text

Images: Images, hand-drawn (or 3D) illustrations, and geometric shapes and patterns are all very frequently used

Icons: Icons are very frequent, many times in a hand-drawn style

Shadows: Subtle shadows are quite common, but not always used

Border-radius: Border-radius is very common

Layout: All kinds of layouts, no particular tendencies

Steal like an artist

1. Website Personalities
2. Design Ingredients
3. Design Guidelines/rules
4. Getting inspired and stealing like and artist

Land-book Onepagelove Awwwards Screenlane