All Web Design Rules and Guidelines

---

OVERVIEW

WEB DESIGN VS DEVELOPMENT

Web Designer create the overall look and feel of a website.
Web Developer implement the design using HTML, CSS and JavaScript code

The designers design a website or a webpage using design tools such as Figma, AdobXD and Photoshop etc. but developer take that design and implement it through code

WHY TAKE DESIGN SERIOUSLY?

GOOD DESIGN	BAD DESIGN
Creates an immediate and lasting good impression of the brand or product	Make users believe the brand doesn't really care about their product or service
Make the user trust the brand right away	Make the user insecure about trusting the brand
Increases the user's perceived value of the brand or product	Make the brand or product seem "cheap"
Gives users exactly what they were looking for when coming to the site, e.g. purchasing a product or finding information	Leaves users confused, and makes it hard to for them to reach their goal

EVERYONE CAN LEARN GOOD DESIGN

Good Web desing is not subjective or creative everyone can learn basic by following some rules and guidelines

ALL DESIGN INGREDIENTS

1. Typography
2. Colors
3. Images and Illustrations
4. Icons
5. Shadows
6. Border-radius
7. Whitespace
8. Visual Hierarchy
9. User Experience
10. Components and Layout

Design decisions for each igredient are based on website personality

All Website Personalities

Design ingredients need to be applied in different ways to different website personalities. Different personalities have different traits, therefore choices for design ingredients need to be made accordingly.

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 an 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 images/illustrations

6. Startup/Upbeat: Widely used in startups, featuring medium-sized sansserif 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

#1 TYPOGRAPHY

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

- Wikipedia

SARIF VS SANS-SARIF

SARIF	SANS-SARIF
All Web Design Rules and Guidelines	Modern look and feel
Modern look and feel	Clean and simple
Clean and simple	Easier to choose for beginner designer

USE GOOD TYPEFACES

