netApril 2017的目錄

Just Enough Research by @mulegirl – it’s a mustread for UX designers. Design is a Job! I started reading again as soon as I’d finished. The Zen of CSS Design by Dave Shea and Molly Holzschlag. Everything was different after reading it. Lea Verou’s CSS Secrets and Ethan Marcotte’s Responsive Web Design. Steve Krug’s Don’t Make Me Think. Great on usability. Jeffrey Zeldman’s Designing with Web Standards – a convincing argument for a simpler approach. A Web for Everyone by Sarah Horton and Whitney Quesenbery. Every web designer should get familiar with its personas. The Art and Science of Web Design by Jeffrey Veen – my first web book and the foundation of my career. Lean UX by Jeff Gothelf and Discussing Design by Adam Connor and Aaron Irizarry. Both…

What we think (1) Jeremy Keith’s web book (or ‘wook’, as he would prefer you didn’t call it) is part informal history of web design; part handy toolkit; totally free (netm.ag/keith-291). (2) There’s no better way to convey how you’re feeling on social media than a GIF, and Whom (netm.ag/whom-291) is a simple way to create your own. (3) As everything we build seems to get more complex, information architect Abby Covert shows you how to clear the clutter (abbytheia.com/makesense). (4) Just like its colourful canine mascot, JavaScript uploader Uppy (uppy.io) can ‘fetch’ from a variety of locations, and will love you unconditionally. (5) Jeremy Wagner’s latest guide (netm.ag/wagner-291) is packed with advice to ensure your sites stay smooth. (6) Online wireframe tool MockFlow (mockflow.com) lets you draw and collaborate…

Without doubt the biggest stumbling block to starting a freelance career is attracting your first client. Most people who are considering making the move to freelance are hesitant to make the jump without that first client on board. It’s perfectly understandable to think this way as it’s a tricky situation, especially if you’re still in full-time employment. The problem with winning that first client is the work involved with getting them on board. Despite having no previous association, you have to get them to the point where they understand what you’re offering and want to use it. This process isn’t usually achieved with a single interaction, and for those that haven’t already started on their freelance path it can be difficult to manage. Time is at a premium, and opportunities…

6 things to consider when selecting a DAM netm.ag/DAM-291 A useful list of things to consider when purchasing a DAM. Responsive Images 101 netm.ag/cloud-291 This 10-part series by Jason Grigsby is a must-read – it provides a great introduction to responsive images. Image Optimization netm.ag/google-291 The Google Developers’ guide to optimising images covers some more great topics. Image Tragick imagetragick.com This site contains some of the latest vulnerabilities and practical mitigation advice, a must-read if you use this transformation service. Manage, don’t block bots readwrite.com/2016/02/29/managing-bots An article that explains why blocking bots isn’t always the best approach, managing them is a lot better. High performance images netm.ag/perform-291 This book covers a lot of detail around many of the image strategy topics.…

ABOUT THE AU THOR EVA FERREIRA w: evaferreira.com.ar t: @evaferreira92 job: Frontend developer areas of expertise: HTML, CSS and SVG q: what has made you smile this month? a: I heard my cat snoring View source files here! All the files you need for this tutorial can be found at netm.ag/transform-291 It’s just another day at the office and the last thing you want to do is place another stock image in your HTML. To help spark your Monday motivation, I’d like to show you how you can visually boost stock photos with a few lines of CSS. Since 2009, the transform property has changed the way we see the web and improved the lives of developers, designers and users alike. This property enables you to modify elements by rotating, scaling,…

+ Using technologies such as A-Frame and Vue.js for the first time can be daunting. Thankfully, there’s a lot of inspiration out there to help you build up your knowledge and inspire your own creations. Here’s some of the resources we used when creating the Ghost Train Builder: A-FRAME aframe.io The official A-Frame site includes documentation, community links and plenty of examples. VUE.JS vuejs.org The official Vue.js site offers a guide to getting started, plus examples and links to further resources. MDN TUTORIAL netm.ag/moz-291 A tutorial on the Mozilla Developer Network that shows you how to build a basic A-Frame demo. MOZILLA HACKS netm.ag/mozhacks-291 A small dungeon crawler game built in A-Frame, which showed us what was possible with this framework. RELATIVE POSITIONING IN A-FRAME netm.ag/positioning-291 A handy guide by…

