Magzter Gold (Sitewide AU)

Magzter Gold (Sitewide AU)

Digital Delivery

Web Designer July 1st, 2019 Digital Back Issue Cover

Web Designer No. 285 (Digital)

(Write a Review)

Single Digital Issue

No. 285

$5.99

Powered By Zinio

Zinio

Satisfaction Guaranteed

Instant Start

Also available on ZINIO Unlimited logo

Get unlimited access to Web Designer (Digital) + Back Issues & 5000+ other magazines

1-month free trial

Renews at $8.99/month after trial.
Cancel anytime.

Get unlimited access to Web Designer (Digital) + Back Issues & 5000+ other magazines. Renews at just $8.99/month after trial. Cancel anytime.

Start Trial Learn more

51 Articles

Welcome to the issue

Are you experienced? Jimi Hendrix wouldn’t have known what UX was, but he knew how to construct a song that would give people a great experience. It might be a slightly tenuous connection but UX is all about giving people a great experience. Like a great song, the better the experience you can give people, the more popular a site or app is likely to be. This issue we bring together a whole host of UX features and tutorials to guide you through the world of UX, to help you join the revolution or kickstart the next stage of your career. We kick-off this special issue with the key rules and best practices that any user experience designer needs to know. Keeping these company we have 20 of the best…

Welcome to the issue

This issue’s panel of experts

Daniel Schwarz Daniel Schwarz is a full-stack designer, web developer and a writer, editor, author and teacher at heart. Currently taking time off to build uxtricks.design, a blog and bookstore for levelling up your UX/UI design skills. This issue he kicks off our UX special with a look at the key rules and best practices. Page 42 “ Have an idea, but not sure what to do with it? Don’t force it into a design; instead, maintain a creative outlet such as Dribbble or a scrapbook and save it as inspiration for later.” Matt Crouch Matt is a front-end developer at Vidsy in London. With data-heavy applications, it’s important that they work as planned. In the latest part of his Redux series, he takes a look at how to test…

This issue’s panel of experts

Are you going to Generate NYC 2019?

Generate – the number one conference for web designers – is heading back to NYC on the 24th and 25th of April for another year, bringing with it top class speakers and skill-busting workshops. Last year saw a host of well-known faces including Abby Covert, Amélie Lamont, Brenda Storer, Cynthia Savard Saucier, Dan Mall, Henri Helvetica, Val Head and Wes Bos. This year the trend continues with a keynote from the mesmerising Josh Clark. Josh is a UX design leader who helps organisations build products for what’s next. He is the founder of Big Medium, a New York design studio specialising in future-friendly interfaces for artificial intelligence, connected devices and responsive websites. His clients include Samsung, Time Inc, ExxonMobil, About.com, TechCrunch, Entertainment Weekly, eBay, O’Reilly Media and many others. As…

Are you going to Generate NYC 2019?

Do you need a UX qualification?

Acommon question I get asked is whether someone needs a qualification to take up a career in UX. The reality is that it depends on the person or organisation that’s hiring. It’s an unregulated field that pretty much allows anyone to slap UX next to their existing job title and command a higher wage. While I find it hard to give a clear yes or no answer to this, what I can do is unpack my approach from an employer’s perspective. But I would heavily caveat this with the fact that other employers will see things differently. In my experience as a long-term UX mentor and someone who has hired people for UX roles for web agencies, the BBC and my own business, I have a process when assessing someone…

Do you need a UX qualification?

Jest https://jestjs.io/en Jest is a JavaScript testing framework with a focus on simplicity that works with projects using Babel, TypeScript, Node, React, Angular and Vue. It needs zero configuration, works straight out of the box with most JavaScript projects, it has a well documented API and a host of excellent features that you need to check out. Blobmaker www.blobmaker.app This is an easy-to-use web app that allows users to create, customise (colours/shape) and then download as an SVG. wiv.js https://jjkaufman.github.io/wiv.js What can you do with a

tag? Lots, but can you make them wiggly? Check out this library for a bit of fun. WebsiteVoice https://websitevoice.com Introducing voice offers greater accessibility for users and also convenience. This tool turns articles into audio quickly and easily. Color Koala https://colorkoala.xyz Want to…

TOP 5 UX CONFERENCES FOR 2019