1. Use only good and popular typefaces and play it safe

   SANS-SARIF

   • Inter
   • Open Sans
   • Roboto
   • Montserrat
   • Work Sans
   • Lato

   SARIF

   • Merriweather
   • Aleo
   • Playfair Display
   • Cormorant
   • Cardo
   • Lora

   TOOLBOX: Google Font, `Font Squirrel

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 (and other typefaces from Google Fonts!) to see which ones best fits your website’s message (this will come with experience)
   • You can keep trying different typefaces as you design and build the page

USE GOOD FONT SIZES ADN WEIGHTS

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

2. Use a font size between 16px and 32px for “normal” text

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

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

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

CREATE A GOODING EXPERIENCE

1. Use less than 75 characters per line

2. For normal-sized text, use a line height between 1.5 and For big text, go below 1.5

   • The smaller or longer the text, the larger the line height needs to be

3. Decrease letter spacing in headlines, if it looks unnatural (this will come from experience)

4. Experiment with all caps for short titles. Make them small and bold and increase letter-spacing

5. Usually, don’t justify text

6. Don’t center long text blocks. Small blocks are fine

#2 COLOR

CHOOSE THE RIGHT COLOR

1. Make the main color match your website’s personality: colors convey meaning!

   • Red Color draws a lot of attention, and symbolizes power, passion, and excitement
   • Orange Color is less aggressive, and conveys happiness, cheerfulness, and creativity
   • Yellow Color means joy, brightness, and intelligence
   • Green Color represents harmony, nature, growth, and health
   • Blue Color is associated with peace, trustworthiness, and professionalism
   • Purple Color conveys wealth, wisdom, and magic
   • Pink Color represents romance, care, and affection
   • Brown Color is associated with nature, durability and comfort
   • Black Color 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

   TOOLBOX: Open Color, Tailwindcss, Flast UI Color2

ESTABLISH A COLOR SYSTEM

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

   • Grey color can be dark version of every color

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

3. For diversity, create lighter and darker “versions” (tints and shades)

   • Tints means lighter version
   • Shasdes means darker version

   TOOLBOX: Tinst And Shade Generator, Paletton, Coolors

WHEN ADN HOW TO USE COLORS

1. Use your main color to draw attention to the most important elements on the page

2. Use colors to add interesting accents or make entire components or sections stand out

3. You can try to use your color strategically in images and illustrations

COLORS AND TYPOGRAPHY

1. On dark colored backgrounds, try to use a tint of the background (“lighter version”) for text

2. Text should usually not be completely black. Lighten if up it looks heavy and uninviting

3. Don’t make text too light! Use a tool to check contrast between text and background colors

   • Contrast ratio needs to be at least 4.5:1 for normal text and 3:1 for large text (18px+)

#3 IMAGES

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!)

   TOOLBOX: Unsplash, Pexels, DrawKit

USE IMEGES WELL

1. Try to show real people to trigger user’s emotions

2. If necessary, crop images to fit your message

3. Experiment combining photos, illustrations and patterns

HANDLING TEXT ON IMGES

1. Method #1: Darker or brighten image (completely or partially, using a gradient)

2. Method #2: Position text into neutral image area

3. Method #3: Put text in a box

SOME TECHNICAL DETAILS

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

   • Scale factor: Actual pixels the screen contains / Pixels

   • On high-res screens, scale factor is 2x or even 3x, on “normal” screens it’s just 1x (1 physical pixel = 1 design pixel) represented on screen

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

   TOOLBOX: Squoosh

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

#4 ICONS

USE GOOD ICONS

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

   • You can just use emojis too 😁

   TOOLBOX: Phosphor Icon, Ionicons, Icon8

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-BASE	BITMAP
   SVG icons and icon fonts	“Regular images”: JPG, PNG, GIF
   Scale indefinitely!	Do not scale, become unsharp!

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

WHEN TO USE ICONS

1. Use icons to provide visual assistance to text

2. Use icons for product feature blocks

3. Use icons associated with actions, and label them (unless no space or icon is 100% clear)

4. Use icons as bullet points

USE ICONS WELL

1. To keep icons neutral, use same color as text. To draw more attention, use different color

2. Don’t confuse your users: icons need to make sense and fit the text or action!

3. Don't make icons larger than what they were designed for. If needed, enclose them in a shape

#5 SHADOW

SOME CONCEPTS FIRST

1. After an era of 100% flat design, we’re now back to using shadows in UI design (“flat design 2.0”)

2. Shadow creates depth (3D): the more shadow, the further away from the interface the element is

   • Shadow can be used on boxes and text

USE SHADOWS WELL

1. You don’t have to use shadows! Only use them if it makes sense for the website personality

   • Less shadow for peronality like SERIOUS or ELEGANT website
   • More shadow for personality like PLAYFUL or FUN website

2. Use shadows in small doses: don’t add shadows to every element!

3. Go light on shadows, don’t make them too dark!

USE SHADOWS IN THE RIGHT SITUATION

1. Use small shadows for smaller elements that should stand out (to draw attention)

2. Use medium-sized shadows for larger areas that should stand out a bit more

3. Use large shadows for elements that should really float above the interface

4. Experiment with changing shadows on mouse interaction (click and hover)

5. Bonus: Experiment with glows (colored shadows)

#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

   • Less border-radius for peronality like SERIOUS or ELEGANT website
   • More border-radius for personality like PLAYFUL or FUN website

2. Typefaces have a certain roundness: make sure that border-radius matches that roundness!

3. Use border-radius on buttons, images, around icons, standout sections and other elements

#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

1. Use tons of whitespace between sections

2. Use a lot of whitespace between groups of elements

3. Use whitespace between elements

4. Inside groups of elements, try to use whitespace instead of lines

HOW MUCH WHITESPACE

1. The more some elements (or groups of elements) belong together, the closer they should be!

   • Law of Proximity: Objects that are near, or proximate to each other, tend to be grouped together.

2. Start with a lot of whitespace, maybe even too much! Then remove whitespace from there

   • oo much whitespace looks detached, too little looks too crammed

3. Match other design choices. If you have big text or big icons, you need more whitespace

4. Try a hard rule, such as using multiples of 16px for all spacing

#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

1. Position important elements closer to the top the page, where they get more attention

2. Use images mindfully, as they draw a lot of attention (larger images get more attention)

3. Whitespace creates separation, so use whitespace strategically to emphasize elements

VISUAL HIERARCHY FOR TEXT ELEMENTS

1. For text elements, use font size, font weight, color, and whitespace to convey importance

2. What text 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

1. Emphasize an important component using background color, shadow, or border (or multiple)

2. Try emphasizing some component A over component B by de-emphasizing component B

3. What components to emphasize? Testimonials, call-to-action sections, highlight sections, preview cards, forms, pricing tables, important rows/columns in tables, etc.

#9 USER EXPERIENCE (UX)

WHAT IS USER EXPERIENCE (UX)?

Design is not just what it looks like and feels like. Design is how it works

– Steve Jobs

1. 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

2. 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 AND UX DESIGN

1. UI is graphical interface 👉 UI Design is what makes an interface beautiful

2. UX is experience with interface 👉 UX Design is what makes an interface useful and functional

   UX Design can not exist without UI Design!

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

   • Good UX design aligns the user’s goals with the business’ goals

UX RULES FOR USABILITY

1. Don’t design complicated layouts. Don’t reinvent the wheel. Use patterns that users know

2. Make your call-to-action the most prominent element, and make the text descriptive

3. Use blue text and underlined text only for links!

4. Animations should have a purpose and be fast: between 200 and 500 ms

5. In forms, align labels and fields in a single vertical line, to make the form easier to scan

6. Offer users good feedback for all actions: form errors, form success, etc. [web apps]

7. Place action buttons where they will create an effect (law of locality) [web apps]

8. Use a descriptive, keyword-focused headline on your main page. Don’t be vague or fancy!

9. Only include relevant information, efficiently! Cut out fluff and make the content 100% clear

10. Use simple words! Avoid technical jargon and “smart-sounding” words

11. Break up long text with sub-headings, images, block quotes, bullet points, etc.

#10 THE WEBSITE-PERSONALITIESFRAMEWORK

RULES SHOULD BE APPLIED ACCORDING TO SELECTED WEBSITE PERSONALITY

1. How do you want website to ppear to users? What “vibe” do you want to transmit?

2. Choose one of the website personalities accordingly

3. Apply personality traits to each design ingredient

   • Typography
   • Colors
   • Images
   • Icons
   • Shadows
   • Border-radius
   • Layout

PERSONALITY 01 – SERIOUS/ELEGANT

OVERVIEW

Design for luxury and elegance, based on thin serif typefaces, golden or pastel colors, and big high-quality images

INDUSTRIES

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

1. TYPOGRAPHY: Serif typefaces (especially in headings), light font weight, small body font size

2. COLORS: Gold, pastel colors, black, dark blue or grey

3. IMAGES: Big, high-quality images are used to feature elegant and expensive products

4. ICONS: 🤷 Usually no icons, but thin icons and lines may be used

5. SHADOWS: 🚫 Usually no shadows

6. BORDER-RADIUS: 🚫 Usually no border-radius

7. LAYOUT: A creative and experimental layout is quite common

PERSONALITY 02 – MINIMALIST/SIMPLE

OVERVIEW

Focusses on the essential text content, using small or mediumsized sans-serif black text, lines, and few images and icons

INDUSTRIES

Fashion, portfolios, minimalism companies, software startups

1. TYPOGRAPHY: Boxy/squared sans-serif typefaces, small body font sizes

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

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

4. ICONS: 🤷 Usually no icons, but small simple black icons may be used

5. SHADOWS: 🚫 Usually no shadows

6. BORDER-RADIUS: 🚫 Usually no border-radius

7. LAYOUT: Simple layout, a narrow one-column layout is quite common

PERSONALITY 03 – PLAIN/NEUTRAL

OVERVIEW

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

INDUSTRIES

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

1. TYPOGRAPHY: Neutral-looking sans-serif typefaces are used, and text is usually small and doesn’t have visual impact

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

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

4. ICONS: 🤷 Usually no icons, but simple icons may be used

5. SHADOWS: 🚫 Usually no shadows

6. BORDER-RADIUS: 🚫 Usually no border-radius

7. LAYOUT: Structured and condensed layout, with lots of boxes and rows

PERSONALITY 04 – 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

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

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

3. IMAGES: Lots of big images are usually displayed

4. ICONS: 🚫 Usually no icons

5. SHADOWS: 🚫 Usually no shadows

6. BORDER-RADIUS: 🚫 Usually no border-radius

7. LAYOUT: 🤷 All kinds of layouts, no particular tendencies

PERSONALITY 05 – 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

1. TYPOGRAPHY: Soft serif typefaces frequently used for headings, but sansserif headings might be used too (e.g for software products)

2. COLORS: Pastel/washed-out colors: light oranges, yellows, browns, greens, blues

3. IMAGES: Images and illustrations are usual, matching calm color palette

4. ICONS: ✅ Icons are quite frequent

5. SHADOWS: 🤷 Usually no shadows, but might be used sparingly

6. BORDER-RADIUS: ✅ Some border-radius is usual

7. LAYOUT: 🤷 All kinds of layouts, no particular tendencies

PERSONALITY 06 – STARTUP/UPBEAT

OVERVIEW

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

INDUSTRIES

Software startups, and other modern-looking companies

1. TYPOGRAPHY: Medium-sized headings (not too large), usually one sans-serif typeface in whole design. Tendency for lighter text colors

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

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

4. ICONS: ✅ Icons are very frequent

5. SHADOW: ✅ Subtle shadows are frequent. Glows are becoming modern

6. BORDER-RADIUS: ✅ Border-radius is very common

7. LAYOUT: Rows of cards and Z-patterns are usual, as well as animations

PERSONALITY 07 – 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

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

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

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

4. ICONS: ✅ Icons are very frequent, many times in a hand-drawn style

5. SHADOWS: ✅ Subtle shadows are quite common, but not always used

6. BORDER-RADIUS: ✅ Border-radius is very common

7. LAYOUT: 🤷 All kinds of layouts, no particular tendencies

---

THE 7 STEPS TO A GREAT WEBSITE

THE PROCESS BEHIND BUILDING A WEBSITE

1. DEFINE THE PROJECT

   • Define WHO the website is for. Is it for yourself? For a client of your agency or your freelancing business?

   • Define WHAT the website is for. In other words, define business and user goals of your website project

   Business goal example: Selling premium dog food

   User goal example: Finding high-quality dog food for good price

   • Define a target audience. Be really specific if possible and if it makes sense for your website (this can come from your client)

   Example: “Women, 20 to 40 years old, living in Europe, earning over 2000€/month, with a passion for dogs”

2. PLAN THE PROJECT

   • Plan and gather website content: copy (text), images, videos etc.

   • Content is usually provided by the client, but you also can help them produce and find some content (simply finding free images is easiest, but if they want copy, charge them extra)

   • For bigger sites, plan out the sitemap: what pages the site needs, and how they are related to one another (content hierarchy)

   • Based on the content, plan what sections each page needs in order to convey the content’s message, and in which order

   • Define the website personality

3. SKETCH LAYOUT AND COMPONENT IDEAS

   • Think about what components you need, and how you can use them in layout patterns

   • Get ideas out of your head: sketch them with pen and paper or with some design software (e.g. Figma )

   • This is an iterative process: experiment with different components and layouts, until you arrive at a first good solution

   • You don’t need to sketch everything, and don’t make it perfect. At some point, you’re ready to jump into HTML and CSS

4. DESIGN AND BUILD WEBSITE

   • Use decisions, content and sketches from Steps 1, 2 and 3 to design and build the website with HTML and CSS (“designing in the browser”)

   • You already have the layout and components that you selected in Step 3. In this step, you need to design the actual visual styles

   • Create the design based on selected website personality, the design guidelines I showed you, and inspiration

   • Use the client’s branding (it if exists already) for design decisions whenever possible: colors, typography, icons, etc

5. TEST AND OPTIMIZE

   • Make sure website works well in all major browsers (Chrome, Firefox, Safari, Edge, maybe even old IE 😱)

   • Test the website on actual mobile devices, not just in DevTools

   • Optimize all images, in terms of dimensions and file size (👋 See images guidline)

   • Fix simple accessibility problems (e.g. color contrast issues)

   • Run the Lighthouse performance test in Chrome DevTools and try to fix reported issues

   • Think about Search Engine Optimization (SEO)

6. LAUNCH THE MASTERPIECE 🚀

   • Once all work is done, everything is perfect, and you got approval from your client (or yourself 😁), it’s time to share your masterpiece with the world!

   • Upload your website files to a hosting platform. There are countless platform, we will use one with a free plan (Netlify )

   • Choose and buy a great domain name, one that represents the brand well, is memorable and easy to write

7. MAINTAIN AND KEEP UPDATING WEBSITE

   • Launching is not the end…

   • Keep the website content updated over time. If you’re working with a client, you can create a monthly maintenance contract (recurring revenue 🤑)

   • Install analytics software (e.g. Google Analytics or Fathom) to get statistics about website users. This may inform future changes in the site structure and content.

   • A blog that is updated regularly is a good way to keep users coming back, and is also good for SEO.

WHAT IS RESPONSIVE DESIGN?

RESPONSIVE DESIGN

Design technique to make a webpage adjust its layout and visual style to any possible screen size (window or viewport size)

In practice, this means that responsive design makes websites usable on all devices, such as desktop computers, tablets, and mobile phones.

It’s a set of practices, not a separate technology. It’s all just CSS!

RESPONSIVE DESIGN INGREDIENTS

1. FLUID LAYOUTS

   • To allow webpage to adapt to the current viewport width (or even height)

   • Use % (or vh / vw) unit instead of px for elements that should adapt to viewport (usually layout)

   • Use max-width instead of width

2. RESPONSIVE UNITS

   • Use rem unit instead of px for most lengths

   • To make it easy to scale the entire layout down (or up) automatically

   • Helpful trick: setting 1rem to 10px for easy calculations

3. FLEXIBLE IMAGES

   • By default, images don’t scale automatically as we change the viewport, so we need to fix that

   • Always use % for image dimensions, together with the max-width property

4. MEDIA QUERIES

   • Bring responsive sites to life!

   • To change CSS styles on certain viewport widths (called breakpoints)

DESKTOP-FIRST VS. MOBILE-FIRST DEVELOPMENT

1. DESKTOP-FIRST

   • Start writing CSS for the desktop: large screen

   • Then, media queries shrink design to smaller screens.

2. MOBILE-FIRST

   • Start writing CSS for mobile devices: small screen

   • Then, media queries expand design to a large screen

   • Forces us to reduce websites and apps to the absolute essentials