netJuly 2016的目錄

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... JEN SIMMONS Jen is a designer advocate at Mozilla, and host of The Web Ahead podcast w: www.jensimmons.com t: @jensimmons JAMIE KOSOY Jamie is founder and technology director at Arbitrary w: www.arbitrary.io t: @jkosoy CAT NOONE Cat is a designer, advisor, speaker, and co-founder of alert app Iris w: www.heyimcat.com t: @imcatnoone MICAH GODBOLT Micah is a frontend architect and creator of SassBites w: Micah.codes t: @micahgodbolt QUESTION OF THE MONTH What kind of grid system would you recommend to use for a web app project? Peter Javorkai, Budapest, HU JS: I don’t have a specific recommendation for an ‘app’ or a ‘non-app’ website. For any kind of project, I believe it’s best to take a look at your idea, your content…

Our Twitter followers offer their tips for forming a successful partnership with your product team COLLABORATE Remember that the creation of a successful product is a joint effort. “Think ‘collaborate’ at every turn,” says @CWwebsites. As well as the product team, you need to get users involved from the start. “User test all your design ideas and assumptions early,” says @sgolubev. “Share feedback often and iterate.” TALK FACE-TO-FACE Digital technology has given us new ways to keep in touch, but doing things face-to-face is often best. “Stop communicating through tools,” advises @CHEWX. @karstenrowe agrees: “It’s about individuals taking the responsibility to communicate well.” INTERPRET INTENT Different people have different ways of communicating, so take care when interpreting requests. According to @thepixelgrid, the key is “Listening carefully ‘between the lines’ to…

JEANY NGO Experience designer www.jeanyngo.com PINTEREST I often find myself happily lost down the Pinterest wormhole. Every new image I open branches me into several more. Pinterest allows for limitless brainstorming and tangential thinking, and helps me collect and form ideas. www.pinterest.com LEARN SQUARED Learn Squared offers non-traditional creative courses like title design and concept art. You can learn at your own pace or receive personalised guidance. Through it, I’ve made some great projects, connected with amazing creators and discoved new perspectives. www.learnsquared.com TWITCH Twitch has a growing community of creators in its Creative streams category. I like to watch and interact with established designers and artists live. It’s humbling to see them face struggles and triumphs throughout their process, just as I do. netm.ag/twitch-281…

FCSSCONF NORDIC DATE: 1 June 2016 LOCATION: Oslo, NO This one-day conference is for anyone who loves CSS, and is one of three events in Norway in June. Speakers include Håkon Wium Lie and Jen Simmons. cssconf.no REACTEUROPE DATE: 2-3 June 2016 LOCATION: Paris, FR With three days of events and over 22 speakers, ReactEurope is shaping up to be unmissable. Enjoy workshops and lightning talks on GraphQL, inline CSS, and of course React. www.react-europe.org BUZZJS DATE: 3 June 2016 LOCATION: New York, US A one-day conference in the hub of NYC, Times Square, BuzzJS is built for developers who use JavaScript on the frontend, backend, desktop and beyond. buzzjs.com RUBYNATION DATE: 3-4 June 2016 LOCATION: Washington DC, US RubyNation is the Mid-Atlantic’s annual Ruby event. Keynote talks will come…

INFO job: Design partner, GV t: @kowitz w: www.kowitz.co Right now is an exciting time for design. Huge names like Twitter and Facebook have wholeheartedly embraced it into their culture, and business leaders are starting to see the true impact design can have. One of the companies at the root of this change is GV – recently rebranded from Google Ventures – a company dedicated to providing venture capital to startups. When Braden Kowitz became the team’s first designer in 2010, rumours of this change were already afoot. “It was a time when CEOs had been hearing that design was important, but they didn’t quite know what that meant,” he recalls. “Many of them didn’t have any designers on staff.” Kowitz had been working as a UX designer at Google,…

