Inhoudsopgave van No. 284 - Web Designer

In a world where there seems to be a disturbing lack of empathy, there are an awful lot of things being written about it. If you believe the headlines, empathy can boost your profits, make you a better leader, help you create amazing innovations and deliver award-winning designs. Yet when you dig deeper into these articles, there’s little substance on how empathy actually works and how it can deliver these magical results. Aside from being something you should be doing, how should empathy be used in the most effective way, and what pitfalls should you be aware of? Many design thinking and human-centred design processes have empathy as the first step in their process. They outline user interviews, empathy mapping and ‘adopting a beginner’s mindset’ as some of the tools…

When crafting interfaces for websites or apps, we are faced with unlimited opportunities for colour combinations, font pairings and UX patterns for nudging users in the desired directions. It is our responsibility as designers to use these assets to empower our users rather than lead them down rabbit holes of trickery, which ultimately end in distrust of our products and services. Knowing your users is more important than ever – getting inside their heads and understanding the power of fonts, colours and dark patterns to influence their subconscious should be an essential tool in any designer’s armoury.…

As designers, we cannot underestimate the role that typography plays in people’s everyday lives. In lieu of photography or visual illustrations, type alone has the power to help us navigate and understand the world around us, literally transforming the meaning of words. If, as Oliver Reichenstein says, “web design is 95% typography” (bit.ly/2NZE5X5), it makes sense for digital designers to really understand the power and implications of the fonts we choose. THE FONTS YOU CHOOSE MATTER  As well as being problem solvers, designers are also storytellers. Fonts have the power to give a personality to a brand – none more so than Lush’s Handwritten Font (bit.ly/2SUTivm), which was created as a digital asset to be used online across the company’s website and app. Synonymous with the Lush brand, the iconic…

TIMES NEW ROMAN Originally designed for The Times newspaper, Times New Roman has been extremely widely used and as such demonstrates longevity and gravitas, working as well in an on-screen environment now as it always has in its printed form. TRAJAN PRO Though it was only designed in 1989, Trajan Pro is probably one of the most ancient-looking fonts due to its Roman heritage and inspiration. Available only in uppercase, the font should be used sparingly as a way of demanding respect for the text at hand. PLAYFAIR DISPLAY A modern font from Google that draws inspiration from the European Enlightenment and Baskerville. The multitude of weights available render this font highly suitable for digital designs that are looking for a traditional edge.…

When designing your interfaces, ask yourself these questions: if I was to sit with a person who has just made a conversion on my site and reveal to them all of the tricks and techniques I’d used to steer them towards that conversion, how would they feel knowing it? Would they feel tricked into purchasing an add-on they didn’t really need? Would they feel that my approach was morally sound? If the answer of any of these questions makes you feel uncomfortable, you’ve probably stepped into the realm of dark patterns. THE DARK SIDE  As users we have all come across dark patterns, whether we were aware of them or not. Perhaps more alarmingly, as designers we may have actually designed dark patterns without consciously realising so. We are often…

STAY FOCUSED Shaders are purpose-driven. Don’t try to make one shader be everything. Have a focus and a goal with a shader, be it a cool surface look to an object in a game or a beautiful ambient background to your site. Stay focused. DON’T FEAR COMPLEXITY Leverage the power available to you. Colours, lights, ray marching and casting, shadows and reflections are expensive but all possible. Complex generative art can have insanely high levels of detail and iterations to create stunning depth and realism. Don’t be afraid to experiment with complexity. EXPERIMENT The joy of shaders really comes from exploring the hidden worlds of mathematics and iterations. Learning to become an explorer in fractal worlds will serve you well. Take notes, share and keep experimenting. “A popular WebGL 3D-rendering…

