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 5 of 5

In this final section to this series we cover a few trends that will impact web design in 2018. From using asymmetry and broken grid line layouts to color schemes and more, this Slideshare can give you some new and fun ideas for your web design project.

  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

Web Design Part 5 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. Trends for 2018 Compiled by Author From: 99designs.com & designshack.net 5 Asymmetry & Broken Grid Layouts Bottom Sticky Elements Color Schemes Custom Illustrations Drop Shadows & Depth Dynamix Gradients Fluid Shapes Integrated Animations Mobile First Particle Backgrounds Typography Voice & Natural Language Search White Space Without Minimalism
  6. 6. Trend1Example: Compiled by Author From: 99designs.com 6
  7. 7. Asymmetry &Broken GridLayouts Trend 1: Compiled by Author From: 99designs.com Asymmetrical and unconventional ‘broken’ layouts, will be strong in 2018 The appeal of the asymmetrical layout is that it is unique, distinctive and sometimes experimental 7
  8. 8. Asymmetry &Broken GridLayouts Trend 1: Compiled by Author From: designshack.net Designers are splitting the visual elements on the screen with a more asymmetrical grid pattern To make this concept work, there needs to be a distinct balance of elements so that one side of the design isn’t overpowering Space and text elements often balance visuals to help draw the eye across the design It all comes together because the designs still live on a grid, which helps keep everything organized 8
  9. 9. Asymmetry &Broken GridLayouts Trend 1: Compiled by Author From: 99designs.com Large-scale brands with a lot of content still use traditional grid- based structures, but there is going to be an increase in the use of unconventional layouts Brands are going to be using this more to create unique experiences to set themselves apart Traditional companies may not be interested in this aesthetic, but bigger brands that can afford to be a little risky will expect out-of-the-box ideas from their web designer 9
  10. 10. Trend3Example: Compiled by Author From: 99designs.com 10
  11. 11. Color Schemes Trend 3: Compiled by Author From: 99designs.com 2018 is the year for super excess colors online In the past brands and designers were stuck with web-safe colors Designers are slowly becoming courageous in their approach to color Their approach includes supersaturation and vibrant shades They also use headers that are no longer just horizontal but reimagined with slashes and hard angles 11
  12. 12. Color Schemes Trend 3: Compiled by Author From: designshack.net Bright and bold color can also be used and they have a fresh feel that appeals to younger users Bold color is eye-catching and can help draw a user into a design These color choices can also create an unexpected aesthetic They can also create a funkier vibe for websites and companies that might not be known for this tone 12
  13. 13. Color Schemes Trend 3: Compiled by Author From: 99designs.com This is partly helped by technological advances in monitors and devices with screens that are more suitable for reproducing richer colors Vibrant and even clashing colors can be useful for newer brands hoping to instantly attract visitors’ attention It’s also perfect for brands who want to set themselves apart from the ‘web-safe’ and the traditional 13
  14. 14. Trend5Example: Compiled by Author From: 99designs.com 14
  15. 15. Drop Shadows& Depth Shadows have been a staple of web design for a while Now, because of the progress of web browsers, there are new variations With grids and parallax layouts, web designers can play with shadows more to create depth and the illusion of a world beyond the screen This is a direct reaction to the flat design trend that was popular in years past Trend 5: Compiled by Author From: 99designs.com 15
  16. 16. Drop Shadows& Depth Shadowplay creates a surprisingly versatile effect These effects increase the aesthetics of a web page, and helps with the User Experience (UX) by providing emphasis For example: using soft, subtle shadows as hover states to designate a link and combining them with vibrant color gradients enhances the three dimensional effect of the old shadows Trend 5: Compiled by Author From: 99designs.com 16
  17. 17. Trend7Example: Compiled by Author From: designshack.net 17
  18. 18. Fluid Shapes Trend 7: Compiled by Author From: designshack.net Softer shapes with a more fluid look and even animations are gaining popularity Smoother lines are a natural progression of the polygon trend One of the best parts of this versatile trend is that each of the designs are different Polygons are typically flat, two- dimensional shapes, although in website projects some polygons animate move and seem to have 3-D characteristics 18
  19. 19. Fluid Shapes Trend 7: Compiled by Author From: designshack.net The same characteristic hold for more fluid shapes: They just don’t have sharp intersecting lines Instead each shape is made of smooth curves that flow throughout the design 19
  20. 20. Trend9Example: Compiled by Author From: 99designs.com 20
  21. 21. Mobile First Trend 9: Compiled by Author From: 99designs.com Mobile browsing has officially surpassed desktop Almost everyone these days shops and orders on their smartphone In the past, this was a clunky process that users were not as quick to adopt Designers had to figure out how to make a decent menu, submenu and sub-submenu on a small screen 21
  22. 22. Mobile First Trend 9: Compiled by Author From: 99designs.com Mobile design has matured The roll-out has become established, minimizing the menu for the small screen Companies may have to ditch large, beautiful photos sent by client on the mobile version Icons are more economical in terms of space and have become so common that the user has no trouble understanding them UX issues have become easier to identify and fix with micro-interactions allowing for immediate feedback on users actions 22
  23. 23. Trend11Example: Compiled by Author From: 99designs.com 23
  24. 24. Typography Trend 11: Compiled by Author From: 99designs.com Typography has always been a powerful visual tool It can create personality, evoke emotion and set the tone of a website all while conveying important information Device resolutions are getting sharper and easier to read, thus there may be an increase in the use of custom fonts Excluding Internet Explorer, many browsers can support hand-made typefaces that are enabled by CSS for web browsers The trend of large letters, contrasting sans serif and serif headings help create dynamic parallels, improve UX and best of all, keeping the visitor reading your website 24
  25. 25. Typography Trend 11: Compiled by Author From: 99designs.com For web pages in particular, headers are key SEO elements and help to order information for the scanning eyes of readers Looking ahead to 2018, designers will take full advantage of this with web pages featuring large and impactful headers spun out of creative typefaces 25
  26. 26. Trend13Example: Compiled by Author From: designshack.net 26
  27. 27. WhiteSpace Without Minimalism Trend 13: Compiled by Author From: designshack.net The compromise is designing with plenty of white space, but with a much less minimalistic feel By adding more color and design elements to a design with a lot of space, it can feel fuller Designers are working with white space in plenty of other ways as well 27
  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

×