Installation, design and layout of a good website. Includes colors, fonts, layout, interface.

"Your online presence says a lot about your personal brand. It allows you to build credibility as a professional and create a voice for yourself within your industry."

- Heather R. Huhman on Personal Branding Blog, Jan 20, 2015.



Design Tools

Learn Design / Advice

Erik D. Kennedy in his e-mail about a button:

  • Letterforms are SHAPES. You can analyze fonts as sets of shapes, not simply as works of art
  • You should letter-space uppercase text, since most fonts were designed for sentence-case
  • Think in HSB to modify colors
  • You can find variations on a “generally correct” color by playing with the hue
  • Saturation and brightness are levers that move in opposite direction to control luminosity
  • Find colors that match the same descriptors that you would give your typeface and your overall brand
  • Even something as simple as shadows can match the brand you're creating
  • For inline icons, make them appear as though they were drawn with the same pen as the font you’re using

Basic Design Principles

  • Advice from Psychotactics:
    • Totally and easily updateable
    • Minimal, fast loading graphics
  • Usable and mobile
  • Calls to Action
  • Always Changing
  • Visuals: visitor sees my site before reading it
  • Design needs to follow marketing: identify ideal customer, name & tagline, brand promise
  • Write my own style guide for reference
  • Pick the right colours for your business (ideally 2, max 3)

11 Reasons Why it doesn't Sell

Article on Entrepreneur, by Firas Kittaneh, Oct 30, 2014

  1. Low-quality visuals
  2. No reviews/testimonials
  3. Badly chosen colors
  4. Outdated information
  5. Hard to find (SEO)
  6. Not mobile-friendly
  7. Contact info hard to find
  8. Not focused on user
  9. Requires sign-ups
  10. Auto-playing audio/video
  11. Painfully slow

User's First Impression

  • Ambiance!
    • How does the site look on different devices?
      • Needs a responsive design
    • How does typography influence word consumption? Easy to grasp?
      • A welcoming layout
    • How does layout influence eye movement?
  • Too much info is overwhelming. Readers avoid
  • Reduce info, increase white space for accessibility (example: Couchsurfing (May 29, 2014))
    • White space: space between content and borders (breathing room)


  • What’s my site’s grid? Divide content up with invisible grid lines
  • Columns: should be 450-550 pixels wide

"The Power of 3"

  • Article on Psychotactics
  • The brain finds it easy to grasp threes: elements, colours, fonts - building blocks of visual communication!
  • Keep the 3 elements compact so they don't break down into sub-elements
  • Keep fonts and styles consistent
    • But add some contrast for drama: e.g. wide vs. vertical fonts
  • Article gives examples: McDonald's, Coke - only few elements!

User Interface/Experience (UI, UX)

Erik Kennedy: 7 rules for Creating Gorgeous UI (Part 1 | Part 2)

  1. Add light from above to elements (shadow below them or their inset borders)
    • e.g. buttons, sliders
    • Inset elements:
      • Text fields
      • Pressed buttons
      • Slider tracks
      • Radio buttons (pressed)
      • Check boxes
    • Outset elements:
      • Radio buttons (unpressed)
      • Unpressed buttons
      • Slider buttons
      • Dropdown buttons
      • Maps
      • Popups
  2. Design in Grayscale first! (example: Uber)
    • This makes it clean and simple
    • Add colours later: keep them relevant and don't overdo them
      • e.g. grayscale + 1 or 2 colours
      • or: grayscale + shades of the same color
  3. Use White Space
    • See examples in article
  4. Be smart about overlaying pictures with text
    • Avoid just writing on it unless you have good contrast
    • Overlay the entire image (transparent black layer)
    • Put the text in a box (add e.g. transparency, rounded corners)
    • Blur the image
    • Floor fade: gradient to black at bottom of image
    • Diffuse the text's background
  5. Emphasize text: pop up or down
    • Pop up: styles that make text more visible, e.g. bold, capitals...
    • Pop down: styles that make text less visible, e.g. small letters, low contrast...
    • Other factors: color, size
    • Balance these to highlight content or remove it from attention
  6. Use nice fonts
    • Examples in the article
  7. Steal. Cherry-pick.
  8. Align everything (this is from a later newsletter!)
    • Use lines (can well be invisible) to give visual structure and alignment to all elements of your design

Basic Layout

  • Big CTA must stand out!
    • e.g. build mailing list
  • Home: first impression (first 5 seconds are extremely important)
    • Present content in F shape! (this is how readers look at page)
    • Most important information needs to be above the fold (before scrolling down)
    • Where do the eyes gravitate right away?
    • What kind of information does one see?
      • Does it highlight a problem clients may not know they have?
    • Highlight the path and action I want readers to take
      • Guide my visitors through the page
      • Use leading questions (addressing doubts, problems)
    • Hierarchy: Most important => Supporting (Details, CTA) => Least important
    • Beyond home page: secondary pages with product details, case studies...
  • About: talk about reader first, wrap up with why I'm trustworthy, + photos, + testimonials
  • Contact: easy to find so visitors can get in touch
    • Have a prominent Opt-In
  • Blog: good formatting, lots of images (at least 1 pinnable!), call to action
  • Resources: archive of useful links and contents for me & audience
    • Easily accessible (menu link)
    • Well-structured and sorted
    • Include books (Amazon links)
    • Track pageviews and clicks

Advanced Structuring

Guiding Visitors

  • In general: all paths must lead to my buy/contact page
  • Use nonverbal cues
    • Visible hands establish trust
    • Use hands and eyes to direct
    • Understand facial expressions

