Web_Designer_UK__May_2018

Recommendations

Info

GET PRO DESIGN SKILLS Layout is one of the most important aspects of the web and applications. We need to consider a number of different things from the target audience to the brand and the content. Get it wrong and your users will get confused and leave to find the information elsewhere. Here we take you though every aspect of the process, from the initial inception of the project through to building and structuring the code, and touch on which display properties you should use. 62 __________________________________________________feature
GET PRO DESIGN SKILLS DESIGNING LAYOUTS The Design phase of a project typically includes a number of processes This image shows the design process for the Baltic Training website, from initial sketches through wireframes and design to the final live website THE PROCESS The design phase of a project usually begins with a scoping document of some description. This document will contain a specification of what you’re designing. The starting point for designing layouts really depends on the complexity of the project: Brochure websites — for example — will usually use a fairly simple design phase and usually include the following processes: content gathering -> site map creation -> wireframing -> high-fidelity concept design. Whereas a more complex web app design phase might include a few extra processes: gathering content -> site map creation -> wireframing -> low-fidelity prototype -> high-fidelity concept design -> highfidelity prototype. There’s no right or wrong way to do this and different designers use different processes. It’s up to you — as the designer — to find the right process for the project at hand. This may also be dictated by the project’s budget, when this is the case you need to decide which of these processes are the most important for the project you’re working on. HIGH- VS LOW-FIDELITY In the process diagrams explained above they mention both high- and low-fidelity designs and prototypes — this simply is how far you go with the design. A low-fidelity prototype, for example, is usually made up from the elements in the wireframes; whereas a low-fidelity design may be slightly more designed than the wireframe you might use for the project’s brand colours and fonts. APPLYING THE BRAND This includes obvious things such as the logo and colours and typography, but also everything else that comes with it: the language; the intent (is it playfulorcorporate?Isitconfident and loud?); any printed materials; and anything the company has that ELEMENTS AND RULES ARE USUALLY REPRESENTED BY THE BRAND GUIDELINES represents them. This will help you understand how to display the content on the screen. These elements and rules are usually represented by the brand guidelines document — if you have one, be sure to study it! Once you understand the brand you can look for ways to apply it to your design — are there any brand elements you can use, such as shapes or patterns? Are there any ways to use what you know about the brand to influence the layout and design of your project? These details are what will give the design meaning and help cement the brand into the company’s DNA. For a lot of users the website will be the first time they see the brand and, since youdon’tgettomakeafirst impression twice, you need to get this right! Besides, being on-brand should help keep the client happy too, and that’s always good! STRUCTURING THE DATA You can use the wireframing stage of the design in order to work out the content that needs to be structured. It’s always best to get the content before you start the high-fidelity design stage, in the real world this very rarely happens, but it’s much easier to design something when you know what information you need to include. Once you know the content of the page you can start to structure the data by breaking it down into sections or chunks. Depending on the quality of the content this can be a really simple or a really difficult thing to do. It’s important to keep linked information together so you don’t confuse the user, but you can use these sections or chunks of content to influence the type of layout you’re going to create. SITEMAPS Visual Sitemaps Anecessarypartofthedesign. They tell everyone involved in a projectwhatpagesaregoingto be in the project and how they are going to be linked together. You can simply draw these on paperorcreatethemusinga graphics editor, you could use MicrosoftWordorevenExcelfor that matter. The idea here is to structurethedatafortheproject. There are a number of tools builtspecificallyforcreating sitemaps, such as Slickplan, MindNode and WriteMaps. XML Sitemaps Thesearecreatedoncethe projecthasfinished,andareused by search engines to index your project’s contents and structure. Whiletheycanbecreatedby hand, there are a number of tools available for generating sitemaps — the tool you need will depend on your project. If you’re using WordPress as the backend you can use a plugin to generate the XML sitemap. Once created you need to submit the sitemap to the search engines using their webmaster tools. feature _________________________________________________63
Page 1:
29 PAGES OF EXPERT TUTORIALS FREE O
Page 4:
Meta Contributors This issue’s pa
Page 7 and 8:
FileSilo 96 Get the latest must-hav
Page 9 and 10:
Header Inspiration Sites of the mon
Page 11 and 12: Header Opinion There is no excuse f
Page 13 and 14: Reader survey FREE The JavaScript H
Page 15 and 16: Li htBox Millennials Are Screwed #0
Page 17 and 18: LightBox Millennials Are Screwed Cr
Page 19 and 20: #5F9DCC #5A293E #0D738C #B6AEAB Abo
Page 21 and 22: LightBox Open Wear Create an animat
Page 23 and 24: #FF4B33 #151D1E #9403B4 #D5154A Abo
Page 25 and 26: NEW YORK | 25-27 APRIL 2018 DONNA L
Page 27 and 28: https://inculerate.com by RED COLLA
Page 29 and 30: ANGELIC AIRPLANES INTO THE FOLD So
Page 31 and 32: ANGELIC AIRPLANES “Well the site
Page 33 and 34: Subscription offer MOST GRE
Page 35 and 36: FORM AND FFUNCTION It was2005,andFF
Page 37 and 38: FORM AND FFUNCTION MAKING THE CONNE
Page 39 and 40: FORM AND FFUNCTION TIMELINE whythen
Page 41 and 42: AIGA Justified 2014 - Winner 2014 G
Page 43 and 44: GET PRO DESIGN SKILLS FONTS & TYPOG
Page 45 and 46: GET PRO DESIGN SKILLS RESOURCES GOO
Page 47 and 48: GET PRO DESIGN SKIL 5 USE A SCALE I
Page 49 and 50: GET PRO DESIGN SKILLS COLOUR PERSON
Page 51 and 52: Overlay graphics on video backgroun
Page 53 and 54: Tutorials There’s so much that ca
Page 55 and 56: Tutorials Code a dynamic SVG radial
Page 57 and 58: Tutorials Perspective is everything
Page 59 and 60: Tutorials Design isometric typograp
Page 61: EXPERT ADVICE Using body labelling
Page 65 and 66: GET PRO DESIGN SKILLS flow of the c
Page 67 and 68: GET PRO DESIGN SKILLS CREATING LAYO
Page 69 and 70: GET PRO DESIGN SKILLS WHAT NEXT FOR
Page 71 and 72: Tutorials Web designers have had ac
Page 73 and 74: Tutorials Shrink your code with CSS
Page 75 and 76: 10 BEST STATIC SITE GENERATORS STAT
Page 77 and 78: 10 BEST STATIC SITE GENERATORS 5. N
Page 79 and 80: CREATE THE IMPOSSIBLE www.photoshop
Page 81 and 82: Developer tutorials Intoday’swebd
Page 83 and 84: Developer tutorials Automate your w
Page 85 and 86: Special offer for readers in North
Page 87 and 88: Developer tutorials While TypeScrip
Page 89 and 90: Developer tutorials Deploy TypeScri
Page 91 and 92: Discover another of our great booka
Page 93 and 94: Get your listing in our directory T
Page 95 and 96: Get your listing in our directory T
Page 97 and 98: Thehomeofgreat home of downloads -
Page 100: 9000 1
show all

Web_Designer_UK__May_2018

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?