As we all know, browsers are a key component of the web experience. Everybody who’s connected to the web will be using them. Last issue we talked about how Microsoft Edge/IE had finally given up on its own engine and intended “to adopt the Chromium open source project in the development of Microsoft Edge on the desktop to create better web compatibility for our customers and less fragmentation of the web for all web developers”. In one way it is a sentiment that has to be applauded, but it is not the popular choice with some. We at Web Designer are swinging towards this being a good thing, but also understand the implications. This got us thinking about what else has been happening in the world of browsers recently. Flash…

01. 2018 Year In Review dribbble.com/year/2018 Dribbble is the home of creative talent, and this site shows off the talent out there with a touch of dignity and style. 02. Trunk Dunk trunkdunk.com An attention-grabbing illustrative style and different level animated backgrounds bring this homepage to life. 03. HAPPY 2019 CHALLENGE happy2019.sretks.com The 3D space background built with WebGL sets the scene for this mini game that asks the users a set of questions. 04. Katlas katlasproduction.com/#home A gorgeous lava-like, undulating background does enough to keep visitors interested and engaged before revealing more of itself. Graphics Mixtures bit.ly/2Hr1L8q There is some design madness/creativity going on here thanks to the talented artist Maybe* Bernardo Henning. Colour picker Warm Glow bit.ly/2T7sMPM Typesetter TT Supermolot Neue bit.ly/2Hm2uri A redesigned, extended and enhanced reincarnation…

In terms of the visual design duties on the Goal 50 project, progress was aided by how the WebGL work was performed between the teams. This ‘globe’ element was to form a standout feature for illustrating the campaign and navigating the selected players. “Parallax were able to do a lot of the foundation work on the WebGL header in tech to allow the XD creative team to understand the scope of what was creatively possible”, said XD Design Manager Paul Key. “This was fast, efficient and allowed XD to play with the creative parameters to ‘select’ key creative choices in the environment build without having to commit any designs.” With the underlying WebGL mechanics being taken care of in this way, it would allow the XD designers to more efficiently…

THE OPPORTUNITY TO BRAND AN AIRLINE? Yes, please! When Watermakers Air, a private flight charter with service to the Bahamas approached helium creative for a rebranding, the team was excited to say the least. After a blissful discovery trip to The Bahamas and renaming them Makers Air (it was only the natural thing to do), helium creative developed a brand that aimed to connect passengers to paradise by bringing back the abandon and discovery of flight. Inspired by Makers Air’s flight routes over the Bahamas, the brand looks and feels as if you’ve taken a little piece of the geography and turned it into an airline. From the brightest blues you’ll ever see to cotton-like clouds on the horizon, and then into citrus-kissed sunsets – the colours and imagery used…

HELVETICA The very personification of stability, Helvetica was designed to support the reading process (bit.ly/2LkPyPX) and is one of the world’s most popular fonts due to its legibility and ability to work across many formats – from logos to government forms. ROBOTO Developed for the Android interface, Google claims that Roboto is at once “mechanical” and “friendly”. Multiple weights and adaptations of the base font allow it to speak loudly as a big title, or take a supportive back seat as a part of the native Android system interface. IBM PLEX SANS Part of a new suite of typefaces designed to illustrate the IBM brand’s marriage between machine and mankind and their “unique relationship”, IBM Plex Sans serves as a “contemporary compadre” (bit.ly/2Cj9S19 ) to your font library.…

AMATIC SC For a handwritten font, Amatic SC has a real consistency to its style. It feels handmade, but it still renders neatly enough to be used for short blocks of text, so is a great option when you want to introduce a little ruggedness to your webpage. PERMANENT MARKER Like most handwritten fonts, Permanent Marker from Google does what it says on the tin. It packs a real punch when rendered digitally and works well when it’s used to annotate elements of your design when sharing with clients. SATISFY Described as “a brush script with a little pizazz” (bit.ly/2SOCFS6 ), Satisfy reminds you of the kid in your class with the neatest handwriting. It is ideal if you want to render text that looks handwritten but you haven’t got…

