netの July 2017 の目次

BEYOND PIXELS Keeping fit and having an active mind is something I strive for, be it heading down a mountain bike trail or running the length of a football field to make a key match decision as a football referee. The majority of people always ask why I referee. The truth is I don’t know and I sometimes question that myself! I am currently a level-four referee, officiating in games from local amateur to the higher leagues of the Evo-Stik. I have also been lucky enough to officiate in the preliminary rounds of the women’s and men’s FA Cup and Vase games. I have taken part in an array of games as an assistant referee with the howling crowds behind me and in a field, in the freezing cold, with…

Imagine an infant that’s learning how to walk. This child is trying to learn something that you’ve done your whole life, minus a few years. How would you react? Most would offer encouragement and excitement. This infant is taking a big step (ha!) in their development. But imagine someone reacting like this: “Come on! It’s easy. Obviously you just move your legs back and forth!” That sounds pretty ridiculous, right? That would be discouraging the child by making it seem like they should already know how to walk. Now think about the last time you taught someone how to use WordPress or write JavaScript. Think about the last tutorial that you read. I’ve been using WordPress for 14 years; a lot of its functions and terminology are second nature to…

INFO Job: Writer, designer and educator t: @fehler w: tinybooks.org In the sixth article in my ongoing series exploring the design of business, I’ll explore the role that influencers – well-connected thought leaders – can play in sharing your story and ensuring your launch goes smoothly. With an audience established, the final piece of the jigsaw before launch is to establish a list of key influencers to contact to ensure word-of-mouth momentum. By connecting with others who have a greater reach than you, you can supercharge your launch, ensuring your unveiling is successful. Without getting too lost in theory, an understanding of ‘diffusion of innovations’ – or how ideas spread – is helpful at this point. Everett Rogers, a communication studies professor, popularised the theory explaining how, why and at what…

COMMUNITY CENTRES PROFILES DIN BISEVAC Din Bisevac is the founder of dino.agency, a digital product design studio in Germany w: dino.agency t: @DinBisevac JOANNA KOSI?SKA Joanna is a freelance graphic designer with experience in web, print and visual identity w: joannakosinska.com t: @JoannaKosinska MEGAN EGAN Illustrator, designer and 3D artist Megan is currently working at Imaginate Creative w: meganegan.com t: @megan_egan BRIEF The challenge is to design a website for a community centre. We’d like you to consider the personality and demographics of the area: is it alternative and trendy or traditional? Is the area deprived or affluent? Think about how to reflect this without excluding anyone.…

SEPTEMBER 2011 Antoine and Jimmy meet NOVEMBER 2011 First project together: Jimmy’s portfolio FEBRUARY 2012 First award on FWA FEBRUARY 2015 First brainstorming about Waaark MARCH 2016 Launch of the studio with the first e-shop project for Alix B d’Anthenay MAY 2016 Launch of Waaark’s site JULY 2016 Waaark picked as site of the month in net magazine’s summer issue SEPTEMBER 2016 New work for Melville Design retail store, a website and an e-shop OCTOBER 2016 Waaark gets new clients in the US, with Box and The Peak Beyond projects DECEMBER 2016 Waaark nominated for site of the year on CSS Design Awards and Awwwards MA RCH 2017 Waaark wins the Communication Arts 2017 interactive competition…

How the Johnson Banks website came to be (1) One of the initial concepts was based around an unusual interactive narrative that didn’t resemble a standard website. In an effort to have the best of both worlds, a standard website was added into the menu. (2) Initial proposals focused on a verbal approach inspired by the ‘rebus’ – an age-old device where words are substituted with pictures or symbols. (3) Early concepts centred around images in coloured boxes. We felt that the Work page was stronger than the homepage, so in the next stage the homepage became more like the Work page. (4) The pastel shades didn’t feel strong enough, so in the next round we experimented with colours drawn from each piece of work. (5) Cropping into images and…

Things were not looking good for our search app. The long list of pain points recorded in customer service logs had team members losing morale. As is typically the case, upper management invested in a visual redesign of the user interface as a panacea. However, after the first few months of the design sprints and numerous committee meetings, it was obvious to all that the underlying system of the app needed to be completely overhauled. This was the perfect opportunity for the userexperience team to rally everyone from the project team together across all disciplines through participatory service design methods. By joining forces, they could recognise the current ecosystem and reimagine what it would take to overhaul it. The initial sessions got everybody together in a conference room jointly defining…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... THOMAS PARK An expert on web development, interface design and user research, Thomas works in human-computer interaction and computing education at Drexel University in Philadelphia. w: thomaspark.co t: @thomashpark CHRIS THELWELL Chris is a design leader in the UK and Australia specialising in disrupting markets, creating innovative products and building design teams. w: christhelwell.com t: @christhelwell QUESTION OF THE MONTH Will CSS Grid degrade gracefully in older browsers that don’t fully support it? Stephen M, Liverpool, UK Squaring up CSS Grid enables you to lay out page items in rows and columns As hyped as we are that CSS Grid has landed, only one third of browsers currently support it. Neither Internet Explorer or Edge follow the current specification, and you only have to go back…