CONTACT US BEHIND THE COVER When I looked into the meaning of UX, I realised it’s often the simplest ideas that work best. I wanted to show this on the cover with the use of simple geometric shapes that were all somehow connected. Rather than showing a real world of UX in motion, I wanted to suggest the users were immersed within it. There are steps that represent guiding the user, digital data and connectivity is represented by lines and dots, and there are iconic symbols depicting how and when we need a good user experience (booking restaurants is shown as a knife and fork, Uber cab bookings are shown by the simple cars). The colour palette was important too. I always aim to use a complimentary palette and opted…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... SIMON FOSTER Simon is an award-winning freelance frontend web designer based in London w: simonfosterdesign.com t: @simonstretch CHRIS HOW Chris is an experience lead at Webcredible, a UX agency in London w: chrishow.co.uk t: @chrishow QUESTION OF THE MONTH What tools or frameworks would you recommend for building web forms? Andrea Parker, Madrid, ES SF: Personally I hand-write all my HTML, which of course includes forms. Over time I’ve written so many that I have HTML code saved for forms that I reuse whenever necessary – I just take the bits I need, depending on how complex the form is. If you’re using a framework like Bootstrap or similar you can of course use the functionality built into them for your forms. However, I’m…

As a child, I was once granted special permission to take 24 books home over summer break. I read them all, and had to go to the library to avoid being story-less for the last few weeks before school started. As I got older, design school kept me busy. But after graduating I returned to reading voraciously. Many books later, I felt the urge to take my love of the written word to the next level. I wanted to read a particular kind of book, one I had trouble finding. I decided I’d try my hand at writing my own. To date I’ve published one novel, and I’m working on number two and three. My design education has come in handy more than once, because the process of writing and…

We’ve all heard of the gap between design and development in tech: the seemingly impossible chasm between creatives and engineers that only mythical unicorns, infamous rock stars and ninjas can traverse. We didn’t invent this divide between art and technology, but we can work to bridge it. The debate is well-versed. When photography first emerged in the painting-dominated art world, it was quickly rejected. Despite photographers’ efforts to be seen as creatives, the art world’s message was clear: snappers were not artists, they were technicians. Cameras were pieces of technology wielded by operators whose creative skill was inconsequential. If you wanted to be a ‘real’ artist, you were better off with a brush. Does this seem familiar? History is repeating itself in tech, and it’s to no one’s advantage. Somehow,…

CLAUDINA SARAHE Claudina builds and designs teams, communities and projects. Her work with Casper featured on the Responsive Web Design podcast w: itsmisscs.me t: @itsmisscs WEBGL, JQUERY, WORDPRESS WWW.COLLECTIVEI.COM Werkstatt www.werkstatt.fr Collective[i] is a new data tech company that enables other companies to use and share network intelligence. One of the most immediately striking things about its freshly redesigned site is the futuristic background. The movements evoke the tactility of fabric blowing in the wind, while the tessellations are reminiscent of sophisticated 3D models. Overall the site exudes modernism, with its geometric, modular layouts framed by bold distinct colour, coupled with clever use of white space throughout. Motion is used to narrate and help connect you to the piece, and the animation speed feels tuned towards encouraging you to read the content.…

www.westwerk.com Autumn 2016 marked Westwerk’s 10th anniversary. It was a chance to look back on a decade in which the Minneapolis-based digital agency carved out a fruitful niche as an awardwinning specialist in WordPress website development. We were keen to learn more about Westwerk’s story – and what the next 10 years have in store – so we asked founder Dan West, director of operations and culture Emily Berens, and account executive Marissa Noble to dish the details ... net: How and why was Westwerk set up? DW: After working as a creative in various capacities for many years, I decided to quit my job and figure out a better way to run a business; one that was transparent with its employees, as well being a rewarding place to work.…

