netの February 2018 の目次

Case studies The best introductory books I’ve found are This is Service Design Thinking by Jakob Schneider and Service Design: From Insight to Implementation by Andy Polaine, Lavrans Løvlie and Ben Reason. They are both heavy on case studies, which really drives home the value and impact service design can offer. Holistic approach I’d also strongly recommend The Best Service is no Service by Bill Price & David Jaffe. This book uses a design thinking approach to improve customer services; reviewing the whole service holistically to reduce unnecessary customer contact and improve overall satisfaction. It’s an excellent example of service design in practice. Service Design Jams The best way to learn about service design is, however, trying it out. Service Design Jams are a lighthearted introduction to the field, with…

BEYOND PIXELS As a web and graphic designer, who happens to be in charge of my company’s social media as well, I spend a lot of time in front of a screen. I love what I do, and the hours I spend creating the perfect layout or crafting the perfect webpage hardly feel like work at all. The screen, however, takes a toll on me as I am prone to migraines and wear glasses full-time. When I feel like a relaxing, creative outlet but need time away from the glow of a computer or phone, I turn to crocheting. I can still create, choose colour palettes, start from nothing and end up with a beautiful design, and get a screen break at the same time. It keeps my hands busy,…

Opinions, thoughts & advice Digitally Enabled Physical Experiences, or what we call DEPE Design, is characterised by a more intentional blending of digital and physical worlds. This is not just adding an augmented reality filter to an app, but thinking about experiences from the ground up and how to orchestrate digital and physical moments that truly create enhanced experiences. The Wizarding World of Harry Potter at Universal Studios Hollywood is a perfect example, featuring cutting-edge projection mapping technology, stateof- the-art lighting as well as 360-degree surround-sound audio. The high-tech labs seen in films like Minority Report and Iron Man also serve as the most approachable uber-example. To get your arms around DEPE Design today, here are examples of several new design ingredients essential to blending physical and digital boundaries. DIGITAL…

https://www.femmefatale.paris Femme Fatale is a creative studio focusing on culture, luxury, editorial and art. It defines itself as “somewhere between sophistication and simplicity”, which is perfectly reflected on the website, especially when you look at the typography, colours and the layout. There are two web fonts used on the page – SangBleu and Messina Sans Regular. They go together pretty well, adding an elegant and sophisticated feeling to the website. To explore Femme Fatale’s works, you just need to click on the splash page and voilà – you can see the projects’ names. While navigating through them, make sure that you pay attention to the animation (moving letters) while scrolling – it creates a very cool effect. The site is fully responsive and works very well on mobile devices. Its…

OCTOBER 2014 Incorporated Kickpush Ltd in the UK. APRIL 2015 Rented a flat in London with the team, made it our office and started our operations from there. SEPTEMBER 2015 First client trip in New York with the whole team. APRIL 2016 Got a real office in Second Home in Shoreditch, London. JUNE 2016 First VR breakthrough and beginning of The Economist project. NOVEMBER 2016 Revealed our VR design process to the world at The British Museum and impacted the design industry for the first time. DECEMBER 2016 Our first unplanned Express Product Design project – the beginning of a new era for Kickpush. JANUARY 2017 Decided to become location free and discover the world individually while doing what we love. OCTOBER 2017 Mexico trip with the Trippin crew, designing…

Conversational UI is nothing new; Kubrick recognised end point AI in the 60s. Hal was a single interface who knew everything relevant to its users and brought many systems together in one place. Despite this, some companies are still churning out FAQ bots and calling them AI. I’d encourage you to immerse yourself in what’s out there on the subject of conversational UI and try to create meaningful experiences that push the boundaries and advance the medium. If you’re stuck, here are some useful resources that should act as a good starting point. Bot Framework website https://dev.botframework.com One to keep bookmarked in your browser. The Bot Framework is in preview mode, so expect regular changes or updated content and intermittent bugs. Designing Bots (O’Reilly) http://shop.oreilly.com/product/0636920057741.do A great primer for those…

You may be lucky and work with a company that recognises the importance of incorporating accessibility into its email code, but there’s no need to give up if your company doesn’t quite see the point. There are a number of clear arguments you can make for why it’s needed, which we share with you below. Firstly there’s the moral issue. If you’re a good person you don’t want to block anyone from accessing content. “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect,” said Tim Berners-Lee, the inventor of the World Wide Web. Then there’s the stats. If a bug is found in Gmail that’s a top priority to fix, as it currently has a 22% market share. Even a…