UX Camp Brighton www.uxcampbrighton.org An ‘unconference’ for anyone involved or interested in user experience design, user research, usability, accessibility and more. UX Copenhagen https://uxcopenhagen.com A two-day conference for professionals working with and around User Experience Design set in the Danish city of Copenhagen. UXinsight www.uxinsightevent.com An international UX research conference that gives the community a boost by sharing knowledge, experiences and ideas. UX in the City https://uxinthecity.net/2019/manchester Located in Manchester this is a hands-on, User Experience and Design conference for the web and mobile community. UX London https://2019.uxlondon.com Learn from the authors, founders, directors and designers who are helping shape the industry and push it forward.…

TOP 5 UX CONFERENCES FOR 2019

TOP 5 WEB DESIGN CONFERENCES

UpFront https://upfrontconf.com If you make stuff for the web then this conference could well be for you. Check out the speakers for this inclusive event. Pixel Up https://pixelup.co.za Three days of UX, design, content and research in Cape Town, including 16 speakers and two workshops. Offset www.iloveoffset.com An inspirational, educational and vocational conference for the design industries. There are 100 speakers too to check out. Generate www.generateconf.com The conference for web designers heads back to NYC for 2019. Speakers include UX design leader Josh Clark. See you there. Activate www.activateconf.com A three-day event that looks to build bridges between future and current workforces to increase interest in careers in technology.…

TOP 5 WEB DESIGN CONFERENCES

my360mirror.com Designer: Stella Petkova behance.net/stelfy “Bulgaria-based Interactive Art Director Stella Petkova presents this stunning 3D web shop for a revolutionary 360-degree mirror” Colours Tools WebGL, GSAP, SVG, PayPal Fonts The Graphik font family by Christian Schwartz, and available via Commercial Type, is used exclusively on all site text in Extralight, Regular and Semibold variants.…

Make an animated extending menu

1. Document initiation Start with the HTML document. This consists of the document container HTML tag, containing a head and body section. The head is used to reference the external CSS and JavaScript resources, and the body is used to contain the visible page content that will be created next. 2. Navigation content The example content consists of a navigation container that stores a collection of links. The only exception to this is the first element of the navigation container, which will be used as the interaction icon. Take note of how the navigation container has the 'extend' class applied – this will be used to identify that this navigation is to have the effect applied. 3. JavaScript: link management Create a file called 'code.js'. This step searches for all…

Make an animated extending menu

Game of the Year

gameoftheyear.withgoogle.com Designer: Google Brand Studio blog.google “Google demonstrates its natural speech synthesis technology WaveNet with this entertaining, mobile-first quiz about the year's searches” Colours Tools Google Cloud, Google API, WaveNet, Hammer.js Fonts Unsurprisingly, the site’s text is wholly styled using the proprietary Google Sans typeface developed for the brand, applied here in Regular and Medium weights.…

Game of the Year

Create an animated off-kilter title

1. Initiate HTML document The first step is to define the webpage document with HTML. It consists of the HTML document container, which stores a head and body section. While the head section is used to load the external CSS and JavaScript resources, the body is used to store the page content created in the next step. 2. Page body content The page content consists of three h1 title tags that will show the different variations of the animation effect. While any text can be inserted into these tags, their animation is defined by the names in the class attribute. The presentation and animation settings for these class names will be defined in the CSS from step 5 onwards. 3. JavaScript: search and define Create a new file called 'code.js'.…

Create an animated off-kilter title

Victor Work 19”

victor.work/home Designer: Victor Luis Costa http://victor.work “The portfolio of South America’s Victor Costa showcases not only stellar project work but also an impressive use of technology” Colours Tools WordPress, jQuery, TweenMax (GSAP) Fonts GT Sectra Display font designed by Moiré’s Marc Kappeler and Dominik Huber, plus Noël Leu of Grilli Type, appears in Regular Italic. Helvetica and Helvetica Light by LinoType is a system font that features alongside the classic Times New Roman.…

Victor Work 19”

A title intro image slide effect

1. Page template The first step is to define the web page. While the HTML element represents the page as a HTML document, this is used to store a head and body section. While the head section is used to load the external CSS and JavaScript resources, the body section is put in place to store the visible page content that’s created in step 2. 2. Page content The main content consists of a navigation and two article containers. While the navigation stores links that reference the article containers via their ID, the articles store the content to display for the screen navigation. For simplicity, each of the articles use two span elements to contain text, followed by an image. 3. JavaScript manipulation Create a new file called “code.js”. Javascript…

A title intro image slide effect

