Table of contents for No. 285 in Web Designer

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.…

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.…

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…

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…

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…

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…

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…

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 <Provider> 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.…

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…

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 <div> 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…

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.…

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'.…

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…

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…

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…

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…

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…

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.…

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…

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…

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…

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.…

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…

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.…

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…

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).…

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…

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…

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…

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…