In addition to not being able to copy styles as CSS, Android, Objective-C or Swift code, there’s also currently no way to extract exported image assets from the handoff window, or display commonly-used colours as specified in the Adobe XD colour chooser widget. Although, it’s probably a safe bet on this functionality being included in a future update soon, considering how lean Adobe XD’s iterative software development process has been thus far. What you can do now though, is inspect styles, copy style values to the clipboard, and measure the spacing between layers. You can measure the distance between two objects by clicking on one object and hovering over another. This works exactly like Smart Guides, but without the need to hold Alt/Option. All in all, the Design Spec features…

Until recently, the process of writing HTML and CSS was slow and switching contexts from design to code made for a frustrating experience. It made sense that lots of designers (myself included) fell back to what we were most familiar with – design software – that would enable us to express our ideas with as little friction as possible. Static comps don’t make the transition to code in quite the right way, however, because we’re not designing where our work is being viewed. However, the introduction of functional CSS has finally made it possible to design in the browser in a way that’s more intuitive for those of us used to design software. Writing HTML with small, composable classes is very much akin to selecting a font size from a…

What will the web look like in 12 months’ time? That’s the million dollar question. As web designers and developers we are obsessed with the latest trends and techniques – the need to stay on top of our game is a strong and necessary urge in such a competitive industry. With that in mind, we’ve asked six professionals at the top of their game to tell you what’s going to be hot in 2018. Bold typography, animated logos, data visualisation and invisible interfaces all feature heavily. Turn the page to find the biggest trends for 2018 as revealed by leading lights Chris Gannon, Matej Latin and Mike Brondbjerg et al. Elsewhere, Pocket App’s Design Director Jake Davis runs down the trends that will shape app design in the next 12…

What’s going to be the biggest trend in web design next year? I think animation is going to be big. Tools like Framer, Origami and Principle have appeared in a surge and allow designers to quickly mock up animations and interactions to really lift a UI. What’s exciting you personally in web design right now? That technology is enabling us to be much more creative. CSS Grid is really shaking up how things can be laid out on the web, and then other techniques like masking and ‘initial-letter’ mean that we can be more creative with typography. Harking back to my uni days where I focussed on Flash, I also love that movement and animation is becoming part of my role again. In your opinion, what sort of stuff are…

LOUIS LAZARIS Which dev tools should you be using in 2018? Louis, the owner of Impressive Webs and curator of the Web Tools Weekly newsletter, reveals all on page 60. w: impressivewebs.com t: @ImpressiveWebs DAVID ARAGON Inspired by his Generate London talk in 2017, David expands on his role as a prototyper at Netflix to tell us how the entertainment giant picks the UI designs that millions use every day. Head to page 68 right now! t: @davidmaragon AGA NAPLOCHA Creator of The Awwwesomes and front-end designer at Adobe, Aga runs down her favourite sites of the month on page 40, including a standout site from Anton & Irene. w: aganaplocha.com t: @aganaplocha MARK ROBBINS Email guru Mark shows us some of the main issues with accessibility in HTML emails and, more…

LORISS A SHEPSTONE Senior designer at Being Wicked lorissashepstone.com LITMUS Sometimes designing for email can be tedious when the CEO of your client is using Outlook 2002, and everyone else is using Gmail. Litmus makes it really easy to preview and test your emails before they go out into the world – a major time-saver. litmus.com WHATFONT I’m a bit of a typeface addict so the WhatFont Chrome extension is perfect for me. WhatFont allows me to easily find out what fonts are used on a webpage, which is brilliant for when I see a font I really like, or need to match a font for a client. whatfontapp.com CREATIVELIVE I’m always looking to learn more about design, photography, and business in general. CreativeLive is a great resource for free,…

Did you study ICT at school? When I was in secondary school around 20 years ago, computing was a particularly difficult subject to promote and teach. But surely this has changed with digital technology all around us, not to mention the government’s vision that the UK should be a leader in the digital world? According to the media, it hasn’t. I’ve read several news articles recently about the poor state of computing in education, all with consistent themes: concerns around low entry levels into computing subjects and diversity of the students, along with fears these subjects are becoming a lower priority for schools and the subject is just too difficult to teach. I decided to do a little investigating of my own to find out if this is the case…

AGA NAPLOCHA Aga is a designer and front-end coder at Adobe. She’s co-founder of The Awwwesomes – a non-profit organisation teaching how to do awwwesome web things. t: @aganaplocha “This site is playful and simple, taking advantage of basic shapes to create a survey language and allowing users to filter through the results.” DANIELLE MARIMOTO, EXPERIENCE DESIGNER AT ADOBE VIDEO, SOUND EFFECTS, JAVASCRIPT ONE SHARED HOUSE http://onesharedhouse2030.com One Shared House 2030 is a website documenting a playful research project by Anton & Irene and SPACE10 that aims to get insights on the future of co-living through a collaborative survey. The information collected is open-source, free for anyone to use, and completely anonymous. “Early on in the process we had decided [to make] the entire experience feel like an homage to…