who FISHFINGER what Branding, web design, illustration, animation and video production where 4 Bittacy Business Park, Bittacy Hill, London, NW7 1BA web fishfinger.me key clients [1] King [2] WWF [3] The Association of British Insurers [4] Riot Games [5] Google There is nothing typical about Fishfinger: from the design of its website to the attitude of its founder, this agency approaches each project with a fresh perspective that is rare in a design environment where originality can be hard to come by. “The birth of Fishfinger was unusual,” founder and director Richard Salmon explained to Web Designer. “I studied product design at Leeds University, and I’ll be the first to admit that my graphical skills are suspect, to say the least. My interest has always been in the problem-solving aspect…

relaunch 2.0 fishfinger website

THE AGENCY’S new website is the very embodiment of the Fishfinger ethos. Every single member of the team brought their skills to the table to create a seamless, dynamic and exciting website experience. The website brings together creative, illustration, branding, graphic design, UI/UX, animation, web design and user testing to ensure that visitors get the ultimate journey. All websites should instantly engage their audience no matter the industry. In a sea of competitors, if you don’t stand out you will sink. Fishfinger’s approach with this project was no different. The agency wanted to be loud and in your face, going all-in using large, fun and colourful animations, which has become its signature move. Fishfinger likes to surprise people that come back to visit, so users may see an entirely different…

relaunch 2.0 fishfinger website

the insurance experiments: the association of british insurers

IT’S NOT OFTEN that you find the dream client, and probably less often are they in the insurance industry! The Association of British Insurers (ABI) was willing to take a risk and venture away from the usual dull and uninteresting content typical of its industry. The brief was to get the attention of people who had no interest in insurance and get them to willingly learn more about the topic. Fishfinger devised a plan that would prick the consciousness of the public through a social media campaign. The team created a host of often-clumsy animated scientists, who would be the stars of the ‘Insurance Experiments’. They would feature in a wide range of exciting 15 to 20-second animations, each covering a different aspect of insurance. These social media videos encouraged…

the insurance experiments: the association of british insurers

THE TEA CIRCLE began as a collaborative project between the Fishfinger team and a close partner that shared the team’s passion for tea. The brief was to produce a tool that allowed users to create their own bespoke tea blends. As creatives, the team’s thoughts are always set on wanting to invent something that is outside the box – something that has never been done before. They want to create unique experiences that wow, whether through print, brand identity, packaging design or online. This project had it all. To get the creative juices flowing, the team likes to get hands-on with any product they work on, so they bought heaps of loose-leaf tea and started making patterns for inspiration. After lots of playing around, they discovered that arranging the individual…

RULE 1 DESIGN FOR USERS

Falling in love with ‘good’ ideas is easy. Too easy, in fact, and seemingly harmless until we realise that it’s not love at all – it’s infatuation, and infatuation inevitably fades with time. This is what causes freelance designers to constantly redesign their portfolio; they’re motivated by their temporary infatuation with visual aesthetics rather than the user’s needs. Thankfully, figuring out whether or not ideas have user-value (or at the very least, business-value) isn’t too difficult. It revolves around asking users two core questions: • “Do you want this?” (asked during user testing) • “Can you use this?” (asked during usability testing) Not very romantic, we know, but at least we won’t end up wasting resources and time designing the wrong thing (or the right thing in the wrong way).…

RULE 1 DESIGN FOR USERS

RULE 1 PROVIDE CRYSTAL CLEAR CLARITY

When users become confused, a number of things happen. They become stalled, they trust our brand a little less, and most importantly, they hit the back button, never to return again. Sadly, we live in an increasingly impatient world, where a cheaper, faster, better alternative is always right around the corner. Users cannot be taken for granted, so being clear is an absolute must. But, what exactly do we mean when we say clarity? Let’s take a look at a few examples. COLOUR Colour is one of the many ways users learn how to use and understand how an interface works. Where it’s human nature to recognise rather than recall, colour is subtly one of the most recognisable aspects of everyday life, despite colour meaning different things in various cultures,…

RULE 1 PROVIDE CRYSTAL CLEAR CLARITY

RULE 3 GIVE USERS CONTROL

As humans, we haven’t yet evolved to mind-read, and given the endless options that some apps and websites offer, that’s a shame. Let’s take eCommerce stores for example, which often have a ton of items in a ton of categories. On top of that, items can be further distinguished by defining features such as colour. This means that search results are often further narrowed by filters and tags, requiring more interactions than the average interface, but that that’s not a bad thing, and this doesn’t get mentioned enough. Users want to customise their experience. THE BENEFITS OF CONTROL A holidaymaker isn’t just looking for an Airbnb, they’re looking for their Airbnb; the home that’s going to make their holiday special in a way that no (or not very many) other…