WWW.HOMEDEPOT.COM Our test studies show that sorting products by reviews is one of the most utilised options, and that customer reviews are one of product attributes that users most care about. However, many sites are not taking advantage of their potential. During several of our studies we observed that while a product with a single 5-star user rating technically has a higher average than a product with a 4.7-star average based on 37 ratings, most users would consider the latter better rated (full test findings can be found at netm.ag/rating-269). Despite this, 86 per cent of the top 50 US ecommerce sites sort reviews based purely on the average. Users have categorically been observed to deem the highest rating sorting logic illogical when based purely on maths. The common maths-based…

WWW.BHPHOTOVIDEO.COM Electronics retailer B&H Photo Video provides its users with a detailed Accessories tab within each product page. This helps showcase a large selection of accessories that match the specific product being viewed. While most sites offer some sort of crosssell, often only three to five products are shown, and they tend not to be accessories. In fact, in our benchmark studies, we found that 56 per cent of mobile ecommerce sites don’t display any accessories. During our ecommerce navigation studies, it quickly became evident that users find cross-navigation very cumbersome. While this issue was also observed on desktop, test subjects using mobile devices tended to find it especially tricky – so much so that mobile users would often skip looking for related products altogether if they had to start…

Gone are the days of PDF restaurant menus and plates with bad lighting. Modern food sites are more likely to involve editorial-inspired layouts and stylists arranging place settings for longer than diners are seated at them. Here are the key ingredients you need for a good food site. Mouth-watering photography We eat with our eyes first, so not only photography but photo editing must be a priority. The food needs to looks bright and appetising, with no social media-like filters. Plating must be perfect, and dishes, cutlery and glasses carefully arranged – or at least looking thoughtfully haphazard. Appetising colours Choosing colours for backgrounds and type can be challenging when it comes to really colourful food. For backgrounds, tie all the elements together by sampling a colour from the representation…

ABOUT THE AUTHOR TOBIAS AHLIN w: www.tobiasahlin.com t: @tobiasahlin job: Designer and developer areas of expertise: Product design, HTML, CSS q: what’s the most used app on your phone? a: Notes. You know in movies when there’s someone sketching out ideas and you see a trashcan full of crumpled up pieces of paper? Notes is my trashcan View source files here! All the files you need for this tutorial can be found at netm.ag/CSSgit-281 VIDEO Tobias Ahlin has created an exclusive screencast to go with this tutorial. Watch along at netm. ag/animatevid-281 It’s through animation that we make sense of the world: doors swing open, cars drive to their destinations, lips curl into smiles. Even the things that feel instantaneous, like lightning striking or dropping a phone on your face…

ABOUT THE AUTHOR RAY VILLALOBOS w: www.raybo.org t: @planetoftheweb job: Senior staff author, Lynda.com areas of expertise: Frontend design, fullstack development q: what’s the most used app on your phone? a: The Podcasts app. My faves are CodePen Radio, JavaScript Jabber, seanwes and Rob Cesternino’s Survivor podcast. I’m a complete Survivor junkie. FACT FILE COMPETITORS Foundation is Bootstrap’s closest competitor, but there are other frameworks nipping at its heel, including Semantic UI and Material-UI. However, Bootstrap remains a standard that others are finding hard to beat. BOOTSTRAP 4 Bootstrap 4 is currently in alpha and is now built with Sass. It boasts a new grid breakpoint and introduces Cards – a new UI feature that eliminates wells, thumbs and panels. I can’t wait. VERDICT If you’re a beginner, I’d recommend…

BRAD WEAVER Brad is chief experience officer at Nine Labs, and the author of business startup guide Creative Truth. On page 68, he explains how to build a profitable design business w: ninelabs.com t: @sbradweaver ALEX O’BYRNE Alex is co-founder of Shopify design experts WeMakeWebsites. You can read his tips for increasing orders through your online store on page 76 w: wemakewebsites.com t: @philosophermail RACHEL NABORS Rachel is a UI animation consultant and an invited expert at the W3C. On page 103 she explores the new Web Animations API w: rachelnabors.com t: @rachelnabors TOBIAS AHLIN Tobias is a designer, developer and teacher, with stints at GitHub and Spotify on his CV. He reveals how to toggle a menu with CSS animations on page 84 w: tobiasahlin.com t: @tobiasahlin…