Using the Oculus homepage (oculus.com) as a mini case study, we can dissect the ways the company has used good design practice to persuade potential customers to convert into buyers. The motivation in this case is clear: the user wants to enhance their viewing pleasure through the power of VR. If they have the cash available for the product, they have the ability to buy it. Finally, it comes to the prompts, and here is where the designer comes in. Looking at the page, we can see people enjoying the product in background video. We are directed via the subtle visual cue of their eyeline towards the key information, where the benefit is summed up in one simple line: “You haven’t seen it until you’ve seen it in VR”. The…

HTML meta tags and meta tags are very similar and serve the same purpose – to provide search engines with information about a webpage. As Google’s ranking is made up of 200 or more components, or ‘ranking signals’, these on-page SEO elements are critical to this ranking. Content relevance must therefore be both original and relevant to the search phrase (keyword focus) to rank well, as well as optimising meta titles, descriptions, headers, image alts and URLs. Clean and meaningful on-page optimisation is necessary for every website to realise its full potential in SEO. One of the reasons why many authority sites no longer dominate the top organic listings is that they neglect basic on-page SEO. The focus of your keywords, content and subsequent metas should be aimed at the…

The last two to three years have seen layout move forward in leaps and bounds. Now that these modern techniques have such a consistent result in modern browsers, you really can be using them for your production code. This tutorial will show you just how simple it is to create a standard blog-style layout using CSS Grid and flexbox. First let’s quickly recap over the basics of HTML and why it is good to try and write semantic code. More than desktop and mobile Have you noticed the reader mode on Safari and Firefox? It is an icon in the address bar that looks a bit like lined paper. This will render your webpage in a distraction-free, bare bones mode, rather like devices such as the Apple Watch use. More…

Integrating shaders into your websites and apps will enable you to take experiences to the next level. Beautiful lighting, swirling smoke or creepy ambient fogs can all create a dynamic atmosphere to enhance the visuals behind your titles and main content. Continue to experiment with the code to get the results you like. Work in some music and use the audio source as an input into your shader to create some wild effects. This could already make a nice landing page concept or piece of stand-alone generative art. Explore resources like ShaderToy to learn new techniques and build your own library of effects and animations. Look at light effects in films and your favourite games. Begin to decode how effects are created and work the concepts into your own projects.…

Google.com 62.45 % Unsurprisingly, the .com version is way out in front Google.co.in 5.57 % India comes in at number two in the world of Google search Google.com.tr 3.76 % A surprising entry at number three is the Turkish version Google.co.uk 1.77 % The .co.uk version of Google makes a up a small portion of searches Google.de 1.35 % The German version of Google takes fifth spot Source: gs.statcounter.com (correct as of December 2018)…

With Warhead you’re able to design any website you can imagine without having to write any code. This revolutionary web design platform is powered by CSS Grid technology, enabling you to create complex layouts quickly and easily via an intuitive drag-and-drop interface. And you can try it for as long as you like, completely free. FREE TO SIGN UP Warhead has the functionality to take on everything from a simple blog to an advanced e-commerce site. And great news for designers: it integrates smoothly with your Creative Cloud apps, so it will slot straight into your existing workflow. If you’re looking for an Adobe Muse replacement, the hunt is over. CREATIVE CLOUD INTEGRATION Warhead is Creative Cloud-connected, so it’s designed to work seamlessly with your other design tools. For users…

“BOY, WE ARE EXCITED WITH THIS BRANDING PROJECT: DRIP POP.” Originating from South America, the now-named drip pop came to helium creative for a complete name and brand overhaul. Previously named FijiPop, five young Bolivian entrepreneurs approached helium for help to market their delicious lavapops (frozen ice lollies filled with creamy fillings) in the United States of America. They were looking for a creative studio that saw the brand as a piece of art. Inspired by the flavours, sensations, colours, ingredients and story behind the lavapops, helium creative set off to create a brand that was full of vibrancy and playfulness. They chose the name drip pop, and from there developed the brand messaging, identity, packaging, supermarket box packaging, splash page and full website. The drip pop brand is inspired…

