How to make a Good Web Design — Part 1

Overview Rule and Framework Design

Bismillah…

Photo by Kelly Sikkema on Unsplash

Overview

Building a good web design is not subjective or creative, but everyone can learn the basics by following the framework/system. Its application is divided into 10 different areas (web design ingredients). Design decisions for each ingredient are based on website personality.

As an illustration:

Web design ingredients we will learn include Typography, Colors, Images/Illustrations, Icons, Shadows, Border-radius, Whitespace, Visual Hierarchy, User Experience, and components/Layout. For more details, we will study it in this section.

Website Personality

First, we must determine the type of personality that we will apply on the web. What are the types? Here’s the review!

1. Serious/Elegant => For luxury and elegance, based on thin serif typefaces, golden or pastel colors, and big high-quality images.
2. Minimalist/Simple => Focuses on the essential text content, using small or medium-sized sans-serif black text, lines, and a 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 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.

Web Design Rules

Now we need to apply rules to each of its components, which will be matched with the type of website personality that has been selected. Some of the rules for making a good web are as follows:

Typography

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

📌Serif typeface => Playfair Display, Garamond, Merriweather, Roboto Slab, Lora, PT Serif, Noto Serif, EB Garamond, Bitter, etc…

📌Sans serif typeface => Comfortaa, Bebas Neue, Montserrat, Barlow, Roboto, Exo 2, Ubuntu, Lato, Browse Fonts — Google Fonts, Open Sans, etc…

• Choose the right typeface according to your website personality.
• Use only good and popular typefaces.
• It’s okay to use just one typeface per page! If you want more, limit to 2 typefaces.
• You can keep trying different typefaces as you design and build the page
• When choosing font sizes, limit choices! Use a “type scale” tool or other pre-defined range.

• Use a font size between 16px and 32px for “normal” text.
• For long text (like a blog post), try a size of 20px or even bigger.
• For headlines, you can go big (50px+) and bold (600+), depending on your personality.
• Use less than 75 characters per line.
• For normal-sized text, use a line height between 1,5 and 2. For big text, go below 1,5.
• Decrease letter spacing in headlines, if it looks unnatural (this will come from experience).
• Experiment with all caps for short titles, Make them small and bold, and increase letter spacing.
• Usually, don’t justify text.
• Don’t center long text blocks. Small blocks are fine.

Color

️📌Tools => Open Color, Tailwindcss, Flat Ui Colors 2, Palleton, coolors, Tint & Shade generator.

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

• Use a good color tone! Don’t choose a random tone or CSS-named colors.
• You need at least two types of colors in your color palette: the main color and the grey color.
• With more experience, you can add more colors: accent / secondary colors (use a tool).
• For diversity, create lighter and darker “versions” (tints and shades).
• Use your main color to draw attention to the most important elements on the page.
• Use colors to add interesting accents or make entire components or sections stand out.
• You can try to use your color strategically in images and illustrations.
• On dark-colored backgrounds, try to use a tint of the background (“lighter version”) for text.
• The text should usually not be completely black. Lighten it up it looks heavy and uninviting.
• Don’t make the text too light! Use a tool to check the contrast between text and background colors.

Images

📌Tools = Unsplash, Pexels, DrawKit, unDraw, squoosh.

• Different types of images: product photos, storytelling photos, illustrations, and patterns.
• Use images to support your website’s message and story. So only use relevant images!
• Prefer original images. If not possible, use original-looking stock images (not generic ones!).
• Try to show real people to trigger the user’s emotions.
• If necessary, crop images to fit your message.
• Experiment with combining photos, illustrations, and patterns.
• Method #1: Darker or brighten the image (completely or partially, using a gradient).
• Method #2: Position text in a neutral image area.
• Method #3: Put text in a box.
• To account for high-res screens, make image dimensions 2x as big as their displayed size.

• Compress images for lower file size and better performance.
• When using multiple images side-by-side, make sure they have the same dimensions.

Icons

📌Tools = Phosphor icons, Ionicons, Font Awesome, You can use
emojis too, and many, many more…

