Web Designerの No. 286 の目次

Tools you can trust You need to design a new site and app for your latest client. What tools are you going to use? Every designer has their go-to collection, but there are always new tools and frameworks appearing on the web that will make your design life easier and more productive. As the web evolves, so should your arsenal of tools. “PWAs & SPAs give developers the capability to elevate web performance, while Performant Design gives designers the tools to craft engaging app-like user experiences ” This issue we bring you a host of the latest, greatest and newest tools that you should add to you current collection. Carl Cahill (page 46) has put together a list that will improve any designer’s workflow. Included in the lineup are some…

Ah, personalisation, a mainstay of most digital project briefs. Ubiquitous in the agency world and almost as misunderstood as UX itself. Ask anyone working in a digital agency what it is and you’ll likely get a nod of recognition but difficulty in pinning it down. All they know is the client wants it, so they’re delivering it. I believe that personalisation is something designed and implemented by the website, app or software — as opposed to customisation, which is a set of choices given to users to personalise their own experience. So why is personalisation regularly on the agenda? Is it something that users expect? Or is it simply that personalisation works? When you dig deeper into the topic, it becomes clear that it isn’t a given and it doesn’t…

PROJECT NAME Nomadic Tribe 2019.makemepulse.com AGENCY  makemepulse makemepulse.com @makemepulse PROJECT DURATION 3 months NO. OF PEOPLE INVOLVED 6 NAMES & POSITIONS Louis Ansa Creative director Manon Jouet Art director Pierre Lepers Lead developer Dorian Lods Developer Florentin Monteil Developer Juliette Desbois Producer The notion of a ‘vanity project’ in professional terms could be frowned upon too easily on the surface. If you Google its general definition, you’ll find that Urban Dictionary.com uses a home improvement analogy to explain the phenomenon. But rather nicely, it also shoots a hole through how it might be to apply instead to web design. While true that undertaking an optional non-commercial project for yourself is likely costly, when it’s do-it-yourself it’s not all that ‘vain’ at all. Plus, as our story this time illustrates, some…

1994 Ollie Leggett founds IE. No of Employees: 1 1999 IE creates its own first website, built in Macromedia Flash. No of Employees: 4 2002 IE merges with a small digital consultancy to provide website and multimedia services for clients. No of Employees: 6 2004 To formalise the merger, IE registers as a private limited company. No of Employees: 7 2009 IE builds its first Drupal website for Christian charity BMS World Mission. No of Employees: 10 2010 IE nails its colours to the mast, specialising in the Charity, Health and Education sectors. No of Employees: 10 2010 IE decides to build a team of brand and digital consultants – not sales/ account managers. No of Employees: 10 2015 Current IE management team is established. No of Employees: 20 2019…

1 RESPONSIVE BY DESIGN InVision Studio boasts its ‘best-in-class’ layout engine, allowing you to quickly and easily design, adjust and scale your vision to fit any screen or layout automatically. 2 PROTOTYPING Creating fluid interactions exactly how you want them is insanely good. Your prototypes will be high-fidelity, and you have an incredible amount of control over your animations and transitions. 3 COLLABORATE Studio’s connection to the entire InVision platform means instant collaboration for your whole team. Share components and designs with other designers and receive pinned comments from clients.…

1 BUILD INTERACTIONS There’s an insane amount of control and possibility with building interactions in Origami. If you imagine how you would independently create a horizontal scroller in your prototype, you’d be scratching your head in most tools. Not here. 2 ADD LOGIC Again, most design tools don’t have this kind of power. You can create interactions and simply insert ‘or’ statements to help change the flows of your design. Great if you’re technically minded. 3 TIMED ANIMATIONS You’re not fixed to transitions — you can create a number of looping and timed animations with your design. Let’s say you want something to happen or repeat when you load a screen up; you can use this feature to achieve this.…

Getting data out of a React form is not a straightforward task. The most common approach is to use controlled components – fields that have their values written to component state, which would then pass the state back when the form submits. While this approach works, it can get complicated very quickly. Having to write change handlers for each field is one thing, but other features such as validation or formatting have to be done separately and updated in parallel. One of Redux’s great benefits is that there is one application-wide state accessible anywhere it is needed. If we were able to access the form data at any point in the application, it opens up many different possibilities for future interactions. Redux Form is a package that supplies all this…

Classic JavaScript testing frameworks saw the light in a different time and age: Addy Osmani had barely started work on his collection of object-oriented programming patterns, while large frameworks such as Angular or React were unimaginable. Back then, ‘simple’ case-based comparative engines worked well enough — checking the output of a computational engine or a bit of glue code does not require much thinking. The Jest developer team is a strict adherent to the idea of zero configuration. This makes the framework easy to bring up as long as a package manager like NPM or YARN is available. Another aspect is the wide-ranging extensibility, which makes adding new functionality to the framework a breeze. Finally, Jest integrates itself into various version control systems like Git and Mercurial. This process is…