In the UK, approximately one in 12 men and one in 200 women are affected by colour blindness (bit.ly/1je5HGG). This, paired with the fact that screen readers do not communicate colour to visually impaired users, means we should be mindful that colour alone is not always an appropriate means of conveying meaning within our interfaces. If, for example, you need to communicate an error on your page, the colour red might not be enough on its own. Good copywriting combined with spacial and typographic hierarchy should be utilised to enable people with colour blindness and those using screen readers to better understand any errors you are trying to display. When designing your next interface, try viewing your file in greyscale to test whether or not your error messages, calls to…

COOPER BLACK Originally used in the 1920s and 1930s, Cooper Black is popular these days for evoking a retro 1970s vibe (bit.ly/2RHKuvJ) . Cooper Black has heavy, rounded serifs so it is useful for when your type needs to be clearly legible from a distance. BANGERS This is a 20th-century superhero comic book-style font that is available from Google, Bangers will provide an action-packed punch to your interface when you have the need for a playful but clean typeface that will render very beautifully on the web. JOKERMAN One of the more decorative typefaces from the 1990s, Jokerman is more useful for display signage than interface design, but was designed to elicit excitement, humour and vitality, so should you find the need arise it is certainly an option.…

CYRUS HICHSMITH occupant.org The author of Inside Paragraphs, Cyrus Highsmith is a type designer and expert on the power of typography to tell stories. EBEN SORKIN sorkintype.com A pioneer of functional type that enhances identity, Eben Sorkin has contributed towards open source fonts for Google. SARAH HYNDMAN sarahhyndman.com An expert in multi-sensory typography, Sarah Hyndman is on a mission to change the way we think about type. HARALD GEISLER haraldgeisler.com Geisler is a German type designer who has created fonts using the handwriting of both Einstein and Freud. MACKEY SATURDAY mackeysaturday.com More of a brand designer than a typographer, Mackay Saturday has created type-led identities for companies like Instagram, Luxe and Oculus.…

CX MAP cxmap.io This drag-and-drop tool will help you map out user journeys, run experiments and identify the areas to introduce calls to action. THESAURUS.COM thesaurus.com Designers aren’t always the best writers of captivating copy, so Thesaurus.com is a great tool to bounce ideas off of when you know what to say but not quite how to say it. INVISION invisionapp.com Create clickable prototypes by importing your designs directly from Sketch or Photoshop. InVision provides an ideal environment for user-testing your calls to action and their post-click experience with users. CRAZY AGG crazyegg.com Use Crazy Egg to generate heatmaps and recordings of users on your site, then analyse their navigational behaviours to optimise the placement of your calls to action. CONTRAST CHECKER webaim.org/resources/contrastchecker Use WebAIM’s Contrast Checker tool to ensure…

