8 months ago


C ntents Inside issue

C ntents Inside issue 271 Cutting-edge features, techniques and inspiration for web creatives Meta Chat with the team and other readers and discuss the latest tech, trends and techniques. Here’s how to stay in touch… @WebDesignerMag 08 Creative trends to watch out for Shutterstock recently released its 2018 Creative Trends Report. Find out what’s coming your way Cover focus 10 WebKit: The best must-try resources out there Discoverthelibrariesandframeworksthat will make your site a better place to visit 11 NoexcuseforabadUI James Norman from Fasthosts tells you what makesagoodUIandwhyit’simportant 14 Lightbox A showcase of inspirational sites and the techniques used to create them 26 Angelic airplanes Russian agency Red Collar reveals how it delivered Inculerate’s distinctive new design 34 Form and FFunction Web Designer finds out how dataviz specialist FFunction makes data beautiful and engaging 42 Get pro design skills Learn how pick the right font, create meaningful typography, pick the perfect palette and build brilliant layouts 62 Master layouts Whatmakesalayoutgreat?Discoverthesecrets behind designing and building what you need 42 74 10 best static site generators WanttobuildHTMLpagesindouble-quicktime? Then try one of these carefully selected options 92 Hosting listings An extensive list of web hosting companies. Pick the perfect host for your needs 94 Course listings Wanttostartlearningonline?Checkout what courses are out there with this list 98 Next month What’s in the next issue of Web Designer? 62 Master layouts How to design and create the perfect page 74 10 best static site generators Create HTML pages in double-quick time 6 ________________________________________________ contents

FileSilo 96 Get the latest must-have resources and videos 96 Never miss an issue Subscribe Turn to page 32 now Save 20 percent and get the magazine delivered to your door WEB DESIGNER Tutorials Webgurustakeyoustep-by-step through professional techniques COMMENT — James Norman — p11 34 18 ProFile: Lightbox: Making data beautiful and engaging Dressing up eCommerce 52 Code a dynamic SVG menu UseSVG,jQueryandtheGSAPanimationlibraryto create an animated radial menu 56 Design isometric typography Learn how to build a city of letters, using the Pen tool, selections and layers in Photoshop 70 Shrink your CSS UseCSS4variablestochangeavariableandeveryrule that depends on it Web Workshop 50 Overlay graphics on video Create designs to complement video backgrounds 60 Multiple fade background colours Code backgound colour changes on scroll Web Developer 74 10 best Static Site Generators Discover the best options for creating HTML pages in double-quick time 80 Automate your workflow Learn how to remove the nuisance of repetitive and mundane tasks with the help of Gulp 86 Wire up TypeScript & React TypeScript makes coding easier, but deploying it with a framework can be a hassle. Webpack to the rescue contents _________________________________________________7