Commercial awareness: why is client asking for a particular feature/ process/change? Not just graduates, though! @RichardCarter People straight from school/university treat work like doing an exam - i.e. abc problem has xyz answer, and asking for the answer. @_LeonBrown People skills. Selfmotivation. Not asking enough questions. Asking too many questions. General office behaviour. @nonswearyphil Solid research skills, including data analysis. @WorldofKnight Listening and observation, collaboration (not just graduates though), empathy (again, not just graduates). @antz29 Humility, wisdom, and patience. @bmeeks24 Knowledge of vulnerabilities and associated mitigations. @JezD7588 Humility, drive and empathy. @Benjieboo Trust in their ability to make decisions. @Candorem…

PROBLEM SOLVING Problem-solving abilities were a theme in our responses. @undiminished identified a lack of, “confidence dealing with clients to find out what their users need vs what the client asked for,” as an issue. He’s looking for people who can work out how to, “solve real vs perceived problems.” DECISION-MAKING For @Candorem, decision-making abilities are key, and they’re something that the formal education system fails to teach: “Anyone can learn techniques from tutorials online, but what makes someone truly valuable is being able to take an idea and fully explain the decisions that need to be made and why. Beyond that, how to determine if a decision made a positive or negative impact on the end product and what can be learned from it.” THE FUNDAMENTALS “Foundations,” said @mikeriley131.…

dsgn.io ATOM A good code editor is hard to find. Even if you find a great one, there’s always something that you’ll want to tweak. That’s why I love Atom – I can customise my coding environment to be perfect for me so I can focus on getting things done. atom.io HYPER Terminal for macOS is great for what it does but could always be better. I discovered Hyper, a Terminal emulator that makes use of plugins to increase productivity. Multiple windows in a single tab certainly makes my local development neater! hyper.is FEATHERS.JS Feathers is a super easy way to get started with making real-time API-based web apps. The framework itself is minimalistic and based on Express. It works with any database you can throw at it and is…

Have you ever thought you could talk about UX, design or development in public? In this article, we’ll give you some reasons and tips to make this year the one where you stop talking about talking at an event and actually make it happen. Every spring we hold a one-day ‘un-conference’ for people involved in UX, user research, interaction design and other related fields. The event is run in a bar camp style, and through the day we have about 50 presentations, workshops and discussions put on by attendees. Many of the presenters are first-time speakers. All of them survive. Speaking in public can seem daunting and scary as much as it is rewarding and fun. To encourage you to give it a go, we asked speakers at this year’s…

INFO Job: UI Engineer, Digital Ocean w: unakravets.com t: @una net: You’re clearly as talented a visual artist as you are a technical programmer. Has that helped or hindered your career development? UK: *me blushes* The answer to this is the classic: it depends. Anywhere that it really matters, such as in my work and the products I build, it absolutely helps. Having multiple skill sets allows you to have unique perspectives and understand the bigger picture. However, in a hiring environment, companies still don’t really know what to do with hybrids, so you don’t really end up being able to leverage your skills to their full potential. net: We’re loving your CSS experiments, such as travels.surge.sh. Are these mainly done for fun, or are they a fundamental part of…

ALEX BROOKE Alex is the Senior User Interface Designer at international retail brand Debenhams. She is also a cat lover. London based. w: alexy.me t: @alexbrookey “Documentation, communication and collaboration are the keys to building a successful design system” (@e3_media) CSS ANIMATION, FONT AWESOME, BRANDING FRONTIFY frontify.com Frontify is a forward-thinking design tool that was devised to allow designers to easily create digital style guides, keep track of digital assets and more. The people behind Frontify say, “Frontify is the brand management platform for the digital age.” Frontify has recently undergone a major site refresh, having smartened up its UI - it has now adopted a clean, modern design style throughout, which also includes a pop of colour that brings the brand personality to life in a distinctive, eyecatching and fun…