Tables, block & Inline-block In the past we used tables and floats, positioning and inline-block to create designs. All of these methods were essentially hacks as the right tools weren’t available, so important functionality such as vertical centring was left out. Flex The flex layout is based on ‘flex-flow directions’. The main idea behind the flex layout is to give the container the ability to alter its items’ width/ height (and order) to best fill the available space (mostly to accommodate all kinds of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow. Grid CSS Grid is revolutionising the way we design and build web interfaces. It is two-dimensional, meaning you can place things on both rows and…

A An immutable object is one that cannot change once it has been created. Both React and Redux require objects to be immutable, as it helps with speed and security knowing that a value has not changed. Regular JavaScript objects are not immutable, which makes it difficult to know whether or not it has been updated. By using a new object, all an application needs to do is see if it’s the same object. If it isn’t, assume an update has occurred. It is possible to copy an object and make updates to that without using an external library. Using methods like ‘Object.assign’ or the spread operator are perfectly valid ways of achieving immutability, but for large nested objects this quickly becomes tedious and difficult to read. The Immutable.js library…

Node Package Manager, or npm for short, sees use all over the modern JavaScript world. As it usually does its job with minimal issues, developers tend to forget the time spent using it. While this is not a big problem, npm does contain a set of extremely nifty features that are intended to save you a lot of valuable time. As with most other optimisations, not every measure is universally applicable. The following steps show a few ‘should-knows’ that have the potential to improve productivity, make you type less or reduce waiting time. Studying the art of ‘faster npm’ is not an end in itself. In addition to letting you get more done, showing off advanced console skills is a surefire way to impress colleagues and possible recruiters – in…

Optimised graphics processing units ( GPUs ) enable creators and developers to leverage shader technology virtually anywhere. Hardware devices have supported shader code for years on gaming consoles, natively on mobile devices and in operating systems. Powerful upgrades, along with the ever-increasing demand for higher quality effects and real-time graphics, have only made things better. On the web, WebGL and GLSL is supported in almost 100 per cent of browsers and devices. Exceptions now are only in the most fringe cases.…

SHADERTOY shadertoy.com ShaderToy is an invaluable resource for learning, experimenting and sharing shaders. You can reuse your fragment shader in your projects. THREE.JS threejs.org three.js is the most popular 3D WebGL library for the web. Not only does it enable you to dive into 3D rendering and animations, but it can also make working with shaders in your websites much faster than hardcoding WebGL integration. SHADER PROTOTYPES ON RICHARDMATTKA.COM richardmattka.com/prototypes The shader prototypes that Richard explores combine music and animation to give you ideas of what is possible. Ambient worlds, visual effects and more live here.…

Featured host: Netcetera netcetera.co.uk 03330 439780 About us Formed in 1996, Netcetera is one of Europe’s leading web hosting service providers, with customers in over 75 countries worldwide. As the premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK, Netcetera offers an array of services designed to more effectively manage IT What we offer • Managed hosting – A full range of solutions for a cost-effective, reliable, secure host. • Cloud hosting – Linux, Windows, Hybrid and Private Cloud Solutions with support and scalability features. infrastructures. A state-of-the-art data centre environment enables Netcetera to offer your business enterprise-level colocation and hosted solutions. Providing an unmatched value for your budget is the driving force behind our customer and managed infrastructure services. From…

“No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks.” “Northcoders delivered their part of the bargain in spades. They provided tremendous assistance in turning me into the full product – a well-rounded, capable future tech employee – and they have the contacts to deliver the opportunities for such people.”Joe Mulvey Maths teacher to software developer at Auto Trader Featured: Northcoders northcoders.com Twitter : @northcoders Facebook: Northcoders About us Northcoders is the coding bootcamp for the north, based in the heart of Manchester and built upon northern values of grit, determination and community spirit. No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks at their full-time bootcamp, or fit…

Essential assets and resources Get textures, fonts, backgrounds and more Exclusive video tutorials Learn to code/create with HTML, CSS & JS Tutorial project files All the assets you’ll need to follow our tutorials Plus all of this is yours too… • All-new tutorial files to help you master this issue’s HTML, CSS and JavaScript techniques • 6 animated Rose Gold Instagram templates, 90 hi-res geometric colourful backgrounds, 15 hand-drawn gold and silver patterns and 27 retro actions, light leaks and date stamp fonts from Sparklestock (www.sparklestock.com) Log in to www.filesilo.co.uk/webdesigner Register to get instant access to this pack of must-have creative resources, how-to videos and tutorial assets downloads – exclusive to your favourite magazines from Future! Secure and safe online access, from anywhere Free access for every reader, print and…

WORKING WITH ADOBE XD Create graphic transitions for prototypes and work with voice commands DESIGN BETTER ONLINE FORMS Improve engagement and customer retention by creating forms that users will want to use TEST REACT REDUX APPLICATIONS Learn how to write components that make testing with Jest quicker and easier Visit the WEB DESIGNER online shop at myfavouritemagazines.co.uk for the latest issue, back issues and specials ALL IN YOUR NEXT WEB DESIGNER Issue 285 on sale Tuesday 5 March 2019 SUBSCRIBE TODAY Go to page 28 to learn more…