Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Web Design Part 2 of 5

Is your company in the process of creating website? Take a look at this second part of this series dedicated to explaining the seven steps to success of designing a website.

  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

Web Design Part 2 of 5

  1. 1. Web Design: An overview of web design from statistics to tips and more. 1
  2. 2. Table of Contents Page Title: Page Number: Web Design Statistics: 5 Web Page Conversions 6 Web Page Design 8 Web Page Loading Time 11 Web Page Responsiveness 14 Web Design Steps for Success: 17 Goal Identification 19 Scope Definition 23 Sitemap & Wireframe Creation 27 Content Creation 31 Visual Elements 37 Testing 41 Launch 45 2
  3. 3. Table of Contents Page Title: Page Number: Top 10 Web Design Companies: 48 22SQUARED 50 360I 52 AKQA 54 Conversant 56 Cramer-Krasselt 58 Grey Global Group 60 North Kingdom 62 Publicis. Sapient 64 Razorfish 66 Tombras Group 68 Digital Marketing Aspects Impacted by Web Design: 70 Analytics & Monitoring 72 Brand Identity 75 Conversion Rate Optimization (CRO) 78 Search Engine Optimization (SEO) 81 User Experience (UX) 84 Tips for 2018: 87 Be Mobile Friendly 89 Create a Hierarchy 92 Declutter Pages 95 Increase Readability 98 Make Navigation Intuitive 101 3
  4. 4. Table of Contents Page Title: Page Number: Trends 2018: 104 Asymmetry & Broken Grid Layouts 106 Bottom Sticky Elements 110 Color Schemes 113 Custom Illustrations 117 Drop Shadows & Depth 120 Dynamic Gradients 123 Fluid Shapes 126 Integrated Animations 129 Mobile First 134 Particle Backgrounds 137 Typography 140 Voice & Natural Language Search 143 White Space Without Minimalism 146 Work Cited 148 4
  5. 5. Steps for Success Compiled by Author From: webflow.com 5 Goal Identification Scope Definition Sitemap and Wireframe Creation Content Creation Visual Elements Testing Launch 21 3 4 5 6 7
  6. 6. Steps for Success Compiled by Author From: webflow.com 6 In this initial stage, the website’s end goal needs to be identified Questions to explore and answer in this stage of the process include: Who is the site for? What do they expect to find or do there? Is this website’s primary aim to inform, to sell, or to amuse? Does the website need to clearly convey a brand’s core message, or is it part of a wider branding strategy with its own unique focus? What competitor sites, if any, exist, and how should this site be inspired by/different than, those competitors? Step 1:
  7. 7. Steps for Success Compiled by Author From: webflow.com 7 This is the most important part of any web design process If these questions aren’t all clearly answered in the brief, the whole project can set off in the wrong direction It may be useful to write out one or more clearly identified goals, or a one-paragraph summary of the expected aims This will help to put the design on the right path Make sure to understand the website’s target audience, and develop a working knowledge of the competition Step 1:
  8. 8. Steps for Success Compiled by Author From: webflow.com 8 Tools for Website Goal Identification Stage Audience Personas Creative Brief Competitor Analyses Brand Attributes Step 1:
  9. 9. Steps for Success Compiled by Author From: webflow.com 9 One of the most common and difficult problems plaguing web design projects is scope creep Goals can gradually expand, evolve, or change during the design process If the increased expectations aren’t matched by an increase in budget or timeline, the project can rapidly become utterly unrealistic Step 2:
  10. 10. Steps for Success Compiled by Author From: webflow.com 10 This provides an invaluable reference that helps keep everyone focused on the task and goals It includes: major landmarks, boundaries and deadlines A Gantt chart, which details a realistic timeline for the project Step 2:
  11. 11. Steps for Success Compiled by Author From: webflow.com 11 Tools for Scope Definition A Contract Gantt Chart (or Other Timeline Visualization) Step 2:
  12. 12. Steps for Success Compiled by Author From: webflow.com 12 The sitemap provides the foundation for any well-designed website It helps give designers a clear idea of the website’s information architecture and explains the relationships between the various pages and content elements The next step is to build the wireframe Wireframes provide a framework for storing the site’s visual design and content elements, and can help identify potential challenges and gaps with the sitemap Step 3:
  13. 13. Steps for Success Compiled by Author From: webflow.com 13 The wireframe doesn’t contain any final design elements but it does act as a guide for how the site will ultimately look Some designers use tools like Balsamiq or Webflow to create their wireframes Other may use paper and pencil instead Step 3:
  14. 14. Steps for Success Compiled by Author From: webflow.com 14 Tools for Sitemapping and Wireframing Pen/pencil and Paper Balsamiq Moqups Sketch Axure Webflow Slickplan Writemaps Mindnode Step 3:
  15. 15. Steps for Success Compiled by Author From: webflow.com 15 Once your website’s framework is in place, you can start with the most important aspect of the site: the written content Content serves two essential purposes: it drives engagement and action as well as SEO Step 4:
  16. 16. Steps for Success Compiled by Author From: webflow.com 16 Purpose 1: Content drives engagement and action Content engages readers and drives them to take the actions necessary to fulfill a site’s goals This is affected by both the content itself (the writing), and how it’s presented (the typography and structural elements) Long content may not grab the readers attention where as short, snappy, and intriguing content grabs them and gets them to click through to other pages Even if pages need a lot of content, properly “chunking” content by breaking it up into short paragraphs supplemented by visuals can help keep content light and engaging Step 4:
  17. 17. Steps for Success Compiled by Author From: webflow.com 17 Purpose 2: SEO Content also boosts a site’s visibility for search engines The practice of creation and improving content to rank well in search is known as search engine optimization, or SEO Getting keywords and key-phrases right is essential for the success of any website Search engines are becoming more and more clever, so should content strategies Step 4:
  18. 18. Steps for Success Compiled by Author From: webflow.com 18 Purpose 2: SEO Keywords that need to rank high, need to be placed in the title tag — the closer to the beginning, the better Keywords should also appear in the H1 tag, meta description, and body content Content that’s well-written, informative, and keyword-rich is more easily picked up by search engines, all of which helps to make the site easier to find Step 4:
  19. 19. Steps for Success Compiled by Author From: webflow.com 19 Content Creation Tools Google Docs Dropbox Paper Quip Gather Content Handy SEO Tools Google Keyword Planner Google Trends Screaming Frog’s SEO Spider Step 4:
  20. 20. Steps for Success Compiled by Author From: webflow.com 20 Next, companies need to create the visual style for the site This part of the design process will often be shaped by existing branding elements, color choices, and logos Images are taking on a more significant role in web design now than ever before Not only do high-quality images give a website a professional look and feel, but they also communicate a message, are mobile- friendly, and help build trust Step 5:
  21. 21. Steps for Success Compiled by Author From: webflow.com 21 Visual content is known to increase clicks, engagement, revenue and people want to see images on a website Images make a page feel less cumbersome and easier to digest They also enhance the message in the text, and can convey vital messages without people even needing to read it Use a professional photographer to get the images right and keep in mind that massive, images can slow down a site Optimizilla can be used to compress images without losing quality, and saving on page-load times Images need to be as responsive as the site because they are a way to communicate and appeal to the site's users Step 5:
  22. 22. Steps for Success Compiled by Author From: webflow.com 22 Tools for Visual Elements The Usual Suspects (Sketch, Illustrator, Photoshop, Etc.) Moodboards, Style Tiles, Element Collages Visual Style Guides Step 5:
  23. 23. Steps for Success Compiled by Author From: webflow.com 23 Once the site has all its visuals and content, companies are ready for testing Thoroughly test each page to make sure all links are working and that the website loads properly on all devices and browsers Errors may be the result of small coding mistakes, and while it is often a pain to find and fix them, it’s better to do it now than present a broken site to the public Step 6:
  24. 24. Steps for Success Compiled by Author From: webflow.com 24 For this stage companies can use Screaming Frog’s SEO Spider that allows you to do standard auditing tasks, and it’s free for up to 500 URLs Have one last look at the page meta titles and descriptions too Even the order of the words in the meta title can affect the performance of the page on a search engine Step 6:
  25. 25. Steps for Success Compiled by Author From: webflow.com 25 Website Testing Tools W3C Link Checker SEO Spider Step 6:
  26. 26. Steps for Success Compiled by Author From: webflow.com 26 When everything has been thoroughly tested, and companies are happy with the site, it’s time to launch Don’t expect this to go smoothly because there may be some elements that need fixing Web design is a fluid and ongoing process that requires constant maintenance A key thing to remember about the launch stage is that it’s nowhere near the end of the job Once the site goes live, companies can continually run user testing on new content and features, monitor analytics, and refine your messaging Step 7:
  27. 27. Steps for Success Compiled by Author From: webflow.com 27 Web design is all about finding the right balance between form and function Companies need to use the right fonts, colors, and design motifs The way people navigate and experience the site is also important Skilled designers should be able to create a site that walks the delicate tightrope between the two Step 7:
  28. 28. Work Cited:  “5 Essential Web Design Tips for a Stunning Website.” Color Design Blog , www.colourlovers.com/blog/2018/01/09/5-essential-web-design- tips-for-a-stunning-website.  “9 cutting-Edge web design trends for 2018.” 99designs Blog, 12 Dec. 2017, 99designs.com/blog/trends/web-design-trends-2018/.  “Blue Frontier.” Blue Frontier, www.bluefrontier.co.uk/company/blog/item/the-importance-of-a- website-to-your-marketing-strategy.  Cousins, Carrie. “10 Web Design Trends to Watch for in 2018.” 10 Web Design Trends to Watch for in 2018 | Design Shack, Design Shack, 12 Dec. 2017, designshack.net/articles/inspiration/web-design-trends- 2018/.  Meazey, Matt. “The web design process in 7 simple steps | Webflow Blog.” RSS, Webflow, 31 July 2017, webflow.com/blog/the-web-design- process-in-7-simple-steps.  “The Jaw Dropping 101 Web Design Statistics of 2017 You Should Not Ignore!” SAG IPL - A Technology Blog, 27 Nov. 2017, blog.sagipl.com/web-design-statistics/.  Top 10 Rankings List: The Best Web Design Company in the World. www.webpagefx.com/best-web-design-company.html. 28
  29. 29. ContactUs fortheFull Presentation: Mediacontact USA Inc. 13575 58TH Street North #160 Clearwater, Fl. 33760 T: 727 538 4112 E: contact@mcusa.co www.mediacontactusa.com