RULE 3 GIVE USERS CONTROL

RULE 4 PREDICT THEN ADAPT

Hick’s Law states that the time it takes to make a decision correlates with the amount of choices the user has to make — too long, and the user won’t make a choice at all. This kind of cognitive overload is known as analysis paralysis, the act of not being able to make a choice when there are too many options. Let’s take a look at two ways to reduce choices. CONTEXT Luckily, by keeping layouts minimal, both conceptually and visually, we can help users make decisions faster, and thus increase the likelihood of conversion. But, is this a task easier said than done? After all, it can be quite difficult to force an element to take the back seat in favour of something else, especially when said element is…

RULE 4 PREDICT THEN ADAPT

RULE 5 MAINTAIN CONSISTENCY

Consistency has long been a key element in branding, but consistency also contributes heavily to user experience as well. Brains are designed to learn mental shortcuts, right up to the point where we don’t even realise we’re doing it. When traffic lights turn green, we don’t analyse the situation and then make a conscious decision to accelerate, we just do it instinctively. Now imagine that one day, the typical green, yellow, red setup was replaced with Go, Get Ready and Stop. You’d be taken aback for sure, and even if just for a few seconds, you’d contemplate what the hell is going on before accelerating off. Problem is, these few seconds are critical when it comes to design. Users simply expect things to make sense, and can quickly become frustrated…

RULE 5 MAINTAIN CONSISTENCY

RULE 7 COMMUNICATE VALUE PROPOSITION

Boring form? “YOU’RE STEPS AWAY FROM HAVING AN ACCOUNT!” Value isn’t understood subconsciously, it has to be communicated and consciously understood. As human beings, we constantly look for instant gratification, and at the surest sign that there isn’t any, it’s all too easy to close the tab and move on. When we think value proposition, we think about the product itself, but if we can remind the user of the positive outcomes of even the most boring interactions, the sense of fulfilment is higher. Don’t get me wrong, we’re never going to convince users that forms can be fun, but a little encouragement can be the motivation the user needs to keep going. If the user feels like you want them to stick around, they’ll want to stick around.…

RULE 5 TREAT USERS AS CUSTOMERS & VICE-VERSA

Wait, aren’t users and customers the same thing? A user is somebody that uses the app or website, but some users are also customers (ie they pay us for something). Others – well – we just wish they were customers, because at the end of the day, money is the nutrition businesses need to stay alive. But what happens once a user becomes a customer? Do we stop caring about them? Well, actually, many companies do exactly that – sell the product, abandon the customer, and then acquire new customers because it’s much cheaper to do so than it is to take care of current customers. It’s a method labelled ‘Churn and Burn’. Here’s why that’s really bad business for most businesses: • Consumers often experience anxiety about their purchase…

DESIGNING LUSH’S TILL SYSTEM

in the past year, we have rolled out our new till system to over 100 UK Lush stores. As a result, our shop managers have seen reduced staff training times and greater efficiency in processing payments and refunds. We continue to refine and improve the UX, with collaboration and feedback from Lush staff. THE CHALLENGE As a design team, we were tasked with creating an intuitive new interface for the Android-based point of sale (POS), along with the back office administration web views, where both shop staff and business managers could generate and read sales reports. 1 UNDERSTANDING We needed to work out the issues that our staff members were having with the current systems, so by auditing the interface and the information architecture of the existing point of sale…

DESIGNING LUSH’S TILL SYSTEM

20 TOP UX TOOLS AND RESOURCES

CURSOMIZER https://cursomizer.com Created as a tribute to user interface pioneer Douglas Englebart, this site project from KIRKDESIGN invites UX designers to build custom mouse cursors. By tweaking various graphical properties across shape, colour and visual effects, visitors can prototype various options, test and even share their selections with colleagues by copying a link. AXURE RP www.axure.com A commercial rapid prototyping application for Mac and PC, Axure RP allows designers to sketch, wireframe and prototype UX projects using intuitive drag-and-drop editing. Broader features add flow diagramming and animation support, plus team collaboration tools including a cloud-based Axure Share facility for sharing published prototypes across devices. MOCKFLOW https://mockflow.com Describing itself as a UI and UX planning suite, this online application requires no download and enables designers to quickly brainstorm their user interface…

20 TOP UX TOOLS AND RESOURCES