THE UI AUDIT $49 SKETCHKEYS $11 GETTING STARTED WITH CODING £8.99 LINGO VARIOUS BUILDING GREAT STARTUP TEAMS $28.47 LIGHT PHONE $100 What we think (1) A concise, no-fluff guide to UI and UX issues, written by consultant Jane Portman (uibreakfast.com/audit). (2) Jumped on the Sketch bandwagon but having trouble getting up to speed? Learn your shortcuts by sticking these aides-memoire to your keyboard (sketchkeys.com). (3) Help launch the next generation of devs with Camille McCue’s For Dummies-style guide to coding for kids (netm.ag/mccue-281). (4) Store all your design elements in one place with this stylish new OS X desktop app, with drag-and-drop support for Sketch, and Adobe and Apple tools (lingoapp.com). (5) A clear introduction to attracting, selecting and retaining good staff, by Huddle’s Dean Hume (buildingstartupteams.com). (6) This ‘phone…

MONEY ISSUE CHRISTIAN HOLST Christian is the research director at the Baymard Institute, where he conducts large-scale studies of leading ecommerce sites w: www.baymard.com t: @KiehnHolst HORIZONTAL FILTERING BAR SHOP.NORDSTROM.COM During our large-scale usability study at the Baymard Institute on search, category navigation and product filtering, every single test subject wanted to filter a product list at some point, yet 40 per cent of users were unable to find such filtering options at least once in each test session. A horizontal filtering toolbar, like the one on Nordstrom’s website, can be the solution. If the product filters are too difficult for your users to find, you might as well not include them at all. From the end user’s perspective, the result is the same: they can’t filter product results. The…

WWW.WILLIAMS-SONOMA.COM First-time users rely heavily on the main navigation options and homepage content to determine what type of site they’ve landed on and how broad (or narrow) a product range it offers. During our usability tests, many subjects misinterpreted the type of site or underestimated its product range because an overly narrow selection of product types was visually represented on the homepage. Such misinterpretations can be seriously harmful to your site, as users will typically not look for a type of product they don’t believe the site will carry. This can potentially lead to lost sales, both in the short term and the long term, as these users look elsewhere to get their needs met. At Williams-Sonoma, a wide range of product types are presented on the homepage of both…

AUTHOR BRAD WEAVER Brad (@sbradweaver) is the chief experience officer at Nine Labs (ninelabs.com) in Atlanta, GA, and the author of Creative Truth. He routinely speaks at conferences, acts in movies, and solves UX problems for Fortune 500 brandsh ILLUSTRATOR MARTINA FLOR Berlin-based designer and illustrator Martina specialises in lettering and type, and her designs have been featured in publications around the world www.martinaflor.com Profit isn’t easy to talk about. Often it’s an afterthought. But if you’re in business, you’re out to make a profit. To be blunt, if you’re not making a profit, you’re not running a business; you just have a job. Profit is simply the difference between the amount earned and the amount spent when producing something. So how do you make sure you’re making a profit…

View source files here! All the files you need for this tutorial can be found at netm.ag/assets-281 ABOUT THE AUTHOR CODY O’BRIEN w: www.kraken-graphics.com t: @Cptn_Red job: Designer advocate, Google areas of expertise: Prototyping/design tools, customer support, product education q: what’s the most used app on your phone? a: 1Password. I tend to be a little forgetful VIDEO Cody O’Brien has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/pixatevid-281 Pixate allows you to quickly prototype interactive mobile mockups that can be previewed on Android and iOS devices. In this tutorial, we’re going to use it to build a floating action button (FAB) including sub-options. We’ll explore different techniques and settings in Pixate, such as transitions and conditions. FABs are used to promote action and attract…

CONTACT US @netmag /netmag netmag@futurenet.com net.creativebloq.com medium.com/net-magazine CSS ORIGINS net: We recently republished an interview with Håkon Wium Lie on our Medium channel, which you can read at netm.ag/lie-281. Here are some of your comments: When you wrote “Lie realised” [that designers would need a bridge between the meaning of the elements on a web page and their presentation], surely you do not think that this ‘realisation’ – that styling text is a necessary component of any document-sharing system – was a breakthrough idea, or that Lie was the only person who ‘realised’ it, let alone the very first? Several desktop publishing systems (and even mere word processors) routinely deployed style sheets by that time, and most of those style sheets were designed more solidly than CSS. Moreover, in the…