• MINIMUM TAP TARGETS Ensuring a minimum tap target of 44—52px ensures enough space is present between tappable elements, reducing the margin for errors and time spent correcting them. • MINIMUM FONT SIZE Easily readable text ensures quick processing and faster task completion for users. Google’s recommendation for body text is 16pt, a requirement echoed in their Lighthouse rankings when penalties are applied to web apps with too much text below 16pt. • COLOUR CONTRAST Text and symbol clarity is also important. Google includes it in the Lighthouse accessibility audit. Web apps that fail to apply clear contrast between text and background colour see penalties in their lighthouse score, and slow users down in their attempt to process and proceed with the relevant information.…

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. What we offer • Managed hosting – A full range of solutions for a cost-effective, reliable, secure host. • Cloud…

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 • 24 AI Dice Art Photoshop actions from Sparklestock (worth $14) sparklestock.com • 10 Inception-style Photoshop actions from Sparklestock (worth $14) • 109 Abstract smoke art brushes from Sparklestock (worth $6) 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 The home of great downloads – exclusive to your favourite magazines from Future! Secure and safe online access, from anywhere Free access for…

Data, AI, CX and personalisation are all elements that can help build a brand, but how important are they? How can they help in 2019? Adobe’s report offers 49 pages of insight and information, and here, we pick out the highlights to enjoy and absorb. Over 12,500 marketers, creatives and IT professionals were surveyed for the report. Of these, over 55 per cent of marketers were going to prioritise better use of data, and all surveyed were looking to take greater control of customer privacy. Some of the key insights from the reports revealed this — ‘companies that are succeeding are delivering first-class, personalised customer experiences built on a foundation of integrated marketing and CX technology’. More interestingly, ‘the most dominant theme emerging from this year’s research is the importance…

“We ended up modelling things, texturing them, animating them, changing the model and tweaking the elements many times,” Louis Ansa recalls when quizzed on Nomadic Tribe’s toughest moments. “It was without a doubt the main challenge we encountered between the design and the technical team, but luckily we ended up smoothing things over and finding our specific workflow. The texturing was a huge part of the project, and in my opinion it really adds something to the project.” This work would finally lead on to the actual production of the assets and also the excitement around undertaking the first phases of prototyping. The team were hugely anticipating that, and seeing how concept interactions would play out in reality, especially with engagement so important to the brief. “The main interactions of…

sexwise.fpa.org.uk Sexual health charity FPA needed a distinctive brand and mobile-friendly website for its new campaign, funded by Public Health England.IE Digital created everything from the campaign’s name, the tone of voice and messaging, to the new logo and visual identity. This was brought to life online with a mobile-friendly Drupal 8 website. IE carried out extensive stakeholder research and mapped the user journeys for various user personas. The website design took a mobile-first, rapid prototyping approach to create an intuitive user experience. The final site was built in Drupal 8 and looks beautiful on all devices, especially mobiles. The critical piece of functionality was the contraception comparison tool. The different types of contraception can be filtered by method, type and effectiveness, as well as whether they protect against STIs…

Public Health England (PHE) commissioned IE Digital to design and build a ‘kitemark’ system to drive up healthcare professional confidence in health apps. The market was flooded with over 230,000 mobile apps claiming to benefit health and wellbeing, which the public was mostly eager and willing to embrace. However, healthcare professionals were understandably cautious about recommending and endorsing specific apps. The NHS needed to win the confidence of clinicians to realise the potential health benefits and financial savings promised by new technology. As part of Workstream 2 of the National Information Board (NIB), IE Digital was tasked with helping PHE put an assessment process in place for health apps. IE held co-creation workshops with key stakeholders from bodies including MHRA, HSCIC (NHS Digital), NHS England and NICE. IE took an…

1 ANIMATION TIMELINE Taking control of transitions and animations in your design will really help achieve custom effects. The timeline will give you that opportunity. 2 SHARING It’s so simple to share your prototype with Proto.io. It’s great to see a community of Proto.io users sharing their work, and providing insightful ideas and suggestions. With your projects, sending a direct link to your project couldn’t be any simpler. 3 USER TESTING ‘Isn’t this what prototyping is all about?’ Test your prototypes all in one place, but also utilise a number of user testing partners for some serious testing.…

27 Text Block • textblock.io A javascript tool for adjusting size, leading and grades to cast continuously responsive typography. 28 Grid Lover •gridlover.net Fiddle with the font size, line height and scale factor sliders — then watch the typography dance. 29 Lunar Popup •lunar.atomui.com Every Popup is beautifully designed, coded in html/css and seamlessly animated — ready to use on your website. 30 Material Design •material.io/design Material Design is a visual language that synthesises the classic principles of good design with the innovation of technology and science. 31 Cloudflare Colour •cloudflare.design/color View a number of colour combinations in situ. This is super helpful in finding accessible colour combinations. 32 HTML Templates •htmltemplates.co Here’s a bucket load of html templates to get you kickstarted with quick projects. 33 Primer •primer.style GitHub…