7 STEPS TO A SOLID UX STRATEGY

1 DEFINE YOUR STRATEGY Before you start planning your strategy, it would make sense to understand what it entails and whether or not you actually need one based around the user goals and business strategy. But investing in a UX strategy makes sense and businesses that do so enjoy increased ROI and enhanced productivity, as well as reduced product development risk. 2 RESEARCH AND LEARNING Research would be the very first thing any UXer should start with. A well designed strategy is founded on a bedrock of data-driven research and will give you a clear idea of ‘who, what, why, when and how’. Research can be done using two types of methods – quantitative and qualitative. Qualitative methods tend to be stronger for answering ‘why’, while quantitative methods do a…

7 STEPS TO A SOLID UX STRATEGY

DO YOUR RESEARCH

The saying goes, if you’re not doing research, then you’re not doing UX. Basically, user research is the comprehensive and multi-layered activity whose aim is to collect information about the potential target audience of the product. The user researchers collect and then analyse the information obtained from real users, and this outcome usually allows the UX design team to work on the optimal solutions that will make the product user-friendly, less problematic and more attractive. The research can be done by many ways, but offering user surveys (quantitative) doing face-to-face interviews (qualitative), creating personas and organising focus groups, are the most popular ways and will return the most useful data. Even though research will weed out potential issues, it should also be remembered that removing the mistakes in design, even…

DO YOUR RESEARCH

SKETCHING FOR UX

Despite living in a very digital world (where there’s an app for everything), sketching still holds a ton of value. In fact, when it comes to ideation, no other method is faster. Sketching can come into play at any stage in the UX workflow, although when we think sketching, rough ideas are usually what come to mind as they offer a quick and easy way to iterate through various low-fidelity ideas in a short space of time – although there’s no reason why sketching can’t be used for mid-fidelity design too, so long as collaboration isn’t an issue. THE FOUR-STEP SKETCH TECHNIQUE Arguably the best sketching technique, the four-step sketch involves taking notes, sketching initial ideas, iterating over the best idea, and finally, storyboarding this idea as a means of…

SKETCHING FOR UX

STORYBOARDING FOR UX

SIMPLE SKETCHES Eventually, one idea will begin to stand out, and this is where storyboarding comes into force. In order to user test our solution with a real audience, we’ll need to create an interactive wireframe; but, how many screens do we need? What exactly do these screens need to show? Remember, our sketches are just that — simple sketches, but an interactive wireframe, while still relatively low-fidelity, will demonstrate the various screens and functions needed for the user to carry out their objective. A storyboard helps us decide how many screens are needed, and the functionality of each one. PROBLEM SOLVING Additionally, we need to conceptualise the why as well as the how. Why does the user need our app or website? What problem does it solve? Where storyboarding…

STORYBOARDING FOR UX

SKETCHNOTE ARMY twitter.com/SketchnoteArmy Sketchnote Army is an eye-catching showcase of sketchnotes and sketchnoters curated by Mike Rohde, Mauro Toselli and Steve Silbert. JAKE KNAPP https://jakeknapp.com/sprint Knapp helped co-create the sprint methodology, which heavily features sketching and storyboarding to help teams quickly validate cool ideas. RACHEL KRAU twitter.com/rachelkrau Rachel Krau is a user experience specialist at Nielsen Norman Group, and often tweets and retweets about storyboarding. RAZA SHAH www.instagram.com/lexshah Designer Raza Shah often shares sketches, insights and wireframe timelapses on his Twitter and Instagram accounts. KRISZTINA SZEROVAY twitter.com/krisztaszerovay Krisztina Szerovay runs sketchingforux.com, a weekly newsletter, and often tweets about UX sketching on Twitter.…

DESIGN AND THE BOTTOM LINE

The screen has become the most important place in the world. Today, whether you are a bank, a hotel chain or a clothing company, you are also a technology company, and the primary touchpoint between you and your customers is digital. In this context, design has become a key differentiator in the battle for hearts, minds and wallets – and as a result, many companies have begun to invest in their design practices. Some are seeing impressive results. According to The New Design Frontier, a global study recently released by InVision, the organisations that have mastered design have seen outcomes that go far beyond just product usability and customer satisfaction to positively impact bottom-line metrics. Ninety-two per cent of the companies that ranked at the highest levels of design maturity…

DESIGN AND THE BOTTOM LINE

A WEEK IN THE LIFE OF A UX DESIGNER