BEYOND PIXELS I was standing in a corner. I had a small table to myself, with my paints, squeegee, a bunch of T-shirts, and a screen with my first hand-drawn designs, exposed a few minutes ago. There were six other people there, but I didn’t pay attention to them. I couldn’t hear anything apart from my own thoughts. I was in a flow, and time and place didn’t matter. I was making something with my hands, experiencing the process of creation without a computer. That was four years ago at my first screen printing workshop. Now, almost all my clothes are hand-printed. I like it when design has an extra dimension – rather than hanging them on the wall, I can actually wear my designs. This is also why, at…

Design is hot right now. And broken. Executives are being tasked with being design-driven, but don’t have the tools, processes or design systems to sustain this effort. Leaders are embracing design thinking, yet they have not established how their companies will implement their ideas. VCs are telling founders to hire a design leader, but it’s not clear who this mythical, unicorn person is. Designers, it’s your time to step into these problems. Companies are going to continue to embrace more design methodologies because design-conscious firms continue to outperform the market. Designers have two choices: try to solve each problem in isolation, or drive the necessary change with their organisations. Both are doable, but only one solution is sustainable and capable of helping an organisation become design-centric. So what does is…

AARON MENTELE Partner, Electric Pulp www.electricpulp.com In a case where the ask exceeds the budget, we start by talking through good/better/best scenarios and managing expectations if we need to be at the lower end of the scale. If it’s possible to reduce tangible requirements in the scope, we’ll try to identify core functionality and suggest moving non-critical components to a later phase. The goal, of course, is to find the biggest bang for the buck (I hate that phrase). The momentum of a successful launch can finance future iterations. BETHANY HECK Designer www.heckhouse.com Staying within budget is a combination of setting clear expectations, learning how to get the right info out of your client, and being focused when you move into design work. If I have the assets, information and…

WWW.MACYS.COM Notice how Macy’s displays applied filtering values alongside their unapplied siblings (i.e. in their original position) and also in an applied filters summary at the top of the page. During our usability studies we have observed that when users want to unselect a filter, one of the first places they look is the spot where they applied the filter in the first place. When filtering values move as the user applies them – either to another position in the list or to a separate summary – subjects are often confounded, as the value they have just clicked is suddenly ‘no longer there’. Applied filtering values should be kept in their respective filtering list alongside the other (not yet selected) filtering values of the same type, as seen here at…

WWW.CRATEANDBARREL.COM Users inevitably end up misspelling fields if they have to write them out themselves. This is an issue we’ve observed especially often during our mobile ecommerce study, where the combination of large fingers and small touch keyboards leads to a large number of typos throughout the checkout process. When we have the opportunity to help users out, it’s highly advisable to do so. One site that does this is Crate and Barrel, which auto-detects the city and state values based on the ZIP code the user types. In most countries, different cities, areas and districts can be inferred from postal codes. This is an advanced feature that goes beyond user expectations, creating delight in place of a traditionally tedious typing process. Besides creating a positive element of surprise, this…

PROFILES BUSINESS TOOLS Sublime design & creative advice MARCEL SCHMIDT Marcel is a frontend web designer and developer, and owner of Blikbrein Media w: www.blikbrein.co.za t: @blikkies K YLIE TIMPANI Kylie is a senior designer at Perth agency Humaan, specialising in web and UI design w: www.kylietimpani.com t: @kylietimpani KATE McHUGH Kate is a frontend designer and developer at digital agency Arise in leafy Sheffield w: www.katemc.com t: @katemchugh01 BRIEF We want you to design a website for a new online business service aimed at entrepreneurs. It should help make the day-to-day tasks involved in running a business easier – and more fun. The UI must be simple to understand, and convey an air of trustworthiness.…

