Website Setup & Design

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.

Resources

 * Google Webmaster Tools: crucial for SEO (getting started + geotargeting)
 * Keeping your WordPress safe (article by Carl Alexander, March 1, 2015)

Design

 * Unicode / UTF8 character reference on W3Schools
 * Introduction and advice for color psychology
 * Font curators
 * Typewolf: 40 best Google Fonts
 * Beautiful Web Type: best Google Fonts
 * Font Pair: helping to pair Google Fonts
 * Typ.io: Google Fonts implementation examples
 * Font inspiration
 * 56 best free fonts for designers (Creative Bloq)
 * 100 greatest fonts (Awwwards)

Design Tools

 * Make seamless/tileable textures
 * Make/edit SVG icons: IconSVG
 * Make patterns: Patternify
 * Create CSS colors: ColorMe
 * Determine the right font sizes: Modular Scale
 * Color Scheme / Palette
 * Coolors to generate schemes/palettes
 * Adobe CC or Paletton to design one
 * ColourLovers for implementation examples
 * Dribbble for implementation examples

Learn Design / Advice
Erik D. Kennedy in his e-mail about a button:
 * Knowledge resource for CSS, HTML, JS and more: Know it all
 * Never use perfect black (#000000). Here's an article about why.
 * Copy: ideal line length is 50-60 characters
 * Try to have at least 300 words of content on each page
 * Disable scroll-scaling in Google Maps
 * 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

 * Decide which grid layout you want
 * Before doing anything else
 * Draw it on paper, for instance
 * Tranfici recommends these services:
 * Grid System 960
 * Gridr Buildrrr
 * Design by Grid
 * Make it look simple and familiar
 * e.g. blog should look like a blog


 * 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)
 * Refer to Bourn Creative's article series on colour meaning!

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?
 * Uncluttered tracking eyes down the page
 * 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)

Elements

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


 * Have a social log-in option

"The Power of 3"

 * Article on Psychotactics
 * The brain finds it easy to grasp threes: elements, colours, fonts - building blocks of visual communication!
 * Colours: look up colour symbolism to find the colours that fit your message
 * 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)
 * 2) * e.g. buttons, sliders
 * 3) * Inset elements:
 * 4) ** Text fields
 * 5) ** Pressed buttons
 * 6) ** Slider tracks
 * 7) ** Radio buttons (pressed)
 * 8) ** Check boxes
 * 9) * Outset elements:
 * 10) ** Radio buttons (unpressed)
 * 11) ** Unpressed buttons
 * 12) ** Slider buttons
 * 13) ** Dropdown buttons
 * 14) ** Maps
 * 15) ** Popups
 * 16) Design in Grayscale first! (example: Uber)
 * 17) * This makes it clean and simple
 * 18) * Add colours later: keep them relevant and don't overdo them
 * 19) ** e.g. grayscale + 1 or 2 colours
 * 20) ** or: grayscale + shades of the same color
 * 21) Use White Space
 * 22) * See examples in article
 * 23) Be smart about overlaying pictures with text
 * 24) * Avoid just writing on it unless you have good contrast
 * 25) * Overlay the entire image (transparent black layer)
 * 26) * Put the text in a box (add e.g. transparency, rounded corners)
 * 27) * Blur the image
 * 28) * Floor fade: gradient to black at bottom of image
 * 29) * Diffuse the text's background
 * 30) Emphasize text: pop up or down
 * 31) * Pop up: styles that make text more visible, e.g. bold, capitals...
 * 32) * Pop down: styles that make text less visible, e.g. small letters, low contrast...
 * 33) * Other factors: color, size
 * 34) * Balance these to highlight content or remove it from attention
 * 35) Use nice fonts
 * 36) * Examples in the article
 * 37) Steal. Cherry-pick.
 * 38) * Check out designers on Dribbble (examples in the article)
 * 39) * Flat UI Pinboard (Pinterest)
 * 40) * Pttrns
 * 41) Align everything (this is from a later newsletter!)
 * 42) * 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)

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)
 * 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)
 * 6) * Number of subscribers
 * 7) * Testimonials
 * 8) * Reviews
 * 9) * Media mentions

Analytics, Metrics

 * Ebook by Copyblogger: "Landing Pages: How to Turn Traffic into Money"
 * Includes a chapter about metrics and tracking of conversion rates
 * Also includes excellent advice on analytics

Colors
Guide for Web Developers See Design Resources above to find color schemes etc.
 * 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)
 * Understand color psychology (intro and reference here)
 * Also here: color symbolism / 12 colors and associated emotions
 * Pam Wilson on toning down colours and choosing the right ones
 * Never use black: it overpowers other colors. Saturate it!
 * Pick 2 colours that make sense to my market / support my message
 * Psychotactics recommends 3
 * Check what the market already uses

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

Design-Trends 2021 (Webinar, DE)
Source: youtube.com slash include bookswatch?v=5TgXBrj3W90
 * Das Cookie stirbe: Daten sammeln geht ab Mitte 2021 nur noch mit der Einwilligung des Users.
 * Aktueller Entwurf der EU Privacy Richtlinie: "berechtigtes Interesse" gibt es in Zukunft nicht mehr
 * Positioninerung gegen die Plattform: Service wird zum "One and only USP"
 * z.B. Online-Produktberatung über WhatsApp
 * 24-hour-Beratung durch Schweizer Tool "Guru": Ex-Kunden beraten Neukunden