• Use a good icon pack, there are tons of free and paid icon packs.
• Use only one icon pack. Don’t mix icons from different icon packs.
• Use SVG icons or icon fonts. Don’t use bitmap image formats (.jpg and .png)!
• Adjust to website personality! Roundness, weight and filled/outlined depend on typography.
• Use icons to provide visual assistance to text.
• Use icons for product feature blocks.
• Use icons associated with actions, and label them (unless no space or icon is 100% clear).
• Use icons as bullet points.
• To keep icons neutral, use the same color as the text. To draw more attention, use different colors.
• Don’t confuse your users: icons need to make sense and fit the text or action!
• Don’t make icons larger than what they were designed for. If needed, enclose them in a shape.

Shadows

📌Rules =

• Shadow can be used on boxes and text
• You don’t have to use shadows! Only use them if it makes sense for the website personality.

• Use shadows in small doses: don’t add shadows to every element!
• Go light on shadows, don’t make them too dark!
• Use small shadows for smaller elements that should stand out (to draw attention).
• Use medium-sized shadows for larger areas that should stand out a bit more.
• Use large shadows for elements that should float above the interface.
• Experiment with changing shadows on mouse interaction (click and hover).
• Experiment with glows (colored shadows).

Border-Radius

📌Rules =

• Use border-radius to increase the playfulness and fun of the design, to make it less serious.

• Typefaces have a certain roundness: make sure that border-radius matches that roundness!
• Use border-radius on buttons, images, around icons, standout sections, and other elements.

Whitespace

📌Basic concept whitespace =

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

📌Rules =

• Use tons of whitespace between sections.
• Use a lot of whitespace between groups of elements.
• Use whitespace between elements.
• Inside groups of elements, try to use whitespace instead of lines.
• The more some elements (or groups of elements) belong together, the closer they should be.
• Too much whitespace looks detached, and too little looks too cramped.
• Match other design choices. If you have big text or big icons, you need more whitespace. Small Image and Text, less space.
• Try a hard rule, such as using multiples of 16px for all spacing.

Visual Hierarchy

📌What is visual hierarchy =

• Visual hierarchy is about establishing which elements of a design are the most important ones
• Visual hierarchy is all about drawing attention to the most important elements
• visual hierarchy is about defining a “path” for users, to guide them through the page
• We use a combination of position, size, colors, spacing, borders, and shadows to establish a meaningful visual hierarchy

📌Rules =

• Position important elements closer to the top of the page, where they get more attention.
• Use images mindfully, as they draw a lot of attention (larger images get more attention).
• Whitespace creates separation, so use whitespace strategically to emphasize elements.
• For text elements, use font size, font weight, color, and whitespace to convey importance.
• What text elements to emphasize? Titles, sub-titles, links, buttons, data points, and icons. You can also de-emphasize less important text, like labels or secondary/additional information.
• Emphasize an important component using background color, shadow, or border (or multiple).
• What components to emphasize? Testimonials, call-to-action sections, highlight sections, preview cards, forms, pricing tables, important rows/columns in tables, etc.

User Experience (UX)

📌What is user experience (UX) =

The user interface (UI) is the visual presentation of a product. It’s how the graphical interface looks and feels. For example Layout, Typography, color, etc

User experience (UX) is the overall experience the user has while interacting with the product. For example: Does the app feel logical and well thought out? Does the navigation work intuitively?

📌Rules =

• Don’t design complicated layouts. Use patterns that users know.
• Make your call-to-action the most prominent element, and make the text descriptive.
• Use blue text and underlined text only for links!
• Animations should have a purpose and be fast: between 200 and 500 ms.
• In forms, align labels and fields in a single vertical line, to make the form easier to scan.
• Offer users good feedback for all actions: form errors, form success, etc.
• Place action buttons where they will create an effect (law of locality)
• Use a descriptive, keyword-focused headline on your main page. Don’t be vague or fancy!
• Only include relevant information, efficiently! make the content 100% Clear.
• Use simple words! Avoid technical jargon and “smart-sounding” words.
• Break up long text with sub-headings, images, block quotes, bullet points, etc.

Elements and Components

📌From element to webpage =

📌Rules =

• Use common elements and components to convey your website’s information.
• Combine components into layouts using common layout patterns.
• Assemble different layout areas into a complete, final page.

So that’s a little I can say about the type of personality website along with the rules, if something is lacking please convey it in the comments column.

Don’t forget there is still a sequel in part 2 so wait for the continuation, okay? see you again…