Best Practices of Web Site Design3. 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 CEO
STARMARK.COM
954 874-9000
TXT “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 Testing
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
5. Best Practices Of Website Design
STARMARK.COM
954 874-9000
TXT “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
Prioritization
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
7. Ten-step Process For Success
COMPETITIVE INFORMATION DESIGN
UNDERSTANDING CREATIVE
REVIEW ARCHITECTURE ROLLOUT
STARMARK.COM
TEMPLATE QUALITY DEPLOYMENT &
954 874-9000 CONTENT PROGRAMMING
PRODUCTION ASSURANCE TRACKING
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
8. What Are The Goals Of Your Website?
Sales
• Awareness
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
9. What Are The Goals Of Your Website?
• Sales
• Awareness
STARMARK.COM
954 874-9000
TXT “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.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
11. Information Architecture
• Get Meta
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
13. Technology Usage
• Adobe Flash/HTML5
• Social Tools/Video
• Dynamically Generated
• Applications (Apps)
• Content Management Systems
STARMARK.COM
954 874-9000
TXT “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
Associations
STARMARK.COM Recent News
954 874-9000
TXT “ETIP” to 247565
Industry News Phase 3
@STARMARKINTL Twitter Feed
/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
• Panoramic
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
18. Wire-framing & Prototyping
• Home Page
• Sub Pages
• “Process Pages” - Registration & eCommerce
• Resource & Documentation Pages
• Profile Pages
• Admin Pages
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
19. Call To Action Drivers
• Mobile/Tablet
• Registration
• Email/Newsletters
• Events/Calendars
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
20. Wire-framing & Prototyping
Home Page
Process Pages
Resource
Profile Pages
Admin Pages
STARMARK.COM
954 874-9000
TXT “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.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
23. Viewable Area & Content Prioritization
Premiere
Secondary
Third Tier
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
25. Fonts, Colors & Sizes
• Voice & Volume
• Emotional extension of the content
STARMARK.COM
954 874-9000
TXT “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 Story
STARMARK.COM
954 874-9000 Invite Them In
TXT “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 link
STARMARK.COM
954 874-9000
TXT “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 & launches
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
31. Repurpose Media
• Where else can it go?
STARMARK.COM
954 874-9000
TXT “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 tools
STARMARK.COM
954 874-9000
TXT “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 content
STARMARK.COM
954 874-9000
TXT “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-out
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL
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 topics
STARMARK.COM
954 874-9000
TXT “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
Prioritization
STARMARK.COM
954 874-9000
TXT “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: justicemitchell
STARMARK.COM
954 874-9000
TXT “ETIP” to 247565
@STARMARKINTL
/STARMARKINTL
/STARMARKINTL
© STARMARK INTL