waaark.com INFO Location: Paris and Strasbourg, France Established: May 2016 Team size: 2 Areas of expertise: Web design, UI/UX design, motion design, illustration, development Clients: Box, The Peak Beyond, Fauns, Melville Design, Alix B d’Anthenay Awards: Communication Arts magazine 2017 Interactive Annual Competition winner, Best Breakthrough Studio 2016 by CSS Design Awards, 4x Site of the day on FWA, 11x Site of the day on Awwwards, 12x Site of the day on CSS Design Awards Antoine Wodniack and Jimmy Raheriarisoa first worked with each other in 2011, and last year they got together as Waaark, eschewing the traditional studio setup and each working in their home cities. Since then they’ve made a name for themselves with bold and innovative websites, picking up a pile of awards along the way. We chatted…

Better Web Type Better Web Type is an easy-to-follow web typography email course for web designers & web developers. betterwebtype.com Typography inspector Typography Inspector is a Chrome plugin that analyses the typography on your site and helps you improve it. https://chrome.google.com/webstore/detail/typography-inspector/mbbnlbimlnfachlfnjnolpehiimhbjjm Combining typefaces by Tim Brown Tim Brown’s pocket guide to combining typefaces is an essential part of studying web typography. It’s available free as a PDF. https://typekit.files.wordpress.com/2016/04/combiningtypefaces.pdf…

Looking for more official resources for service design? Below are established and industry-based organisations, tools and subject matters that can help you begin promoting service delivery thinking: Service Design Network (SDN) service-design-network.org The network is used by private and public organisations alike, and offers community knowledge, a subscriptionbased journal, case studies, videos and recommended academic materials. Service Design Tools servicedesigntools.org This is an online archive of methods in diagrams and deliverables formats that can be used for generating service blueprints, user journey maps and other service design artefacts. Ethnography A discipline that describes social settings as experienced by users. It reaches an understanding of the needs and practices of people that can be second nature to them and not articulated enough sometimes due to time, space or resources constraints. This…