Typical path of visitors' attention

  1. Logo
  2. Main navigation menu
  3. Search box
  4. Social networking links
  5. Primary image (whatever image was at the top of the repeating header or page)
  6. Written content
  7. Website footer

Landing Page

A page where you send users when you want them to take a specific action. Example page.

  • Have a strong headline
  • Make it clean and uncluttered
    • Don't use the same design as the rest of your page
    • Lots of white space, single column
    • Only use relevant and meaningful visuals
  • Aesthetics: give your landing page a good, coherent look and feel
    • Tastefully tailor fonts, colors, visuals to your audience
    • Stay in line with your other materials (e.g. the original ad)
  • Ask for only one action
    • Choice confuses
  • Nail the content above the fold! People may not scroll down.
    • Upper 300 pixels of the page
  • Move the user along the page towards a desired goal
    • Subscribe
    • Book a consultation
    • Join the community
    • Purchase
    • ...
  • Headline: refer to the place or ad copy the user came from!
  • Have a clear CTA
  • Second person: you, your
  • Deliver a clear, persuasive message
    • Make it crystal clear. No digressions
    • Make the copy tight (not necessarily short)
  • Most important points: beginning of paragraphs, bullets
    • People read beginnings and ends first
  • First paragraph: short, no more than 1-2 lines!
    • Never more than 4-5 lines in follow-up
  • Plan your layout: how much will be visible above the fold?
  • Ask for little: the easier it is to sign up, the better
  • Test everything.

Essential Elements

To sum up:

  1. Headline: catch attention instantly
  2. Benefits: tease, e.g. with fascinating bullet points
  3. Call to action: expressly tell ppl what to do (e.g. sign up)
  4. Opt-in form: the way to sign up
  5. Social proof: (recommended)
    • Number of subscribers
    • Testimonials
    • Reviews
    • Media mentions
    • ...

Analytics, Metrics

SEO (Search Engine Optimization)

  • Resource: the Moz SEO guide is highly popular and useful for laypeople
  • Social Media rankings (likes, retweets etc.) influence search results
  • Pack my articles with keywords to generate traffic
    • Search engines need to understand the text (clearly readable, not metaphors or such)
    • Don't sacrifice human readability and flow in favour of it, though
  • Apart from that: create quality content that people will enjoy and share!
  • Consequently: please both search spiders and people

OpenGraph for Social Media

Copyblogger's Approach: "OC/DC"

  • Actual point of "SEO" is "optimizing content for discovery and conversion"
  • We optimize sites for traffic not just from Google, but all kinds of sources (social media, blogs...)
  • 2 areas of focus: external and on-site optimization
    • External: improving traffic generated to site (social media, blogs, search engines, aggregators: Slideshare, syndication: Business Insider)
    • On-Site: engage and keep visitors. Load times, useful content, responsiveness, ease of conversion

How to do this:

  1. Improve Content Symmetry: re-edit existing content
    • Re-write headlines (e-book for this!)
    • Review links: from most-read old articles to best new articles. Generally: lots of internal links to keep users around
    • Improve calls to action
    • New content from old successful numbered list posts: break down into invididual posts
    • Revamp keywords
  2. Mobile responsiveness: requirement
  3. Optimize load times: e.g. WebPageTest as testing tool
  4. Author attribution methods: look into this
  5. Repurpose existing content: using so-called "rel=canonical" tag - look into this
  6. Create my own research report: e.g. SurveyMonkey, Google (look into this)

Google Analytics


Guide for Web Developers

  • Choose a base color
    • Everything stems from this color
    • Try color modules in Dribble, Designspiration
    • Ex.: use client's existing color
    • Don't use competitors' colors
    • Consider target audience
    • Avoid stereotypes
    • Play word game, then look up symbolism
  • Create palette from base color
    • 3 neutral colors: white, dark grey, light grey (optional)
    • Plus base color (established)
    • Plus accent color
    • Accent is only used rarely to stand out
    • Finding accent: e.g. Paletton
      • "Add complementary" button
      • Other controls on Paletton
  • Create greys!
    • Dark grey: for text
    • Light grey: for differentiation from white
    • Grab a basic desaturated grey
    • Mix in base color (e.g. by adding 5% opaque layer)

See Design Resources above to find color schemes etc.

Fonts, Type, Text Styling

  • How to choose fonts for design (Apr 11, 2017)
    • What is the purpose and medium of your design? Harmonize your type with it.
    • Identify your audience: age, interest, culture
    • Kids: highly legible fonts with generous letter shapes
    • Seniors: readable sizes, high contrasting colors, avoid scripts & decorative styles
    • Look for inspiration (see resources above!)
    • Keep criteria in mind: readability, legibility, purpose
    • Use Modular Scale to determine font sizes
  • List of web-safe fonts (common to Mac and Windows)
  • Inspiration for text input effects!
  • Fonts / typeface: serif, sans? Both?
    • Serif: classic, timeless, established. Long paragraphs
    • Sans Serif: cutting-edge, modern
    • Both: compare letters a, g, e
    • Custom typefaces are possible
    • Use 2-3 fonts, tops
    • More on fonts on Bourn Creative!
  • Copyblogger about fonts and text:
    • Should be black on white background
    • Use large font size
    • Typeface: prioritize readibility
    • One font for headers, one for text
    • Links should be underlined
    • Short paragraphs
    • Columns: 450-550 pixels, not more