Sublime design & creative advice THIS MONTH FEATURING... This month... ADVENTURE TRAVEL PROFILES JAMES KIRKUP James is a designer with over 10 years experience, known for The Football Crest Index. w: www.james-kirkup.com t: @james_kirkup TIM MAGGS Tim is an award-less visual and interactive designer but his mum thinks he’s great. w: timmaggs.co.uk t: @timmaggs JAMES WHARF James is the creative director at Victor Agency based in Leeds, UK w: https://victor.agency t: @victor_agency BRIEF This issue we’d like you to design a website for a fictional adventure travel company that offers interesting experiences. It can specialise in something such as hiking, or offer a broad range of adventures for different tastes and abilities – it’s up to you.…

Adventure4 is a website aimed at those looking for holidays with a difference; bespoke experiences crafted in unique locations across the globe by the best in the business. Design-wise, less is more! Empathy is at the heart of design, so the focus is on the beautiful, striking photography to inspire users. Descriptions are key to exhilarate the user, creating real want and desire. The user interface is minimal with plenty of white space to aid focus. Only key information is displayed on landing pages. More details are found on the specific experience pages. Colour is also kept to a minimum, used sparingly where appropriate for separation and to represent the tone of the brand. Taking inspiration from Airbnb, best in class at what it does, my goal was to create…