ABOUT THE AU THOR MICHAEL GOODING w: michaelgooding.me t: @Michael_G_81 job: Performance specialist, Akamai Technologies areas of expertise: Web performance, content delivery, images q: what has made you smile this month? a: Attending my child’s Jedi training camp birthday party One thing that’s guaranteed to have a positive effect on your users’ experience of your website is the use of images. Users are more likely to engage with and revisit your site if there is strong, impactful visual content. On average, images account for more than 60 per cent of bytes per web page, and they have become an essential part of a brand’s profile and its success with customers. However, supporting and maintaining the use of images on a website can be a challenge, and needs careful consideration. There is…

ABOUT THE AU THOR CHRISTIAN KRAMMER w: sketchtips.info t: @sketchtips job: Web designer areas of expertise: Sketch, HTML, CSS q: what has made you smile this month? a: My family OFFER! Christian Krammer’s Sketch Handbook contains 12 chapters jam-packed with everything you need to know about sketch. net readers can get 20% off with the code NETMAG: sketch-handbook.com Recent years have seen a raft of measures that help you track your fitness. There’s a reason why startups like Runtastic (who are, coincidentally, Austrians like me) are getting bought up by Adidas for $240m. Everybody wants to know every last bit of information about their latest workout, be it on their wrist with a standalone device, or with an app on their smartphone. And I’m being honest here: this includes me as…

ABOUT THE AU THOR DAVID STOREY w: www.realise.com t: @david_panik job: Web development manager, Realise areas of expertise: JavaScript development, building rich experiences, driving innovation q: what has made you smile this month? a: My son’s been telling that when he’s a grown-up he is going to build a farm with two cinemas (one for dinosaurs) View source files here! All the files you need for this tutorial can be found at netm.ag/aframe-291 VR is making big strides in the browser right now, thanks to WebGL and three.js. But for those used to working with a DOM and manipulating nodes, building 3D scenes requires a bit of a shift in mindset. A-Frame from Mozilla, a web framework for building virtual reality experiences, makes things easier for us, allowing the rapid creation…

ABOUT THE AU THOR AURELIO DE ROSA w: www.audero.it t: @aurelioderosa job: Web developer areas of expertise: HTML, JavaScript, jQuery q: what has made you smile this month? a: My ex-colleagues at Digital Detox on my leaving do Artificial intelligence is changing the way we interact with the world. Self-driving cars, AlphaGo and Amazon Echo are just a few examples of what we’ve been able to achieve in the last few years. Recently, even Mark Zuckerberg, creator of Facebook, has shown his interest in learning more about AI (see netm.ag/jarvis-291). AI software is not just fascinating, but it becomes even more attractive when we can use our voice to interact with it. Traditionally, we’ve interacted with software via a mouse or a keyboard. Nowadays the trend is shifting towards the use…

THE CURRENT STATE OF ADAPTIVE DESIGN + 2016 was a great year for adaptive design. In this article Charlie Deets, a WhatsApp and Facebook product designer, looks at some brilliant new features that appeared in some of our favourite tools and make adaptive design easier. netm.ag/adaptive-291 GET STARTED WITH NPM + We’ve all heard of npm, but not everyone has incorporated it into their workflow. Maybe you don’t understand why you would want to – and you’re not alone! This fantastic, comprehensive article explains what npm can do for you and how to take advantage of its power. netm.ag/beginnpm-291 ONE CSS PROPERTY CAN BREAK YOUR SITE + “This site is so poorly written it spins up the fans of my gaming laptop.” That was the comment the author of the…