When it comes to animating with SVGs, one major turn-off can be the idea of getting bogged down in JavaScript libraries. However, this doesn’t have to be the case. CSS can handle selecting individual paths within an SVG to create effects. Just knowing the basics can mean that it’s possible to turn flat, cliched icons into something a little more impressive. So perhaps it’s time to run through the fundamental steps of SVG optimisation and animation. When integrated into different designs, it doesn’t take long to realise that the possibilities are endless. 1. Create and save First, create an SVG to work with. For this tutorial, we will be using a simple graphic made in Illustrator. When using Illustrator to export an SVG reduce the size of the artboard to…

By using the Performant Design techniques mentioned above, designers can take control of user perception and ultimately make the web feel faster and more engaging. If the latest updates from Chrome Dev Summit are anything to go by, it’s that it’s the web, not native apps that continues to monopolise momentum — at least within the Google development team. Progressive Web Apps are becoming the flagship of mobile web development, and as the technology moves forward, their ability to benefit larger screens looks set to open the gates for a wave of PWA across all screens. As this wave gathers momentum, Single Page Apps gives developers the ingredients to accelerate PWAs with app-like instant transitions. Add frictionless user experiences through Performant Design, and therein lies a recipe for hyper-performant, best-in-class…

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

01. Les Ensembliers ensembliers.com No simple rollover effects here. Choose a link and admire the full-screen show. 02. Borraginol town borraginol.com/town Illustrated animations bring to life scenes with smart pop-ups for more information. 03. Oranjbitter oranjebitter-rotterdam.nl image-splitting kaleidoscope-style effects grab the users’ attention and keep them engaged. 04. Shallou allyourdays.com Animated text effects and subtle but smart image effects add ambience and interest. Graphics OZ bit.ly/2Hr6ntC Freelancer illustrator André Ducci has a style that is hard to resist. Check out his gorgeous illustrations. Colour picker Blooming brilliant bit.ly/2EVaYBc Typesetter Bebas Neue Pro bit.ly/2THCCLr The classic tall font now has lower case characters, making it even more desirable than before. WordPress Janice janice.neptunetheme.com A clean, simple classic blog style with plenty of home page layout options.…

HTML Graph codepen.io/YusukeNakaya/pen/vvPqeZ A simple animated pie chart graph that reminds us of Pacman. Makes good use of the transform and animation properties. Modify to get different animations. Character design codepen.io/akhil_001/pen/xBLeme Built with CSS variables, the cute character’s colour can be changed to suit your hearts desire. Click and choose another colour to suit your taste. Tribute to Ken Perlin #3 codepen.io/soju22/pen/ywXrQx A shifting ball of circles and bubbles that allows users to interact with the cursor. A host of controls are available to customise the appearance. Pseudo 3D text codepen.io/funxer/pen/KBmRoZ A floating, dot-matrix style 3D text that slowly moves around and hypnotises the user. Add your own, and then run it to see the new text in action. PICKER RING codepen.io/rpsthecoder/pen/PLbmyN A colourful icon-driven selector that looks great, and…

A standout feature in its own right, the audio work for Nomadic Tribe is crucial, elevating the experience. The sound effects, music and narration track really heighten the immersion and amounted to a project in itself. “Once we had enough materials and a definitive script for the narrative voiceover, we worked with Loïc from Press Play On Tape, a talented sound designer we always work with on our productions,” begins creative director Louis Ansa. “It is always a pleasure to partner with him and luckily for us, he is also a huge fan of Moebius’ work!” That working knowledge and creative kinship for what makemepulse were proposing meant Loïc came on board immediately. He would end up giving the team valuable input into finding the right voice actor to play…

“Finding the right tool is less about your own skill level, and more about what your project needs. I find it is best to be comfortable with a variety of tools, know their feature strengths and understand what can be utilised to produce your project efficiently and top its truest output”Carl Cahill Founder & Creative Director of OutRoared http://outroa.red 1 InVision Studio •invisionapp.com/studio Many UI designers will love InVision Studio, especially if you’re already using InVision with tools like Sketch, as there’s quite a bit of crossover in features. However, Studio’s power lies in the prototyping department. This new tool by InVision is paving the way to be the only UI tool you’ll need, and will help you create beautiful interactive interfaces with a bucket-load of features. Features — like…

Attention Grabbers Rollover links are a great way to grab the attention of the user. Always try to do something unusual and original. Middle Child has a great effect, seldom seen elsewhere, that captures each letter and splits them apart with animation. It’s a delight to the user. Rollover effect A lot of the links on the site have a fun rollover effect, where each letter splits apart and rotates slightly through animation. The underline also animates off to the right. Rollover menu Each menu item on screen changes and highlights as the user rolls over. The picture to the left of it changes and updates accordingly. Happy service The smiling face logo at the top of the page looks towards your mouse to see where you are moving. This…