DAY 1 On Mondays I typically arrive in the office at about 8.45am. I’ll start the day by consulting our UX Design Trello board to see what projects the team are working on for the coming week. Our designers sit as a central function to the Lush Digital team and work across multiple product squads. As the squads work in two-week sprints, each designer may be juggling a number of projects at any time, and it makes sense to have a central place where we can keep track of our top-level tasks. I’m working across two squads at the moment so will attend short daily standups for both of these at 9.30 and 10.00am, usually making sure the engineering teams have everything they need to push forward with their tickets.…

A WEEK IN THE LIFE OF A UX DESIGNER

Build prototypes with Adobe XD

In contemporary web and app design there are often times when the interaction doesn’t open a whole new page or screen. The modern approach to creating interactive content requires transitions between design interface elements so that the user is surprised and wowed by the experience of changing content. This all happens on the same screen or page, without a refresh. Designing these kinds of interactions and refining them to work properly can take time, but it’s worth doing before writing your code. This is what Adobe XD has spent the last few months of development getting right. Create content in one state on one screen, move that content to the new state on the new screen and simply choose the ‘Auto-Animate’ option to transition. All the content that is the…

Build prototypes with Adobe XD

Working with responsive design

If you are designing web pages then it’s always difficult to design for different screen sizes. Adobe XD understands that designing modern web pages means designing for different screens. By default the Responsive Resize option is turned off for an artboard. Turn this on when you want to resize your artboard. It’s usually a good idea to make a copy first for the different-sized screen. XD does a pretty good job of resizing your content, but if anything doesn’t stay together that should then simply group those elements. After resizing, you can manually adjust anything that isn’t to your liking, which makes it much faster than most other design programs to convert a design from screen to screen.…

Working with responsive design

Test on a device

Your final testing of the app is not just limited to testing on the desktop – your prototype can also be tested on a device to get the right kind of feel for how it will look on the device. First of all, download the Adobe XD app from your device’s respective app store, then connect the device to the computer with a USB cable. Click on the small mobile phone icon in the top right of the XD interface. In the panel that pops out you should be able to see the name of the device and, provided you have the XD app running on that device, you will be able to see and test prototypes. It’s also possible to avoid using a USB cable and transfer via the…

Test on a device

Master wireframing in Sketch

Whether you’re new to user experience design or you’ve been active in the field for years, you will have no doubt heard of wireframes. For the modern designer wireframing is an essential step in translating a concept for a digital product into reality. With any wireframe clarity is key. By only taking into account the essential components needed at an early stage of the design you can guarantee that the resulting wireframe will have a huge impact on the outcome of the final product, as you’ve only concentrated on what’s important. By only using the core components for your design – header, footer, navigation, buttons – to begin with, you can always ensure that your focus is on the user, without getting distracted by a design direction or font family…

Master wireframing in Sketch

Collaboration & sharing

Sketch’s cloud feature is an online presentation of your pages and artboards in one location. Anyone can sign up to use Sketch Cloud to view, download and comment on Sketch files that have been shared via a URL generated by Sketch. To upload and share your wireframe, click on the Cloud icon (it could be hidden behind the >> icon in the tab), sign up with an account and upload your designs to the Sketch Cloud. From this point onwards your link will remain the same, so if you make any future amendments to your work just click the cloud icon and click Update in the share pop up to push through your changes. The dashboard on the cloud is pretty self-explanatory, with prototypes, artboards and symbols available to view…

Collaboration & sharing

10 tips for better online forms

As users we generally don’t enjoy filling in forms online. This is down to a number of reasons. Forms tend to be time-consuming – we are already thinking about the product or service that waits beyond the thank you page, and we want to get there as quickly and easily as possible. Forms often seem complicated, and the increased cognitive load they put on us makes completing the actions even harder. And then of course there is the risks and issues around personal data. Everyone is now much more aware of GDPR – and anyway, why do you really need to know my birthday for me to sign up for this service? Forms are the key touch point between our users and us, so it is odd that they tend…

10 tips for better online forms

10 TIPS FOR A BETTER PORTFOLIO

1 TELL A STORY Working with a client or stakeholder on their product is a fascinating story. You and your team of heroes face a challenge; an unresolved point of tension – your client’s product is failing and its users are suffering. Using your complementary skillsets, will your team successfully navigate business constraints, timelines and technical debt to save the day? There lies the potential for a wonderful story arc – be the conduit for that drama, detailing the highs and lows, and ensuring you grab the reader’s attention. 2 MAKE IT VISUALLY COMPELLING The work we do is visual: users make sense of the products and services we design through our explicit visual hierarchies and relationships. Granted, great UX is more than eye-catching buttons and slick interactions, but taking…