Brad Mills, MA, US CH: Firstly, if I find I’m designing ways to onboard users I stop for a cup of tea. Then I follow these three steps ... SIMPLIFY + I return to my design to see how I can simplify the UI to make the use and discoverability of features more self-evident. DELIGHT + A user will only ‘return and learn’ if their initial experience empowers and delights them. To help them get more from repeated use, consider a combination of methods: set challenges to complete tasks; provide contextual tips based on the user’s behaviour; or suggest things to try – the ‘Alexa weekly email’ is a great example of this. PERSONALISE + Review usage data to identify which features are being used. This will give some clues…

ALLOCATE AND PRIORITISE @JoannaKosinska points out that you have three types of work: looking for work, the work itself, and admin. “I plan as much as I can, set priorities and mark them in my diary.” She also notes that while you may be able to estimate how long work will take, some of it will always depend on the client so you need to allow for that. USE HELPFUL TOOLS @blueocto recommends Streak, a customer relationship management (CRM) tool that integrates with Gmail, a paper planner, and also a whiteboard. @attck suggests a time tracking system such as @harvest and a smart email management system that allows you to organise with labels and filters. BEAT PROCRASTINATION @KrishnaSDesigns advises thinking about the repercussions, when the time-wasting bug bites. She also…

LYN MULDROW Web developer www.lynmuldrow.com CANVA This graphic design software is so easy to use for various projects. I love how quickly I can mock up a design with the right dimensions – great for Facebook posts. It’s also a good tool for teaching design – there are lots of free features, suitable for tutorial projects. canva.com THE STOCKS I’m always on the hunt for good, free stock images and design resources. The Stocks has all your favourite free photo and design resource sites in one place, surrounded by a slick UI with filters for fonts, videos and more. I love the loading screens. thestocks.im FREE CODE CAMP As an educator, the easiest way to get students excited about programming is by encouraging them to jump in. Free Code Camp,…

O’REILLY DESIGN CONFERENCE DATE: 19-22 March 2017 LOCATION: San Francisco, US Attendees can enjoy four days of training, tutorials and conference sessions with interaction and UX designers and product designers at this wide-ranging event. netm.ag/oreilly-291 JAZZCON.TECH DATE: 22-24 March 2017 LOCATION: New Orleans, US The makers of the Connect.Tech conference cook up a three-day web- and JS-development binge with workshops covering Angular, React, CSS3 and more. www.jazzcon.tech BULGARIA WEB SUMMIT DATE: 7-8 April 2017 LOCATION: Sofia, BG Aral Balkan, Ada Rose Edwards and Harry Roberts are among a list of speakers spanning 20 countries and four continents at this sold-out event. bulgariawebsummit.com FRONT-TRENDS DATE: 24-26 May 2017 LOCATION: Warsaw, PL Central Warsaw plays host to the seventh issue of this popular frontend conference, featuring Maciej Ceglowski, Lin Clark and Jack…

INFO job: Founder, Republic of Quality w: republicofquality.com t: @hellofisher 2016 was the year of the design sprint, a five-day process for solving, prototyping and testing design problems, first brought to prominence by Google Ventures. Sprint, the book by GV’s Jake Knapp, became a New York Times and Wall Street Journal bestseller, and teams all over the world started adopting the framework to improve their products and ultimately their businesses. Steve Fisher, the founder of Canadian UX, content strategy and web technology consultancy the Republic of Quality, however, noticed one thing was missing from the sprints he saw: content. “The GV guys have been writing about design sprints for four or five years, and we’ve been running our own sprints for about as long, ” he explains. “There are big benefits.…

LIZZIE DYSON While the industry is evolving, we should aim to streamline job titles and help others understand our roles. As UX leaders we have the potential to be industry disrupters and in order to do this we need to create a united effort for consistency. This will enable us to facilitate the change and fully embed ourselves into the product lifecycle. When we no longer have to explain UX to our colleagues, that’s the time to be creative with titles like ‘UX guru’ or ‘executive unicorn’. But until then, let’s keep it simple. JESSE GOLL The segmentation of design roles has been necessitated as web design has matured. Specialised roles are required to break up large tasks and as such, job titles have grown to reflect these focused roles.…