ABOUT THE AUTHOR ANDREA GIAMMARCHI w: medium.com/@ WebReflection t: @WebReflection job: SW architect and engineer Areas of expertise: JS, Full Stack Web Development, and IoT Before describing what’s new, incredibly simple and exciting on the horizon, let’s remember the main reason virtual DOM was created in the first place: Manual DOM manipulation is messy and keeping track of the previous DOM state is hard. A solution to this problem is to write your code as if you were recreating the entire DOM whenever state changes. Of course, if you actually recreated the entire DOM every time your application state changed, your app would be very slow and your input fields would lose focus. Taken directly from the original virtualdom libraries (github.com/Matt-Esch/virtualdom# motivation), I believe we can all agree that manually targeting…

Gary Cooper, Cheshire CT: Prototyping is perhaps one of the most important parts of the design process. With prototyping we can test ideas with users, we can be wrong, we can learn, but most importantly of all we can do this quickly But choosing the right tool can make or break the outcome. Be sure to ask yourself these three questions: WHAT DO YOU WANT TO LEARN? Want to test if you have the flow through a process right? Look at tools like InVision or Marvel. Want to know if users can complete an online form usefully? You’ll need tools like Axure or a real coded prototype. WHAT RESOURCES DO YOU HAVE? If time’s short, explore quick paper prototypes (you can use InVision or Marvel to turn these into clickable…

INCLUSIVE COMPONENTS DESIGN Accessibility expert Heydon Pickering breaks down the principles of inclusive design and applies them to different website components, making the information available for your particular situation. He describes the site as, “a blog trying to be a pattern library,” with each post proposing a more robust and accessible version of the component under scrutiny. inclusive-components.design LEARN CSS GRID No doubt learning CSS Grid is somewhere on your to-do list. To get you started, Jen Simmons has compiled this list of the best resources on the web for doing that, kicking off with the excellent work of Rachel Andrew, which includes screencasts and a website full of examples. jensimmons.com/post/feb-27-2017/learn-css-grid THE HISTORY OF THE WEB If you feel nostalgic for the early days of the web, you can indulge…

INFO job: Senior web dev & accessibility advocate at Deque Systems w: marcysutton.com t: @marcysutton If you’ve never met an accessibility specialist, you might imagine them to be severe and intimidating people, ready to pounce on the slightest transgression of accessibility standards in your web designs. Happily, in our experience, that’s far from the case. Almost everyone we’ve ever met in this sphere has been engaging, charming and just all-round nice – and web developer and accessibility advocate Marcy Sutton fits right in to that mould. Currently living in Bellingham, Washington, and working as a senior frontend engineer at Deque (pronounced ‘Deecue’) Systems, which specialises in automated tools for testing the accessibility of websites, Sutton is a beacon of upbeat positivity and easy-going charm. And that’s no coincidence. Her sunny disposition,…

INAYAILI DE LEÓN PERSSON Lead web designer, Canonical canonical.com Working in web design has taught me that I shouldn’t assume anything based on what I think or know. Some recent studies show that the degree to which most people (ie, people who don’t make websites for a living) understand the web and how to use it is nowhere near what we web professionals do. I think that the best advice I can give is to make no assumptions. Just because something is obvious and simple to you doesn’t mean that it’s equally easy to grasp for people you’re building stuff for. JOE ZEFF President, Joe Zeff Design, Inc. joezeffdesign.com I’ve learned that people have ridiculously short attention spans, requiring digital solutions that are both tasty and nutritious. Tasty in that…

What’s on your desktop? A 38-inch monitor, a Canon 7D, two lenses, a Corsair Strafe RGB Silent MX, a sketchbook, an iPad and some tools for drawing. What do you have on the walls? Two pixel art posters, a wall clock, and a handmade triangle shelf for my toys. What will you do for lunch? Get a burger, French fries and a Sprite. What hours do you work? The day starts at 9.30am and finishes at 7pm, with an hour for lunch at 1pm. What else do you do in the office? Watch TV, play guitars or play video games (including VR). How often do you all hang out? Well, we don’t live in the same city so hanging out is a bit complicated. But we meet on online games…

OCTOBER 2015 Johnson Banks devises information architecture and writes brief following a period of research into competitors’ sites NOVEMBER 2015 BONG is appointed, initial meeting held and work starts on first concepts DECEMBER 2015 BONG presents range of initial ideas, but none seem to hit the mark JANUARY 2016 BONG presents the concept for the accepted solution FEB 2016 BONG delivers initial proofs of concept in the form of lean prototypes APRIL 2016 BONG delivers a more refined prototype that integrates actual content from the CMS build SEPT 2016 BONG re-factors the entire build, and includes About section. Content migration from previous site begins OC T 2016 – JAN 2017 BONG re-factors the site for a third time, and content population is completed DEC 2016 – MAR 2017 Cross-platform testing…

“In the new computer age, the proliferation of typefaces and type manipulations represents a new level of visual pollution threatening our culture. Out of thousands of typefaces, all we need are a few basic ones, and trash the rest.” —Massimo Vignelli One of the greatest visual communicators, Massimo Vignelli, made a career by only using six typefaces, and he produced a lot of graphic design work in his life. For him, all the many typefaces presented noise and pollution. He saw them as distractions – meaningless trends that come and go. His view was quite radical, but I think he had a point. There are so many typefaces out there that it can be hard to know how to separate the good from the bad – and believe me, there…

ABOUT THE AUTHOR TIMOTHY SMITH w: theboldreport.net t: @smithtimmytim job: Designer and developer areas of expertise: Front-end development, product design, and Star Wars CSS Grid Layout is growing in browser support every day and, dear reader, it is my pleasure to inform you that we can ship CSS Grid to production. Now, I’ve only been working on the web for about ten years but the quick adoption of CSS Grid has been the first time I’ve seen something like this happen. Before we get to what we’re making today, let’s clear a couple things up first: CSS Grid is not a replacement for Flexbox. It’s not even a replacement for floats. In fact, you might realise that we’ve been using Flexbox to do things that CSS Grid does much better. But…

ABOUT THE AUTHOR DANIEL SCHWARZ w: mrdaniels.ch/warz t: @mrdanielschwarz job: Design & UX Co-Editor, SitePoint areas of expertise: Sketch, UX, interface design Adobe Experience Design CC, ‘XD’ for short, is Adobe’s response to Sketch, the critically acclaimed macOS app that’s used to design user interfaces. However, not only is Adobe XD available for macOS, but it works on Windows OS too, and includes both prototyping and feedback features, making it the number one competitor to Sketch. If you’re already established in the Adobe ecosystem, and/or you’re a happy customer of the Adobe Creative Cloud, and you’re a user interface designer, then this tutorial is for you. In it, we’ll walk through the process of mocking up a low-fidelity wireframe of a nutrition-themed iOS app. Then we’ll demonstrate how the user would…

ABOUT THE AUTHOR NICOLAS GARNIER w: mjml.io t: @nico_g job: MJML product manager at Mailjet Areas of expertise: JavaScript, responsive email, open source While email is certainly one of the best ways to engage with your audience, doing it right can be incredibly difficult. One of the biggest challenges when sending emails is to make sure that you display your message in the right format to your subscribers, depending on the device and email client that they are using to view it. This is where the need to code responsive email comes in. THE CHALLENGE OF CODING RESPONSIVE EMAIL Responsive email is very different from responsive web development for multiple reasons, including but not limited to the wide variety of email clients that are available, the lack of standards that exist…