Branding & Website Design. Mark Raymond Luminys, Inc mraymond@luminys.com

Transcription

1 Branding & Website Design Mark Raymond Luminys, Inc

2 Designing a Website Requires a Lot of Skills 2

3 What do you do? Who is your audience? Product or Service Place relative to the market Price & ROI how much do you have to sell to be successful? Your website must visually queue people what your company stands for, who should choose you, and block and parry your competition 3

4 What adjectives best describe you? reliable precise open tasty efficient convenient cheap fast elite caring secure responsive glamorous healthy fun courteous value low cost premium Are your adjectives expressed in your logo? 4

5 What color represents your business? primary cool/techno warm-baby cool-baby health/tasty natural performance (or anger) 5

6 What shape reflects your business? Terrestrial Serious Celestial Playful Apple, Microsoft, Google? Range Rover, Ford, Chevy, Toyota? 6

7 What font represents your business? Traditional HTML Fonts: Arial/Helvetica Verdana Times New Roman Georgia Now is the time for all good men Now is the time for all good men Now is the time for all good men Now is the time for all good men ASans-serif Google Fonts: ASerif Fonts are used for logo, navigation, headers, text, images. Be consistent, strive for readability. 7

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? 8

9 The power of the individual 9

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

11 Two images at once + = Can you put your visitor in the driver s seat? Credit: 11

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

13 Nonprofit Business Cognitive Science and Pleasure vs. Pain 13

14 Using Sliders Show benefits Tell a story 14

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 ) 15

16 The Process Wireframe Layout Theme Selection Images & Copy Populate Content 16

17 Sample Wireframe Top Menu Patient Login Locations Main Menu Services Join our Team Donate Events About Medical Volunteer Past Events Locations Dental Offsite Ops Leadership Women s Health Career Ops Board Children s Svs FAQs Case Mgmt In the news Footer Disclaimer Location 1 Location 2 Location 3 17

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) 18

19 Choosing a Wordpress Theme Tip: Themeforest.net is great repository 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 buy Android, ios, IE, Chrome, Firefox, Safari 19

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 engine title, 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 are designed to gobble up content meta: something about something 20

21 SEO Search Engine Optimization Page Title Domain/URL Logo Slider H1 P1 Images Links 21

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 SEO techniques 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 times a keyword appears on a page (5% 8%) SEO is done on a page-by-page basis Choose one keyword or phrase. Yoast SEO Plugin for Wordpress helps you enforce rules and tell you how you re doing 22

23 Quick and Dirty Google Page Rank Enable PageRank in Privacy Option Page Rank (4/10) 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. 23

24 ❶ Own your account! ❷ Register with an alias because employees come and go ❸ Configure Google Analytics to send weekly s 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 24

25 huh? 25

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) 26

27 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 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 27

28 Pre-Implementation Checklist Logo Stock imagery (lightbox) Wireframe Social media images Copy (text) Staff & board head shots Wordpress Template Slider dimensions Slider story, images & text Key messages Blog? Three articles 28

29 Online Demo ❶ ❷ ❸ Dashboard Media Library Pages ❹ ❺ ❻ ❼ Posts Themes Widgets ❽ ❾ Menus SEO Plugins 29

30 Questions? ark Ramond Mark Raymond 30