PROFILES DAN EDWARDS Dan is creative director at No Divide studio, and co-creator of resource bank oozled w: nodividestudio.com t: @de FELIX RENICKS Felix is the interactive designer for Channel 4 News in London w: channel4.com/news t: @ffffelix DIOGO DANTAS Diogo is a freelance designer based in Lisbon, Portugal w: diogodantas.com t: @im_diogodantas BRIEF This month we’d like you to design a website for a furniture retailer. It could be a site for a local antique shop, a mail order company for designer pieces, a place for collectors to find something special, or anything in between – it’s up to you. DAN EDWARDS SÜFA A fun, energetic site that aims to woo design-conscious customers SÜFA is a premium furniture store that specialises in unique items made by designers from all over the world. I wanted to…

What’s on your desktop? Maneki-neko [a popular Japanese cat figurine], The Daily Mood book, an oversized mug of green tea, project management books, Vitamin B12. What do you have on the walls? My buddy Fritz, project board, calendars, decorative lights. What will you do for lunch? We like to take it off campus to our go to neighbourhood pubs and delis. What hours do you work? We kick off our days between 8.30-9am and close up shop between 5.30-6pm, with the occasional evening ‘to-dos’ sprinkled in here and there. What else do you do in the office? Play foosball, mini-basketball and shuffleboard, explore Spotify playlists, bake cookies, mix a drink, talk shop. How often do you hang out? We often end the week with a Friday Happy Hour, daring each other to try…

What problem were you trying to solve when you launched Design Inc.? MH: We help folks find and obtain highquality design and creative services on-demand from the best talent in the world. Design Inc. is made up of designers of all types. Each creative on the site has been vetted and approved manually after a careful review of their portfolio and experience. Our focus this year is to help more than 10,000 creatives do what they love. Where did the idea come from? MH: By accident. Initially Design Inc. started as an agency, but in a matter of weeks we became overwhelmed with hundreds of requests and projects. There had to be a better way to help all these folks seeking out design help. So we decided to build a…

Serve the right size image + Be sure to resize all images so they’re close to the size displayed on screen. On mobile connections this will reduce the time over the network as well as the processing and painting times on the device. Even on large desktop screens, resizing images can help improve performance. Reduce quality to save bytes Displaying images on the web doesn’t always require an unaltered, pristine image; reducing quality can often yield no difference to the human eye but save substantial bytes. Remember, quality levels vary between tools so be sure to familiarise yourself with the outputs of your chosen image editing tool, and choose a value that offers as a good balance between size and quality. Use the correct format Different image formats have different…

ABOUT THE AU THOR ALEXANDER MALINOV w: xmalinov.github.io t: @xmalinov job: Full-stack web developer, Bonoagency areas of expertise: JavaScript, SPAs, UI/UX q: what has made you smile this month? a: Reviewing my favourite series of The Venture Bros FACT FILE WHAT I USE In my everyday work I use ESLint as a plugin for PhpStorm/ WebStorm, Atom and build tools (gulp, webpack). My choice is motivated by working with Node.js, ES6 and React, and I can create custom linting configurations for different projects.…

ABOUT THE AU THOR KEZZ BRACEY w: www.kezzbracey.com t: @kezzbracey job: Coder and designer areas of expertise: CMSs, web and game development q: what has made you smile this month? a: Switching to Linux and discovering the addictiveness of distrohopping View source files here! All the files you need for this tutorial can be found at netm.ag/craftgit-291 Craft CMS is an incredibly flexible website management platform that allows you to create a custom backend for almost any type of site. In this tutorial, I’ll walk you through its essentials as we convert a simple, one-page personal template into a Craft CMS-driven site (pictured above). To follow along, you’ll need an installation of Craft to work on, ideally running locally on your computer via XAMPP/MAMP or Vagrant: • Vagrant Craft CMS box: netm.ag/vagrant-291…