1 / 19

Revitalize Your Website: Responsive Design Strategies for a Modern Look and Feel

Update your site to 2012 standards with responsive design. Understand the benefits and strategies for an improved user experience across all devices. Explore concepts, wireframing, and delivery methods to create a future-proof website. Learn how responsive design can streamline development and management processes. Discover how to simplify site navigation, enhance visual appeal, and optimize for search engines. See how a strategic redesign can elevate your brand and engage users effectively.

vui
Download Presentation

Revitalize Your Website: Responsive Design Strategies for a Modern Look and Feel

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 028_ichi - Site Refresh • Update the look n’ feel to 2012 standards

  2. Divider Slide Title Contents Intro - Research / Scoping Wireframing Look n feel Concepts Delivery

  3. Intro What is Responsive Design and how can it help me?

  4. Content Slide Title Icanhaveit.com Existing Site

  5. Content Slide Title Responsive Design What's’ your strategy? “As mobile devices are increasingly become the way to access online content, responsive design has emerged as a popular design strategy” Greater User Experience Desktop Tablet Mobile TV(?) Future proof Cons Req additional front-end dev time. Usually 20-30% longer Faster than creating addition non-desktop (mobile) site Develop, Maintain and Manage = ONE SITE Responsive sites only need to recognise the browser width

  6. Responsive Design Desktop user I’m on my lunch break and I want to bid quickly Tablet user I’m sitting, relaxing on the sofa browsing the internet Mobile user I’m on the bus and have time to look around Conclusion I want to quickly and easily discover prizes and bid for them Now these groups are likely to be doing all three

  7. Wireframing Three screen widths //Desktop //Tablet //Phone

  8. Content Slide Title Simple site refresh Is this really what we want?

  9. Content Slide Title Site redesign Develop a strategy that works?

  10. Look n feel Deliver a stylistic solution from a technically-led process

  11. Content Slide Title Concept 1 From existing logo develop the colour palette and typeface

  12. Content Slide Title Concept 1 Brand leverage with Web 2.0 overtones Main Nav Simple signposting using updatable Georgia typeface Typeface Elegant Georgia primary typeface Feature Zone Carousel feature shop front 2nd Tier promotion Fixed promo with prizes covering the categories Footer SEO optimised with complete site map

  13. Content Slide Title Concept 1 Overall simplification, focus on readability and contrast Type Remember the fat finger test

  14. Content Slide Title Concept 2 With familiar font and classic styling, this polished approach hits the right demographic

  15. Content Slide Title Concept 2 Following the wireframes then developed using a neutral palette punctuated with zangy blue Login / Share ‘Best practice top-right login. Global and specific share functionality Style Globally recognised Helvetica primary typeface. Default grey tones punctuated with highlight blue Special features ‘Countdown’ and ‘NEW’ zone (Star Lunch)

  16. Content Slide Title Concept 2 Overall simplification, focus on readability and contrast Type Remember the fat finger test

  17. Delivery Final home page, from evolution to revolution

  18. Content Slide Title Final Design Overall simplification, focus on readability and contrast Brand leverage Taking elements from the brand mark, this design evolved from fresh wireframes through to workable a solution for a demanding client

More Related