10 TIPS FOR A BETTER PORTFOLIO

HOW TO GET INTO UX DESIGN

It’s a great time to get into UX. In the last decade or so, UX has grown from an occupational backwater to a highly valued role within any customer-first organisation. They’ve never been more in demand, with everyone from startups to large multinational companies recognising UX’s ability to transform customer experiences and deliver organisational change. So if you’re thinking about nabbing your first job in UX design, there’s a few things you should do. First of all, you’ll want to understand the nuances of UX job titles. In a typical ‘UX Designer’ role you should expect, above all, to be an advocate for human-centered design processes. You’ll be responsible for gathering user pain points, wireframing solutions and testing them with your users. You’ll see roles like ‘UX/UI Designer’ or ‘Product…

HOW TO GET INTO UX DESIGN

HOW TO ACE A JOB INTERVIEW

UX interviewer is nearly always looking A for three things. First and foremost, they’re looking for evidence that you’ve participated in a human-centered design process. HCD encourages teams to place users at the heart of any problem-solving process, popularised by design studio, IDEO. For junior roles, an awareness of what makes an ideal user focused process should suffice; for more senior designers they may be looking for evidence that you’ve designed and facilitated this process, both with the team and stakeholders. They’re also looking at your ability to problem-solve. Are you able to show evidence of having taken a business problem, identified a user pain point and found a way to resolve both? At a more senior level, can you problem-solve at a process and relationship level? Building empathy for…

5 ONLINE UX COURSES

SUPERHI https://bit.ly/2tcvOXE A collection of user experience design short courses where users learn best practices. GENERAL ASSEMBLY https://ga.co/1p1AC7V Ten week part-time courses or a one week accelerated course for gettting started in UX. UDEMY https://bit.ly/2BpbK8C A collection of courses covering different levels and different areas of UX. INTERACTION DESIGN FOUNDATION https://bit.ly/1VviLc3 Online and self-paced UX Design courses with meetups and instructors. UX TRAINING https://bit.ly/2DdApgG Learn UX Design and get a diploma with classroom, online and in-house training.…

5 ONLINE UX COURSES

5 EMERGING DESIGN TRENDS IN 2019

1 VOICE USER INTERFACES (VUIs) Voice user interfaces (VUIs) allow the user to interact with a system through voice or speech commands. Virtual assistants, such as Alexa and Siri, are common examples of VUIs today. The way users interact with voice user interfaces is very different to graphical ones, so you may quickly find yourself unsure of how to create great user experiences for VUIs. The intricate nature of user’s conversing with a VUI means a designer needs to pay close attention to how easily a user might overstep with expectations, because individuals normally associate voice with personal communication. 2 STORYTELLING FOR A MORE MEMORABLE EXPERIENCE From a consumer’s point of view, UX design is no longer a unique selling point, it’s now an expectation. Humans become engrossed in stories…

5 EMERGING DESIGN TRENDS IN 2019

Write tests for React-based Redux apps

Tests are a great way to be confident about the code that gets written. It is not always possible to review every page and state in an application after each change. When something gets updated, we can run the tests and see if anything unexpected has been broken in the process. Unit tests are the building blocks of most test suites. Each part of an application is broken down into bitesize pieces that can be tested on their own. When a single piece changes, we only need to re-run the unit tests related to that piece. Redux is a collection of those pieces. Actions, reducers and selectors all come together to move data around an application. They are built as pure functions, which enables them to both be connected together…

Write tests for React-based Redux apps

Testing connected components

When combining components with Redux we make use of the ‘connect’ method, which passes in state and ways to update that state. There are a couple of approaches we can take to test these components. One way is to test the component as a whole. As we are exporting a connected component, our tests must wrap everything in a component to supply the store. This makes it difficult to interact with the component itself, and an error in any of these layers – including those supplied by Redux – will fail. An alternative approach is to export all the parts separately. The component and the mapping functions can be passed example data and tested in isolation. The connect method is not tested, as this is solely part of Redux.…

Testing connected components

What is code coverage?

