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."
- Google Webmaster Tools: crucial for SEO (getting started + geotargeting)
- Keeping your WordPress safe (article by Carl Alexander, March 1, 2015)
- Unicode / UTF8 character reference on W3Schools
- Introduction and advice for color psychology
- Font curators
- Font inspiration
- 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
Learn Design / Advice
- 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
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
- Decide which grid layout you want
- 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
- Low-quality visuals
- No reviews/testimonials
- Badly chosen colors
- Outdated information
- Hard to find (SEO)
- Not mobile-friendly
- Contact info hard to find
- Not focused on user
- Requires sign-ups
- Auto-playing audio/video
- Painfully slow
User's First Impression
- 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
- How does the site look on different devices?
- 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
- 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)
- 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
- 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
- Use White Space
- See examples in article
- 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
- 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
- Use nice fonts
- Examples in the article
- Steal. Cherry-pick.
- 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
- 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
- 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
- Main navigation menu
- Search box
- Social networking links
- Primary image (whatever image was at the top of the repeating header or page)
- Written content
- Website footer
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
- Book a consultation
- Join the community
- 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.
To sum up:
- Headline: catch attention instantly
- Benefits: tease, e.g. with fascinating bullet points
- Call to action: expressly tell ppl what to do (e.g. sign up)
- Opt-in form: the way to sign up
- Social proof: (recommended)
- Number of subscribers
- Media mentions
- 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
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:
- 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
- Mobile responsiveness: requirement
- Optimize load times: e.g. WebPageTest as testing tool
- Author attribution methods: look into this
- Repurpose existing content: using so-called "rel=canonical" tag - look into this
- Create my own research report: e.g. SurveyMonkey, Google (look into this)
- 9 ways to leverage Google Analytics (Kristi Hines on Social Media Examiner, Jan 8, 2015)
- 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.
- Understand color psychology (intro and reference here)
- 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