Best Practices of Web Site Design
Transcript of Best Practices of Web Site Design
![Page 1: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/1.jpg)
Starmark
Branding
AdvertisingInteractive
Public RelationsDirect Response
![Page 2: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/2.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Welcome
![Page 3: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/3.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Company Founded on Integrated Marketing
Interactive, Social & New Technology
Return On Investment Focused
Top-10 Diversity Owned Company in Florida
Nationwide Recruitment
Recognized Top South Florida CEO
Starmark: 30 Years of Excellence
Fort Lauderdale
Celebration
![Page 4: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/4.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Starmark: eTips
• Based on Current Trends• Weekly eTip Newsletters
• Co-Authored In-house By Experts Within Discipline
• Industry Benchmarks
• Ongoing App, Web & Media Testing
![Page 5: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/5.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Best Practices Of Website Design
![Page 6: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/6.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
• Website Goals • Competitive Assessment• Informational Architecture• Technology Usage• Modularity & Phasing• Layout Scenarios• Navigational Styles• Wire-framing & Prototyping• Viewable Area & Content
Prioritization
• Voice & Demographic• Fonts, Colors & Sizes• Content Directive & SEO• Social Integration• Search & Site-map Footers• Mobile/Tablet Ready• Testing & Design Optimization• Ongoing Content Development
What We Cover Today
![Page 7: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/7.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Ten-step Process For Success
COMPETITIVEREVIEW
INFORMATIONARCHITECTUREUNDERSTANDING DESIGN
ROLLOUT
TEMPLATEPRODUCTION
CREATIVE
PROGRAMMING QUALITYASSURANCE
DEPLOYMENT &TRACKINGCONTENT
![Page 8: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/8.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Sales
• Awareness
What Are The Goals Of Your Website?
![Page 9: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/9.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
• Sales
• Awareness
What Are The Goals Of Your Website?
![Page 10: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/10.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
• What is your competitor doing right?• What are they doing wrong?• What key differentiators make them unique with your landscape?• How well are they covering social media?• Are the mobile? Are they on the ground?
Competitive Assessment
![Page 11: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/11.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Information Architecture• Get Meta
![Page 12: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/12.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Information Architecture
![Page 13: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/13.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
• Adobe Flash/HTML5• Social Tools/Video• Dynamically Generated• Applications (Apps)• Content Management Systems
Technology Usage
![Page 14: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/14.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Modularity & Phasing
Resources
Case Studies
Brochures
White Papers
Event Calendar
Videos
Media Gallery
Associations
Industry News
Recent News
Twitter Feed
Launch
Phase 2
Phase 3
![Page 15: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/15.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Content Layout Scenarios
![Page 16: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/16.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
• Top “Horizontal” Navigation• Left/Right Hand Side
Navigation• Cluster Navigation• Grid Navigation• Panoramic
• Sub Navigation• Drop Down• Exposed• Transitional
Navigation Styles
![Page 17: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/17.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Advertising
http://www.iab.net/iab_products_and_industry_services/508676/508767/Ad_Unit
![Page 18: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/18.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
• Home Page• Sub Pages• “Process Pages” - Registration & eCommerce• Resource & Documentation Pages• Profile Pages• Admin Pages
Wire-framing & Prototyping
![Page 19: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/19.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
• Mobile/Tablet• Registration• Email/Newsletters• Events/Calendars
Call To Action Drivers
![Page 20: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/20.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Wire-framing & Prototyping
Home PageProcess PagesResourceProfile PagesAdmin Pages
![Page 21: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/21.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Wire-framing & Prototyping
NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION |
Rudus veniam. Bene tation praesent velit suscipit reprobo exputo regula luptatum, vero cogo acsi. Ulciscor feugiat zelus patria metuo vel dignissim te sudo olim.Opes, jugis esse nulla euismod aliquip oppeto luptatum ad saluto demoveo ut quae magna. Magna, paulatim vero iaceo aliquip vero validus, vel. Tum, aliquip mos nisl in reprobo quae ad abluo nullus conventio defui, quidem capto tation. Validus illum eum ille quae accumsan facilisis neo, adipiscing melior pecus neque premo tego eros.
Occuro quis dignissim sudo singularis oppeto nisl similis suscipit proprius ymo causa virtus.Molior consectetuer, roto abico duis erat macto iusto quidem feugait blandit, fere lobortis. Feugiat paulatim jugis sino ibidem diam, molior, praemitto feugiat nulla ad quae neo volutpat antehabeo. Persto hendrerit iriure torqueo autem nostrud saepius ea iusto euismod ut. Validus te premo jus lucidus consequat tation ex.
Rerat macto iusto quidem feugait blandit, fere lobortis. Feugiat paulatim jugis sino ibidem diam, molior, praemitto feugiat nulla ad quae neo volutpat antehabeo. Persto hendrerit iriure torqueo autem nostrud saepius ea iusto euismod ut. Validus te premo jus lucidus
MORE «
|
Rudus veniam. Bene tation praesent velit suscipit reprobo exputo regula luptatum, vero cogo acsi. Ulciscor feugiat zelus patria metuo vel dignissim te sudo olim.
Opes, jugis esse nulla euismod aliquip oppeto luptatum ad saluto demoveo ut quae magna.
Magna, paulatim vero iaceo aliquip vero validus, vel. Tum, aliquip mos nisl in reprobo quae ad abluo nullus co
nventio defui, quidem capto tation. Validus illum eum ille quae accumsan facilisis neo, adipiscing melior pecus neque premo tego eros.
Occuro quis dignissim sudo singularis oppeto nisl similis suscipit proprius ymo causa virtus.Molio
Rudus veniam. Bene tation praesent velit suscipit reprobo exputo regula luptatum, vero cogo acsi. Ulciscor feugiat zelus patria metuo vel dignissim te sudo olim.Opes, jugis esse nulla euismod aliquip oppeto luptatum ad saluto demoveo ut quae magna.
Magna, paulatim vero iaceo aliquip vero validus, vel. Tum, aliquip mos nisl in reprobo quae ad abluo nullus conventio defui, quidem capto tation. Validus illum eum ille quae accumsan facilisis neo, adipiscing melior pecus neque premo tego eros.
Occuro quis dignissim sudo singularis oppeto nisl similis suscipit proprius ymo causa virtus.Molior consectetuer, roto abico duis erat macto iusto quidem feugait blandit, fere lobortis. Feugiat
Rudus veniam. Bene tation praesent velit suscipit reprobo exputo regula luptatum, vero cogo acsi. Ulciscor feugiat zelus patria metuo vel dignissim te sudo olim.Opes, jugis esse nulla euismod aliquip oppeto luptatum ad saluto demoveo ut quae magna. Magna, paulatim vero iaceo aliquip vero validus, vel. Tum, aliquip mos nisl in reprobo quae ad abluo nullus conventio defui, quidem capto tation. Validus illum eum ille quae accumsan facilisis neo, adipiscing melior pecus neque premo tego eros.
Occuro quis dignissim sudo singularis
NEWS
|
960 px
600 px
![Page 22: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/22.jpg)
Viewable Area & Content Prioritization
![Page 23: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/23.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Viewable Area & Content PrioritizationViewable Area & Content Prioritization
Pre
mie
reS
econ
dary
Third
Tie
r
![Page 24: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/24.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Voice & Demographic
![Page 25: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/25.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
• Voice & Volume• Emotional extension of the content
Fonts, Colors & Sizes
![Page 26: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/26.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
• Allow user to skim information• Let user digest content in tiers• Allow for sharing• Always link to more internally (dwell time)
Content Directive & SEO
Call To Action
Begin The Story
Invite Them InCreate Searchability
![Page 27: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/27.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
• What’s a graphic (Alt. tagging)• What’s ASCII (raw text)• If it’s a link
Content Directive & SEO
![Page 28: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/28.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Social Integration
• Increase the ability to pollenate your content to where your users spend their free time
• Broaden/strengthen your own “social graph”• Make yourself “social ready” for PR firms and press opportunities• Tell people where/who you are: events, seminars & launches
![Page 29: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/29.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Social Integration
![Page 30: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/30.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Social Integration
![Page 31: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/31.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Repurpose Media
• Where else can it go?
![Page 32: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/32.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
• Search is not simply a tool, it speaks to results of an action• Make dead space (such as footers) effective tools
Search & Site-map Footers
![Page 33: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/33.jpg)
• Search is not simply a tool, it speaks to results of an action• Make dead space (such as footers) effective tools
Search & Site-map Footers
![Page 34: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/34.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
• Not all designs work on mobile and tablet architecture• Tablets: Design in both horizontal and vertical executions for content
Mobile/Tablet Ready
![Page 35: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/35.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
• Create an internal “Alpha” group• Ease of use• What “feels” most important• If it feels like a link is it?• Intuition• Would you return?
• External “Beta” group• Public roll-out
Testing & Design Optimization
![Page 36: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/36.jpg)
Testing & Design Optimization
![Page 37: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/37.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
• Optimize to design and content that converts most effectively• Create a content schedule and content SOP• Consistent designs across social graph• Design to content topics
Ongoing Content Development
![Page 38: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/38.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
• Website Goals • Competitive Assessment• Informational Architecture• Technology Usage• Modularity & Phasing• Layout Scenarios• Navigational Styles• Wire-framing & Prototyping• Viewable Area & Content
Prioritization
• Voice & Demographic• Fonts, Colors & Sizes• Content Directive & SEO• Social Integration• Search & Site-map Footers• Mobile/Tablet Ready• Testing & Design Optimization• Ongoing Content Development
Questions:
![Page 39: Best Practices of Web Site Design](https://reader033.fdocuments.in/reader033/viewer/2022042821/55d52b5fbb61ebf1498b46e9/html5/thumbnails/39.jpg)
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
Thank YouFor More See Us At: Starmark.com
Text “ETIP” to 24-7-365 to get our weekly eTip via SMS
Your Presenter:Justice Mitchell - VP, Interactive Creative Director - Social Media Head
• Twitter: @justicemitchell
• http://www.linkedin.com/in/justicemitchell
• facebook.com/justicewmitchell
• AIM: justicemitchell