Tests are designed to cover every condition a codebase can be in. This not only includes when things go right but also when things go wrong. What happens if the server responds with an error or supplies unexpected data? Testing frameworks often provide coverage-checking tools to see which lines of code are executed by at least one test. For example, when running tests with Jest using the ‘--coverage’ flag, it breaks down exactly what tests are currently covering and where to improve. The aim is to have 100% code coverage. Everything in Redux is built using functional concepts, which makes all aspects easier to test – only data that is passed to a function will affect the test. While 100% coverage does not mean the project is bug-free, it goes…

What is code coverage?

HOSTING LISTINGS

“Premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK” 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 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 single server to fully customised data centre suites, we focus on the IT solutions you need.…

HOSTING LISTINGS

COURSE LISTINGS

“No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks” 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 their course around your life with their 24-week part-time bootcamp. Their internal career support team will help find you work as a developer, setting up interviews with your choices of Northcoders Hiring Partners across the north of England. What we offer • Full-time: Fast-track your career in just 12…

COURSE LISTINGS

Free with magazine

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 • 50 AI gradient duotone actions from Sparklestock (www.sparklestock.com) • 16 Minimalist business card mockups 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 digital Download only the files you want, when you want All your gifts,…

Free with magazine

BEST HOT NEW DESIGN TOOLS

WORK WITH WEB SPEECH API Learn how to speak into an interface to fill out forms or transcribe text REDUX-FORM MASTERCLASS Components and tools made to work with Redux for validation, formatting and data structure CREATE IMPRESSIVE TEXT EFFECTS Introduce simple but effective animated effects to text headlines to engage users and visitors 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 286 on sale Tuesday 2 April 2019 SUBSCRIBE TODAY Go to page 28 to learn more…

BEST HOT NEW DESIGN TOOLS

In This Issue

Description

Details

Reviews

Recent Digital Issues Browse all

Recent Web Designer Digital Issues Browse all back issues

Web Designer (Digital) Subscription August 1st, 2019 Issue

Web Designer (Digital) No. 286: $5.99

Web Designer (Digital) Subscription July 1st, 2019 Issue

Web Designer (Digital) No. 285: $5.99

Web Designer (Digital) Subscription June 1st, 2019 Issue

Web Designer (Digital) No. 284: $5.99

Web Designer (Digital) Subscription May 1st, 2019 Issue

Web Designer (Digital) No. 283: $5.99

Web Designer (Digital) Subscription October 1st, 2019 Issue

Web Designer (Digital) No. 292: $5.99

Web Designer (Digital) Subscription September 13th, 2019 Issue

Web Designer (Digital) No. 291: $5.99

Web Designer (Digital) Subscription September 5th, 2019 Issue

Web Designer (Digital) No. 290: $5.99

Web Designer (Digital) Subscription September 1st, 2019 Issue

Web Designer (Digital) No. 289: $5.99

Web Designer (Digital) Subscription August 25th, 2019 Issue

Web Designer (Digital) No. 288: $5.99

Web Designer (Digital) Subscription August 15th, 2019 Issue

Web Designer (Digital) No. 287: $5.99

Web Designer (Digital) Subscription August 1st, 2019 Issue

Web Designer (Digital) No. 286: $5.99

Web Designer (Digital) Subscription July 1st, 2019 Issue

Web Designer (Digital) No. 285: $5.99

Web Designer (Digital) Subscription June 1st, 2019 Issue

Web Designer (Digital) No. 284: $5.99

Web Designer (Digital) Subscription May 1st, 2019 Issue

Web Designer (Digital) No. 283: $5.99

Web Designer (Digital) Subscription October 1st, 2019 Issue

Web Designer (Digital) No. 292: $5.99

Web Designer (Digital) Subscription September 13th, 2019 Issue

Web Designer (Digital) No. 291: $5.99

Web Designer (Digital) Subscription September 5th, 2019 Issue

Web Designer (Digital) No. 290: $5.99

Web Designer (Digital) Subscription September 1st, 2019 Issue

Web Designer (Digital) No. 289: $5.99

Customers Also Viewed

Web Designer (Digital) Subscription November 1st, 2019 Issue

Web Designer (Digital)

No. 293: $5.99

The Essential Guide to Advanced Photography Magazine (Digital) Subscription November 3rd, 2014 Issue

The Essential Guide to Advanced Photography Magazine (Digital)

The Essential Guide to Advanced Photography 2: $3.11

Pokémon Go: Augmented Reality Guide Magazine (Digital) Subscription September 30th, 2016 Issue

Pokémon Go: Augmented Reality Guide Magazine (Digital)

Pokemon Go: Augmented Reality Guide 2016: $3.11

Reviews