How to make a Good Web Design — Part 2

Website personalities frameworks

4 min readAug 16, 2022

Bismillah…

In the previous section, we already knew the types of website personalities and their rules, for those who haven’t read them, please click the link here. Now we’re going to dig deeper into website personalities, what they are used for, and the rules for matching those types of web personalities. Here’s the explanation…

design web — Photo by Green Chameleon on Unsplash

Serious / Elegant

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

Minimalist / Simple

Focusses on the actual text content, using small or medium-sized sans-serif black text, lines, a 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, then 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.

Plain / Neutral

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.
Typography = Neutral-looking sans serif typefaces are used, and text Is usually small and doesn’t have a visual impact.
Colors = Safe colors are employed, nothing too bright or too 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.

Bold / Confident

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, and 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.

Calm/ Peaceful

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 a focus on consumer well-being.
Typography = Soft serif typefaces are 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, browns, greens, blues.
Images = Images and illustrations are usual, matching calm color palettes.
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.

Startup / Upbeat

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

Industries = Software startups, and other modern-looking companies.
Typography = Medium-sized headings (not too large), usually one sans-serif typeface in the whole design. The tendency for lighter text colors.
Colors = Blues, greens, and purples are widely used. Lots of light backgrounds (mainly gray), and gradients are also common.
Images = Images or illustrations are always usual, 3d illustrations are modern. Sometimes patterns and shapes add visual details.
Icons = icons are quite 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.

Playful / Fun

Colorful and round design, 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 quite 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.

ADVANCED: COMBINING PLAYFULNESS AND BOLDNESS

It is possible that by continuing to experiment we can also combine several types of website personalities at once.

Thank you for reading to the end, you don’t get bored to this point because there is still 1 more part that we will discuss. Hopefully useful see you later in the next part…