branding & website design - luminys...•logo placement •social media icons (banner, footer,...
TRANSCRIPT
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 ([email protected]) because employees come and go
❸ Configure Google Analytics to send weekly emails to a secondary alias (e.g., [email protected])
❹ Forward that secondary alias to key board and staff
[email protected] [email protected] [email protected] [email protected]
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
❾
❶ ❷ ❸
❹ ❺ ❻
❼ ❽