What’s on your desktop? 34" ultra wide monitor (I love the horizontal space), 15" Macbook Pro. What little things make your life worthwhile? My daily coffee routine. And music always gets me out of a creative or personal funk. What do you have on the walls? Art, but not much. What hours do you work? It varies wildly. Usually 9 or 10am to 6 or 7pm, or very late if needed. What else do you do in the office? I tend to be a bit better about compartmentalising my life these days, and getting out of the office. How often do you hang out with other designers? A lot. I most enjoy the company of designers with whom I can explore new concepts and ideas. It’s easy to tear anything…

AUTHOR ALEX O’BYRNE Alex is the co-founder of WeMakeWebsites, the UK’s leading Shopify expert, where he helps create beautiful ecommerce websites that generate sales wemakewebsites.com It’s never been easier to set up an online store. But there’s a big difference between setting up a store that allows people to buy, and setting up a store that convinces people to buy. For this reason, hosted platforms – which make setting up an online store easier – are not a threat to web designers and developers. They are an opportunity for us to focus on the real value we can offer through consulting and implementing an exceptional user experience. Here are 10 ways that you can squeeze more sales out of an online store. 1 BE READY ON MOBILE Today, over half…

ABOUT THE AUTHOR CHRISTOPHER MURPHY w: www.tinybooks.org t: @fehler job: Writer, designer and educator areas of expertise: Strategy, design, content creation q: what’s the most used app on your phone? a: Simplenote. It enables me to write on the go, syncing everything seamlessly RESOURCE If your pricing’s posing a problem, you might like Ka-Ching! by Christopher Murphy. It’s coming out in late 2016, but you can read a work-inprogress at netm.ag/kaching-281 In my work as a consultant and a mentor working with creative startups, one of the biggest issues I find myself offering advice on is the tricky topic of pricing. I work with companies large and small (and, increasingly, students with great ideas for products) and one area they find difficult is finding the right pricing strategy. Get the…

ABOUT THE AUTHOR MARC ANDERSON w: marcbanderson.com t: @marcbanderson job: Associate design director, Fantasy areas of expertise: Design, art direction, UX q: what’s the most used app on your phone? a: Flywheel Sports. The spinning trend is alive and well in NYC and technology is really pushing these companies forward VIDEO Marc Anderson has created an exclusive screencast to go with this tutorial. Watch along at netm.ag/gridvid-281 I guess you could say I’m a creature of habit. Every time I start a new design, I duplicate the same exact grid into my working documents: a 20px column structure with a 20px baseline grid. I lovingly refer to this as the ‘picnic blanket’, as it reminds me of the red and white chequerboard blanket my mother used to put out on…

ABOUT THE AUTHOR KEIR WHITAKER w: www.keirwhitaker.com t: @keirwhitaker job: Partner growth manager, Shopify areas of expertise: Shopify, Liquid, podcasting ABOUT THE AUTHOR LEVIN MEJIA w: www.fourandthree.com t: @fourandthree job: Designer advocate, Shopify areas of expertise: Shopify, Liquid, CSS Today merchants demand more from their ecommerce platforms than ever before. From selling online and in-store to integrating with social channels like Twitter, Facebook and Pinterest, sellers are looking to offer customers the best, most immersive experience possible. To help you on your way to creating even better online stores with Shopify, here are five techniques you might not have used before. 1 CREATE ALTERNATE LAYOUTS Let’s kick off by looking at just how powerful Shopify’s layout file feature can be. If you aren’t familiar with the concept of layouts, you’ll…

ABOUT THE AUTHOR MARK ROBBINS w: www.rebelmail.com t: @M_J_Robbins job: Senior email architect, Rebelmail areas of expertise: CSS, HTML, email q: what’s the most used app on your phone? a: WhatsApp. It’s great for making quick plans with friends. I don’t believe messaging apps will ‘kill email’ – they are very different tools VIDEO Mark Robbins has created an exclusive screencast to go with this tutorial. Watch along at netm. ag/emailvid-281 ‘Email code is so outdated you have to code like it’s 1998.’ That’s a sentiment I hear a lot from web developers, and to some extent it’s true. The latest versions of Outlook desktop still use Microsoft Word to render the HTML, so you’re stuck with building retro, table-based layouts. The Gmail app strips style blocks and linked style…