Svelte (https://svelte.technology) is one of the more interesting new UI frameworks. Rich Harris, a graphics editor on the New York Times’ investigations team, is the creator of Svelte. We asked him a few questions to see why it might be an option for developers in 2018. What does it mean that Svelte is the “magical disappearing UI framework”? Svelte solves the same problems as tools like React, Vue, Angular and so on, but it does so in a radically different way: it takes your single-file components, written in HTML, CSS and JavaScript, and compiles them to tightly optimised code with no runtime framework dependency. You get all the advantages of a component-oriented, state-driven approach, but with zero bloat. What advantages does Svelte offer over frameworks like React and Vue? Apps…

View source files here! All the files you need for this tutorial can be found at http://netm.ag/302-chatbot-files ABOUT THE AUTHOR WEZ MAYNARD w: www.wezmaynard.com t: @wez ob: Head of performance UX & digital product, Vertical Leap http://principleformac.com UX, design and conversational UI There’s no denying that the chatbot revolution is in full flow. Companies are finally realising that conversational UI can be a tangible part of their marketing strategy and, most importantly, that it can have a positive effect on their bottom line. What’s really clear, though, is that this particular revolution is actually slowly crawling on its belly, rather than exploding in the way the digital media would have us believe. Quick to the market, bot builders have given users the tools to have a bot up and running in…

ABOUT THE AUTHOR MARK ROBBINS w: rebelmail.com t: @M_J_Robbins job: Senior email developer at REBEL areas of expertise: CSS, HTML, email HTML email is one of those things a lot of web developers really dislike working on. The most common complaints heard are that it’s very complex and very restrictive. Another area where you can hear exactly the same complaints is accessibility. So combining the two and making HTML email accessible has got to be hugely restrictive and massively complex, right? Well, a little bit of knowledge in both areas can go a long way, so we’re going to go over a few of the basics. ACCESSIBLE DESIGN AND CONTENT The implementation may vary but the general rules and best practice for accessible design and content are the same, be it…

The Tachyons website (tachyons.io) is the best place to find information and documentation about the project. Perusing the source code on GitHub should also be high on your list. The Tachyons library is written in many small modules, which is fantastic for understanding how it is put together. At the beginning of every Tachyons module is some helpful documentation that tells you exactly how to use it, broken down by base, modifier, and media query extension. If you’re in a hurry there are two ‘cheat sheets’ that I find helpful in my day-to-day work. The first, Tachyons Cheatsheet ( https://roperzh.github.io/tachyons-cheatsheet) by Roberto Dip, is a fast way to find the class you’re looking for. Tachyons tldr ( https://tachyonstldr.now.sh/#/scales) by Varun Vachhar does an excellent job of visualising Tachyons’ type and…

At Wix, we believe that the web should be fun. The digital space is pretty much like a playground - a place where you can free your creative mind, coming up with endless ideas. But like in every game, there are rules to follow. In the ever-changing world of web design, you need to keep up-to-date with the trends. More importantly: you need a platform that gives you the creative freedom to put them into life. Millions of web designers trust Wix when it comes to creating the website that’s right for them and their clients. Thanks to stunning design effects, top-notch professional features and a hassle-free coding interface, you too can invent without limits. We wish you a good read and hope you’ll find in these pages the inspiration…

Typography is one of those forgotten arts that needs to be revived for the web. In my opinion, in the world where everyone can create content and everyone does typography, everyone should learn how to do it well. Does that mean including it as part of the school programs? Perhaps. But at the moment that feels far away. On the bright side though, people who know how to do web typography well will stand out from the ones that don’t. So it’s a great way to set your work apart and move away from the grey shades of mediocrity. Richard Rutter’s Web Typography and my own Better Web Typography for a Better Web are two resources that can help web designers learn about web typography and how to do it…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... LILY DART Lily is design director at the UK’s Department for International Trade. She specialises in designing a clear and informed strategy for services and digital products. w: lilydart.com t: @lily_dart NADIEH BREMER Nadieh is a freelance data visualisation designer and artist. Her projects include both web-based, interactive visualisations, frequently using storytelling techniques to show insights into complex data. w: visualcinnamon.com t: @NadiehBremer QUESTION OF THE MONTH What would you recommend to someone trying to learn how to create data visualisations? Riley Wilson, San Diego NB: Create them! Making lots of visualisations is the best way to learn about which visual shapes fit which types of data, about technical/tool skills, about colours and perception and more. Start simple – pick a chart someone else made and…

SKETCHING INTERFACES Airbnb is developing a product that uses machine learning and its established design system to generate working prototypes instantly from hand-drawn sketches. “The time required to test an idea should be zero,” says the author of this post, and this technology is close to achieving that. https://airbnb.design/ sketching-interfaces DEALING WITH WIDE GAMUT DISPLAYS So far it’s been possible to get away with not understanding colour management, but things will change with the arrival of wide gamut displays – you need to do some learning to make sure your designs display correctly on these screens. This article explains what you need to know https://bjango.com/articles/ colourmanagementgamut THE WEB BEGAN DYING IN 2014 André Staltz explores how web power dynamics have shifted in favour of just three companies: Google, Facebook and…

PHOTOSHOP Photoshop was a firm favourite, with several respondents using it as a first port of call. @petebarr described his process like this: “Sketch/PS export, to ImageAlpha for PNGs, then ImageOptim or gulp-imagemin for all raster images. SVGs via gulp-svgmin. If using WordPress you can also add WP Smush Pro for uploaded images.” AUTOMATION Automating optimisation is a good call. @netrunnerIT uses “Drupal image styles, coupled with imageapi_optimize module and the resmushit web service to do it all automatically on upload”. For @_danelder, grunt-contribimagemin does all the images as part of the build. “The SVG plug-in is excellent,” he adds. TINYPNG “Tinypng.com is a great, quick, resource to optimise images quickly.” says @Candorem. “Don’t let the name deceive you; it works with jpg too!” This was seconded by @sgolubev and…

Big question SHANE OSBOURNE Lead frontend developer, JH wearejh.com React Native. It’s actively developed by Facebook; there’s a release every month. It uses modern tooling – so we get to use the latest version of JS, as well as other cool features like hot-reloading. We get to write JavaScript. Ninety per cent of the code is shared across the iOS and Android platform – there are just a handful of situations in which platformspecific components are needed. And it’s not just a web view wrapper: React Native gives higher performance and tighter integration with the host platform than other tools. SALLY LAIT Digital transformation consultant sallylait.com As a habitual over-user of tabs, this year I discovered the Chrome extension Toby (gettoby.com), which is a way to create collections of links,…

kickpush.co INFO Location: London, Lisbon… wherever you fly us Established: 2014 Team size: We don’t operate with full-time staff but we’re a team of four Expertise: UI design, UX design, branding Clients: The Economist, The School of Life, WeWork, Norwegian Airlines if you want the big names. And about 50 other startups Awards: We’re not in the awards game Does an agency really need to be based around an actual physical studio? Today’s tools make it easy for teams to work together regardless of where they are, while the cost of maintaining a workspace in a clientfriendly location can take a big chunk out of your bottom line. It’s no surprise, then, that many studios are choosing to operate along more distributed lines and take advantage of the flexibility such…

14 DECEMBER 2016 We receive a call from Merete Busk asking us if we would be interested in meeting Simply Chocolate, who she was already helping. 2 FEBRUARY 2017 We meet Simply Chocolate and present our proposal – they want us to create something spectacular! 14 FEBRUARY 2017 We have an internal kick-off where we decide to create something very spectacular indeed. 24 FEBRUARY 2017 First design presentation. Two directions shown and the client likes the more safe one, but we convince them to steal from the more progressive one. 1 MARCH 2017 Photoshoot of the bars and wrappings… we ended up recreating a lot of it digitally. 12 JULY 2017 Photoshoot of ingredients done in our own office in a light box with primitive but effective tools and a…

In this list of 50 tools we included one called CSS in JS Playground (https://css-in-js-playground.com), which lets you fiddle around with most, if not all, of the CSS-in-JavaScript solutions available today. Many long-time CSS developers will tend to shy away from using these libraries because they go against the long-held tenet called Separation of Concerns. However, those building and using these libraries make a strong case for why these are beneficial to large-scale development. For example, in his talk at React Amsterdam (https://www.youtube.com/watch?v=bIK2NwoK9xk), Max Stoiber explains that developers should be thinking in terms of components, not documents. This helps solve problems that are inherent in CSS as a language, which amounts to using only the good parts of CSS and discarding the bad parts. These include global styles, styles that…

Testing email is a complicated enough procedure. Chad White wrote a blog post that estimated: “Every email that marketers send has approximately 15,000 potential renderings (and that’s using conservative math).” Then if you add the layers of accessibility testing into that, you’ll very quickly get overwhelmed. So the best advice is to simplify it. Test everything in the browser first then you can use standard web accessibility tools like the WAVE Evaluation Tool and aXe browser extension as well as a screen reader. Also, if it works in the browser and you have a View Online link, you know you’re covered for edge cases. Once you’re satisfied with the browser version, try an email testing tool like Litmus or Email on Acid. Both of these will return a large number…

ABOUT THE AUTHOR DANIEL SCHWARZ w: https://mrdaniels.ch t: @mrdanielschwarz job: Design editor at SitePoint, founder of UX Tricks areas of expertise: Interface design, UX, design tools After much anticipation Adobe finally released version 1.0 of Adobe XD, although some designers felt this was a bit strange because the beta already felt like a mature design application that we’ve been using for years. Version 1.0 debuted having already introduced Symbols (among other important features), and both the Prototyping and Repeat Grid features have been around ever since Adobe XD first launched, setting a new standard for what all UI design apps must now have by default. Now, after only two months since version 1.0 was released, Adobe XD is already beginning to trial Design Specs (beta), which is an extension of the…

ABOUT THE AUTHOR w: https://foredesign.co t: @dperrera job: Partner at Fore Design areas of expertise: Design, front-end development When I first came across Tachyons and saw its seemingly inscrutable classes like f1 and pa3, I’ll be honest and say that I hated it. If you’ve been writing CSS for a while, you’ll probably find that you have exactly the same gut reaction too. Frankly, if you’re a developer trying to translate a designer’s comp into a real website, this might not be the right approach for you. However, if you’re a designer looking to work in the browser or a developer who wants to ease your design team into working in code, Tachyons may fundamentally change your design process, exactly like it did ours at Fore Design. WHAT IS TACHYONS? Tachyons…

CONTACT US To advertise here, contact our sales team: +44 01225 68 7832 chris.mitchell@futurenet.com FEATURED HOST “We have several servers from Netcetera and the network connectivity is top-notch - great uptime and speed is never an issue. We would highly recommend Netcetera”  Suzy Bean EXPERT TIP CLOUD TECH TIP... If you’re going to fully utilise cloud technology, before deciding on a service provider, ask whether monitoring comes as standard and whether management is included in the price. A fully managed cloud can make your business fly; an underutilised cloud will be a waste of money. Netcetera provides hosting from one of the most energyefficient datacentres in Europe, all powered by green energy. It offers everything from reliable low-cost hosting for a single site right through to complex cloud racks and…

A List Apart https://alistapart.com A List Apart explores the design, development and meaning of web content, with a special focus on web standards and best practices. You’ll find articles here from some of the leading lights of web design (Rachel Andrew, Aaron Gustafson and Laura Kalbag etc), and you’re sure to find a host of great inspiration for the year ahead. Creative Bloq www.creativebloq.com For art and design inspiration, our sister site Creative Bloq should be number one on your list of bookmarks. You’ll find all the latest web design and development news, as well as highlights from previous issues of this very magazine, and cuttingedge advice on all the latest trends, tools and technologies. Sidebar newsletter https://sidebar.io The place to go for all your daily web design news, Sidebar…