18
#learnsleek April 3, 2015 IS YOUR WEBSITE UP TO SPEED? May 15, 2015

Website Redesign Tips and Tricks

Embed Size (px)

Citation preview

Page 1: Website Redesign Tips and Tricks

#learnsleek

April 3, 2015

IS YOUR WEBSITE UP TO SPEED?

May 15, 2015

Page 2: Website Redesign Tips and Tricks

#learnsleek

Who Is This Guy?

Graphic Designer

• Owner, Metropolis Creative — 16 years in business

• Graduate of RIT with a BFA in Graphic Design

• Teach at Northeastern University

• Have 3 kids — ages 11, 15, and 21

• Brew beer and play hockey

Michael Flint

Page 3: Website Redesign Tips and Tricks

#learnsleek

Today’s TopicsBranding and Messaging Who you are, identify targets, define messaging

1

Site Architecture Organizing your content and navigation

2

Design Goals and Trends Visual hierarchy, readability, responsive

3

Development (Coding & CMS) Page load time, site updates

4

S.E.O. and Social Media Both go hand-in-hand

5

Working With Your Web Designer Tips for success!

6

Getting Started

Page 4: Website Redesign Tips and Tricks

#learnsleek

Web Design is a Process

Creative Process

DISCOVERY CREATIVE TECHNICAL REVIEW

Follow the Process in Order!

Page 5: Website Redesign Tips and Tricks

#learnsleek

1. Discovery & BrandingWhat is a Brand? All marketing materials work together.

• Emails

• Social channels

• Printed materials

• Your staff

• Your office

Discovery

Page 6: Website Redesign Tips and Tricks

#learnsleek

Define Your BrandAsking the Right Questions Let’s take a closer look.

• Brand rediscovery/definition

• Look at competitors

• What is your Unique Value Proposition (UVP)?

• Define target audience(s) and prioritize them

• Define your goals

• Define your calls-to-action (CTAs ) clearly

• Define your messaging for each audience

• Lastly – what do you like visually?

Discovery

YOURBRAND

IDENTIT

Y

P

ERC

EPTIO

N

VALUE

UNIQUE VALUE PROP

NAME LOG

O

MESSA

GE

PA

ST

PR

ESEN

T FUTURE

Page 7: Website Redesign Tips and Tricks

#learnsleek

Content and HierarchyArchitecture & Sitemap The core foundation of the website.

• Wireframe defines content and hierarchy

• Sitemap defines architecture and navigation

Discovery

Page 8: Website Redesign Tips and Tricks

#learnsleek

2. DesignEstablish the Visual Tone Determine user interface.

• Set the brand

• Clean design

• Clear messaging

• Clear calls-to-action

• Great photography

• Use color intentionally

• Responsive for mobile and tablets

Design

Page 9: Website Redesign Tips and Tricks

#learnsleek

Good Design Just Works

Design

Alpine Bearing

Motormart Garage

McGarry & Sons

CHEN PR

Page 10: Website Redesign Tips and Tricks

#learnsleek

Design TrendsNot Determine user interface.

• Social media feeds for the sake of having social media on your site

• A gazillion social media chicklets

• The search tool

• Flash

• Black hat SEO

Design

Hot Determine user interface.

• Mobile / Responsive

• True Responsive Design

• Full screen content (text, images, video)

• Functional animation

• Keep it simple

• Mobile navigation

• Smarter sites (cookies, data, dynamic, taxonomy)

• Helpful, relevant content

Page 11: Website Redesign Tips and Tricks

#learnsleek

BrandingFull Screen Design

Page 12: Website Redesign Tips and Tricks

#learnsleek

BrandingResponsive Design

Page 13: Website Redesign Tips and Tricks

#learnsleek

3. DevelopmentThe Website Build-Out Making the website usable.

• Involve the dev team from day one

• Lead with the concept, not the solution

• Discovery: include time to determine the best approach early

• CMS / platforms to consider

• Hosting: which host is right for you (and your developer)?

• Other tools / plugins: why reinvent the wheel?

• Responsive / mobile

• Prototypes and staging

• Content entry: who and how?

• Testing, and launch

Development

Page 14: Website Redesign Tips and Tricks

#learnsleek

Social MediaInbound Marketing Communicating with your customers.

• See my content: direct link to channels

• Subscribe to my channel: like, follow, subscribe

• Engage with me: retweet, comment

• Twitter, Facebook, and more

• Blogs, RSS, commenting

• Other social tools: Pinterest, Google Maps, Yelp, Instagram

Development

SEO & Social

Page 15: Website Redesign Tips and Tricks

#learnsleek

Search Engine Optimization (S.E.O.)What does Google Want? Google wants what YOU want.

Keywords are key phrases. Use them in context, consistently, and repetitively.

Development

• Domain name

• File names

• Page titles

• Headers

• Page content (and alt-tags)

• Meta description

• Links (In & Out) with keywords

Write for humans first, then insert keywords.

Page 16: Website Redesign Tips and Tricks

#learnsleek

4. Review

Review

Test, Refine and Repeat How is your website working for you?

• How are you driving traffic?

• Google analytics

• Conversions

• Site maintenance

• Landing pages

• Co-branded marketing

• Social / inbound campaigns

Page 17: Website Redesign Tips and Tricks

#learnsleek

Tips For SuccessWebsite Design Experience Have you gone through a website design before? How was that experience? What worked and didn’t?

Branding You and your designer need to understand your brand, marketing goals, and website goals.

Communication Single point of contact. What works well for you?Frequency of meetings. Project Management

Working With a Designer

Decisions Who makes the decisions? What is your process? Timeframes for decisions?

Changes in Scope How did you handle these? Phase in later or add to the project scope? What can incur additional costs? (Rounds of changes, new functionality, illustrations and other content…)

Budget & Billing Staying on budget. Change orders. Who should invoices go to?

Technology/IT CMS. Point of contact? Hosting? Access to servers? Email? CRMs, Any additional APIs or technology considerations?

Content Who is creating content? (Copy, product photos, staff photos, video, animation, technical documents.)

Scheduling/Timing Due dates, milestones. Is there a reason to go live on a certain date?

$

Page 18: Website Redesign Tips and Tricks

#learnsleek

THANK YOU!