• Like

Best Practices of Web Site Design

  • 1,896 views
Uploaded on

The Starmark's presentation "Best Practices In Web Design" can help your business understand the best ways to prepare, design and deploy your next website. There's a vast array of complexities in …

The Starmark's presentation "Best Practices In Web Design" can help your business understand the best ways to prepare, design and deploy your next website. There's a vast array of complexities in today's modern website design. Think of this program as an foundational framework that your business must have in place as it prepares the next generation of its online marketing. Your website is THE hub of your social graph and the key directive to all your integrated messaging.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,896
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
42
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. StarmarkBrandingAdvertisingInteractivePublic RelationsDirect Response
  • 2. WelcomeSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 3. Starmark: 30 Years of Excellence Company Founded on Integrated Marketing Interactive, Social & New Technology Return On Investment Focused Top-10 Diversity Owned Company in Florida Nationwide Recruitment Fort Lauderdale Recognized Top South Florida CEOSTARMARK.COM954 874-9000TXT “ETIP” to 247565 Celebration@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 4. Starmark: eTips • Based on Current Trends • Weekly eTip Newsletters • Co-Authored In-house By Experts Within Discipline • Industry Benchmarks • Ongoing App, Web & Media TestingSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 5. Best Practices Of Website DesignSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 6. What We Cover Today • Website Goals • Voice & Demographic • Competitive Assessment • Fonts, Colors & Sizes • Informational Architecture • Content Directive & SEO • Technology Usage • Social Integration • Modularity & Phasing • Search & Site-map Footers • Layout Scenarios • Mobile/Tablet Ready • Navigational Styles • Testing & Design Optimization • Wire-framing & Prototyping • Ongoing Content Development • Viewable Area & Content PrioritizationSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 7. Ten-step Process For Success COMPETITIVE INFORMATION DESIGN UNDERSTANDING CREATIVE REVIEW ARCHITECTURE ROLLOUTSTARMARK.COM TEMPLATE QUALITY DEPLOYMENT &954 874-9000 CONTENT PROGRAMMING PRODUCTION ASSURANCE TRACKINGTXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 8. What Are The Goals Of Your Website? Sales • AwarenessSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 9. What Are The Goals Of Your Website? • Sales • AwarenessSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 10. Competitive Assessment • 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?STARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 11. Information Architecture • Get MetaSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 12. Information ArchitectureSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 13. Technology Usage • Adobe Flash/HTML5 • Social Tools/Video • Dynamically Generated • Applications (Apps) • Content Management SystemsSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 14. Modularity & Phasing Resources Case Studies Brochures Launch White Papers Event Calendar Videos Phase 2 Media Gallery AssociationsSTARMARK.COM Recent News954 874-9000TXT “ETIP” to 247565 Industry News Phase 3@STARMARKINTL Twitter Feed/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 15. Content Layout ScenariosSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 16. Navigation Styles • Top “Horizontal” Navigation • Sub Navigation • Left/Right Hand Side • Drop Down Navigation • Exposed • Cluster Navigation • Transitional • Grid Navigation • PanoramicSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 17. AdvertisingSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL http://www.iab.net/iab_products_and_industry_services/508676/508767/Ad_Unit
  • 18. Wire-framing & Prototyping • Home Page • Sub Pages • “Process Pages” - Registration & eCommerce • Resource & Documentation Pages • Profile Pages • Admin PagesSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 19. Call To Action Drivers • Mobile/Tablet • Registration • Email/Newsletters • Events/CalendarsSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 20. Wire-framing & Prototyping Home Page Process Pages Resource Profile Pages Admin PagesSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 21. Wire-framing & Prototyping 960 px NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION | NAVIGATION | 600 px | 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 Rudus veniam. Bene tation praesent Rudus veniam. Bene tation praesent velit suscipit reprobo exputo regula luptatum, vero cogo acsi. velit suscipit reprobo exputo regula reprobo exputo regula luptatum, vero cogo acsi. NEWS Ulciscor feugiat zelus patria metuo vel dignissim te luptatum, vero cogo acsi. Ulciscor Ulciscor feugiat zelus patria metuo vel dignissim te sudo sudo olim.Opes, jugis esse nulla euismod aliquip feugiat zelus patria metuo vel dignissim olim. oppeto luptatum ad saluto demoveo ut quae te sudo olim.Opes, jugis esse nulla Opes, jugis esse nulla euismod aliquip oppeto luptatum magna. euismod aliquip oppeto luptatum ad ad saluto demoveo ut quae magna. saluto demoveo ut quae magna. Magna, Magna, paulatim vero iaceo aliquip vero validus, paulatim vero iaceo aliquip vero validus, Magna, paulatim vero iaceo aliquip vero validus, vel. vel. Tum, aliquip mos nisl in reprobo quae ad abluo vel. Tum, aliquip mos nisl in reprobo Tum, aliquip mos nisl in reprobo quae ad abluo nullus nullus conventio defui, quidem capto tation. quae ad abluo nullus conventio defui, co Validus illum eum ille quae accumsan facilisis neo, quidem capto tation. Validus illum eum adipiscing melior pecus neque premo tego eros. ille quae accumsan facilisis neo, nventio defui, quidem capto tation. Validus illum eum ille adipiscing melior pecus neque premo quae accumsan facilisis neo, adipiscing melior pecus Occuro quis dignissim sudo singularis oppeto nisl tego eros. neque premo tego eros. similis suscipit proprius ymo causa virtus.Molior Occuro quis dignissim sudo singularis oppeto nisl similis consectetuer, roto abico duis erat macto iusto Occuro quis dignissim sudo singularis suscipit proprius ymo causa virtus.Molio quidem feugait blandit, fere lobortis. Feugiat |STARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 22. Viewable Area & Content Prioritization
  • 23. Viewable Area & Content Prioritization Premiere Secondary Third TierSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 24. Voice & DemographicSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 25. Fonts, Colors & Sizes • Voice & Volume • Emotional extension of the contentSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 26. Content Directive & SEO • Allow user to skim information • Let user digest content in tiers • Allow for sharing • Always link to more internally (dwell time) Call To Action Begin The StorySTARMARK.COM954 874-9000 Invite Them InTXT “ETIP” to 247565 Create Searchability@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 27. Content Directive & SEO • What’s a graphic (Alt. tagging) • What’s ASCII (raw text) • If it’s a linkSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 28. 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 & launchesSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 29. Social IntegrationSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 30. Social IntegrationSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 31. Repurpose Media • Where else can it go?STARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 32. Search & Site-map Footers • Search is not simply a tool, it speaks to results of an action • Make dead space (such as footers) effective toolsSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 33. Search & Site-map Footers• Search is not simply a tool, it speaks to results of an action• Make dead space (such as footers) effective tools
  • 34. Mobile/Tablet Ready • Not all designs work on mobile and tablet architecture • Tablets: Design in both horizontal and vertical executions for contentSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 35. Testing & Design Optimization • 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-outSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 36. Testing & Design Optimization
  • 37. Ongoing Content Development • Optimize to design and content that converts most effectively • Create a content schedule and content SOP • Consistent designs across social graph • Design to content topicsSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 38. Questions: • Website Goals • Voice & Demographic • Competitive Assessment • Fonts, Colors & Sizes • Informational Architecture • Content Directive & SEO • Technology Usage • Social Integration • Modularity & Phasing • Search & Site-map Footers • Layout Scenarios • Mobile/Tablet Ready • Navigational Styles • Testing & Design Optimization • Wire-framing & Prototyping • Ongoing Content Development • Viewable Area & Content PrioritizationSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL
  • 39. Thank You For 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: justicemitchellSTARMARK.COM954 874-9000TXT “ETIP” to 247565@STARMARKINTL/STARMARKINTL/STARMARKINTL© STARMARK INTL