1

Branding & Website Design

Mark RaymondLuminys, Inc. 949-654-3890mraymond@luminys.comwww.luminys.com

2

Designing a WebsiteRequires a Lot of Skills

3

What do you do? Who is your audience?

Product orService

Price & ROIhow much do youhave to sell to be

successful?

Placerelative tothe market

Your website must visually queue people what your company stands for, who should choose you,

and block and parry your competition

4

What adjectives best describe you?

efficientcaring

courteous

precise open

low costvalue premium

elitefast

healthy

convenient

glamorous

cheapreliable tasty

funresponsivesecure

Are your adjectives expressed in your logo?

5

What color represents your business?

primary cool/techno warm-baby cool-baby

performance (or anger)naturalhealth/tasty

6

What shape reflects your business?

Terrestrial Celestial

Apple, Microsoft, Google?

Serious Playful…

Range Rover, Ford, Chevy, Toyota?

7

What font represents your business?

ASerif

ASans-serif

Now is the time for all good men…Arial/Helvetica

Now is the time for all good men…Verdana

Now is the time for all good men…Times New Roman

Now is the time for all good men…Georgia

Fonts are used for logo, navigation, headers, text,

images. Be consistent, strive for readability.

Google Fonts:

Traditional HTML Fonts:

8

Should you use people photos?

• Should they be looking at you?

• Are they too stock-looking?

• Are they the right age?

• Can you make a real photo work?

9

The power of the individual

10

Stickouts

People Objects

Top, bottom, left, right, and you can use more than one depending on your layout goal.

11

Two images at once

Credit: http://www.peachpit.com/articles/article.aspx?p=1663696&seqNum=4

+ =Can you put your visitor in the driver’s seat?

12

Effects

Use image effects wisely. They should guide the visitors eye, improve legibility, or improve page aesthetics by softening/hardening the layout.

13

Cognitive Science and Pleasure vs. PainB

usi

nes

sN

on

pro

fit

14

Using Sliders

Tell a storyShow benefits

15

Sliders

• A clever way to present multiple messages “above the fold”

• Choose your dimensions

– Full screen, 100% width, etc.

– Web pages scroll vertically, so images are landscape, which will impact your photography

– Sliders can be dropped on any page

• Different uses:

– Tell a story

– Sell through testimonials that solve a problem

– Call to action

– Reinforce your brand by showing your organization’s values(ethnicities, children/elderly, nature, health, sports, vets…)

16

The Process

Wireframe LayoutTheme

Selection

Images &Copy

PopulateContent

17

Sample Wireframe

Services Join our Team Donate Events About

Locations

Leadership

Board

FAQs

Patient Login Locations

Top Menu

Main Menu

Footer

In the news

Past EventsVolunteer

Offsite Ops…

Career Ops…

Medical

Dental

Women’s Health

Children’s Svs

Case Mgmt

Disclaimer Location 1 Location 2 Location 3

……

18

Layout

• Logo placement

• Social media icons(banner, footer, sidebar)

• Primary navigation (to the right or below logo)

• Contact information

• Home page slider(full screen, full width, etc)

• Sidebars(home, landing page, tier-2 pages)

19

Choosing a Wordpress Theme

• Lots of theme providers

• Average cost around $55 - $65

• Most theme houses are overseas

• theme

•auto-adjusts depending on orientation & resolution

• High-resolution/retina-ready

• Check the message boards

• Test before you buyAndroid, iOS, IE, Chrome, Firefox, Safari

Tip: Themeforest.net is great repository

20

Incorporate Search Engine Optimization

• Search engines digest one page at a time

• Inbound links are like third-party endorsements

• Outbound links say who you associate with

• Meta tags instruct the search enginetitle, description, keywords

• Think through headers, paragraphs, image titles, and navigation

• Over-describe in your text

– Links: “learn more” vs. “learn more about SEO marketing”

Search engines aredesigned to gobble

up content

meta: “something about something”

21

SEO – Search Engine Optimization

Page Title

Domain/URL

Slider

Logo

H1

P1

Images

Links

22

SEO – Pick your keyword or phrase

<h1>SEO is very important</h1>

<h2>Really, SEO is very important</h1>

<h3>Learn about SEO today!</h3>

<h4>SEO experts are paid lots of money</h4>

<p>SEO is a valuable skill. There are many SEOtechniques you can employ.</p>

<a href=‘/seo-techniques-to-increase-rankings/’><img src=‘/seo-tips-and-tricks.jpg’

title=‘SEO Makes a Difference’/></a>

Keyword density:The percentage of timesa keyword appears on a page (5% – 8%)

SEO is done on a page-by-page basis

Choose one keywordor phrase.

Yoast SEO Plugin for Wordpress helpsyou enforce rules andtell you how you’re doing

23

Quick and Dirty – Google Page Rank

Page Rank (4/10)

Enable PageRank in Privacy Option

Page Rank returns a number on a logarithmic scale between 0 and 10 that gives you an idea of the relevance of a page.

Don’t have IE? Just Google “google page rank” and look for sites that will give you the number.

24

❶ Own your account!

❷ Register with an alias (google@luminys.com) because employees come and go

❸ Configure Google Analytics to send weekly emails to a secondary alias (e.g., reports@luminys.com)

❹ Forward that secondary alias to key board and staff

reports@luminys.com meraymond@cox.net jack@luminys.com david@luminys.com

Go hand-in-hand with SEO

25

huh?

26

A comment on plugins

• Plugins can cause things to go wrong

• Choose highly-rated, well-supported plugins look for thousands, if not hundreds of thousands, of downloads

• What’s cool becomes passé very quickly

• Excellent plugins: WordPress SEO by Yoast (free), Akismet (free), Gallery Plugin (free), Gravity Forms (paid)

27

• Avoid pure colors

• Don’t overuse effects (e.g., shadow & glow)

• Black and white are special colors

• Make key pages visually interesting

• Consider image techniques like stick-outs and white backgrounds for images

Design Tips

• Be consistent

• Unify your look

• Start with your logo

• Choose a legible font

• Check on browsers and mobile devices

• Use a flexible home page layout

• Stay within your theme

28

Pre-Implementation Checklist

Logo

Wireframe

Copy (text)

Wordpress Template

Slider dimensions

Slider story, images & text

Stock imagery (lightbox)

Social media images

Staff & board head shots

Key messages

Blog? Three articles…

29

Online Demo

Dashboard Media Library Pages

Posts Themes Widgets

Menus SEO Plugins

❾

❶ ❷ ❸

❹ ❺ ❻

❼ ❽

30

Questions?ark RamondMark Raymond

mraymond@luminys.comwww.luminys.com