netAugust 2017的目錄

What books would you recommend on UX? Joanna Kosinska, West Yorkshire LEARNING ABOUT UX These were the ones I read when I started my journey on UX design, including: Designing for Interaction: Creating Innovative Applications and Devices, by Dan Saffer; The Design of Everyday Things, by Don Norman and Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability, by Steve Krug. COMMUNICATING UX Once you know and love UX, you’ll find you need to bring others on board. These are helpful: Articulating Design Decisions: Communicate with Stakeholders, Keep Your Sanity, and Deliver the Best User Experience, by Tom Greever and Communicating Design and Developing Web Site Documentation for Design and Planning, by Dan M Brown. USER-CENTRED DESIGN Currently, I am reading a bit more on designing products…

Following some exciting ‘evolutions’ at Salad last year, we took a long hard look in the mirror to decipher what our proposition had grown to become. With a reputation for producing impressive design and the integration of a strategy and planning team with clout, we became purveyors of the ‘Beautifully Effective’. And so, here I present some of the steps I took to making my business - and proposition – beautiful. FIND A NICE PLACE TO BE I’d like to think that this goes without saying, but our environment has a huge impact on our productivity and general welfare. So why wouldn’t you make it a bright and enjoyable place to be? As creatives, we take pride in having a quirky and charming space that our clients and team want…

This month... schools PROFILES AARON MCA LINDEN Aaron is an illustrator, and he is studying interaction design at Belfast School of Art. w: aaronmcalinden.com t: @aaronmcalinden CHRISTOPHER DOWSON Christopher is a freelance designer. He currently operates as Dowson Design Co. w: madebydowson.com t: @madebydowson MAT THEW HART Matthew is a senior designer at Oxford-based creative agency One. w: oneltd.co.uk t: @oneltd BRIEF The challenge this month is to design a website for a fictional school. It could be a state school or a feepaying school that’s competing to attract students. We want you to consider how your design can convey the values and priorities of the school.…

A look at the key dates in Silvio Paganini’s career APR, 2001 Landed an internship for a small production studio developing Interactive CD-ROMs in Brazil DEC, 2003 My first advertising agency job was as a freelance Flash developer working at Rapp Digital JAN, 2005 Properly kickstarted my career as a Flash developer at JWT in São Paulo APR, 2008 Moved to London and got my first international job at Publicis Modem MAR, 2009 irst interactive installation with live tweets for the Rihanna + Nokia gig (R/GA London) JAN, 2011 Started at UNIT9 in the climax of Flash development for games and websites SEP, 2011 Won my first The FWA with Project Shiphunt at UNIT9 MAR, 2012 NYC Times Square take over installation for Tropicana Mar, 2013 Find Your Way to…

How the Birmingham City Council website came to be (1) Birmingham alternative homepage concept. (2) Birmingham design concept for main homepage featuring category and task-based links based on analytics from the old website and customer service stats. (3) Birmingham wireframe of multi-page document layout using prototype content at mobile breakpoint. (4) Content workshops took place to define the user journeys for different audiences across Birmingham content. (5) Mobile wireframe focussed on user need, featuring a dominant search field for accessing all content. (6) Mobile wireframe showing landing page for waste and recycling page. (7) Running WAVE tool across site to test accessibility as part of the testing process for meeting AA guidelines. (8) Here we were working on the front-end template build. (9) Next we worked through content based on…

Google changes its search algorithm over 500 times every year. Most of these changes are small, incremental updates, but occasionally large updates land with very little fanfare but with the possibility to dramatically change the SEO landscape. Here's a look at some big updates from the last past 12 months… 2017 February Nicknamed 'Fred' by Google's own Gary Illyes, this major update was a spam algorithm alteration around links. January Google previously warned us it would happen, but there was overwhelmingly evidence that it started rolling out a penalty to punish aggressive pop-ups that might damage the mobile user experience in January. 2016 November There were strong rumours that this unnamed major update in November 2016 was the first evidence of Google's new mobile-first indexing. October Google's Penguin update was…

You can’t win them all. But that’s okay. An anonymous Creative Director shares a story of his struggle with inclusion: “We were working on a TV campaign for a national brand that has a very large African American consumer base. In the previous spots produced, the main characters were predominantly white. So, for the last spot, we decided it would be smart to include an African American lead. But it turned out that every character in the spot ended up being African American as well. “Approval and production was a breeze. The ad even got some great response from consumers. Then, after two weeks, we got word that it was pulled from air. Obviously, we were shocked and wondered why. We learned that some people within the board of directors…

ABOUT THE AUTHOR DANIEL SCHWARZ w: https://mrdaniels.ch t: @mrdanielschwarz job: Co-Editor at SitePoint areas of expertise: Interface Design, UX, Sketch Establishing the correct amount of contrast between two neighbouring colours can be hugely beneficial. It helps the user distinguish between two design elements more easily, or boosts the readability of text on a background. In turn, this improves the user experience, makes the visitor more likely to stick around, and helps your calls-toaction stand out on the screen. But how do we measure contrast, if not visually? We can measure contrast using the Color Contrast app for iOS, which explains on the app welcome screen that around 4.5 per cent of the entire world’s population experiences difficulty in distinguishing between colours as a result of colour blindness, natural ageing or other…

ALEX PIERCE It’s hard to find a more topical subject than inclusive design right now. Alex’s guide on page 68 tells you why it’s important and why it can have huge benefits w: thegeekdesigner.com t: @alexpierce JOE LOVELOCK Joe’s A is for Alphabet site featured on our Gallery page previously, so we invited him to showcase his favourite new sites this month. The inspiration begins on page 40 w: studiolovelock.com t: @StudioLovelock ARABELLA LEWIS-SMITH Arabella founded Salad Creative in 2001 and has seen it grow into an award-winning brand and communication agency. Find out how on page 20 w: saladcreative.com t: @BellaLewisSmith CHRIS THELWELL Few apps are as popular among web designers and developers as Sketch. Chris dives into the new update on page 22 and explains why it’s such a big deal…

We don’t need Git, that’s what backups are for! @aaronbassett Stop playing on the computer, it’ll get you nowhere. - Mum, circa early 2000’s @CreateALittle Don’t bother with JQuery, it’s just a fad @TheDanHodson Never charge more than your competitors. @justinlucent “In order to make our website accessible, we would need to rewrite all the content first” @ailin10 Work free for the exposure... an oldie but a goodie, I know @CarlBateman “When you start the project, put a bunch of ‘sleep’s in the code. Remove them with final product, say you optimized it.” @Buck__Mild To spray paint our company name around the city. @evo1 “And this is how you build a html email” @perki You don’t need to write good code, just get it done @BigMikeClassic…

PROFILE Rachael is a digital product designer passionate about clean design and type, and inspired by anything Scandi. BEYOND PIXELS Growing up I loved to paint and draw. I think being an only child had something to do with it – it was a good solo activity! I remember hacking the GCSE system so I could take Art and Graphic Design, and lucked out choosing to carry on with Design at college as I had a ‘hunch’ digital was going to be big! Continuing on my digital path, I studied Multimedia Design at Northumbria University and now I’m a product designer for an agency in Shoreditch called UVD. But after all these years on Illustrator, Photoshop, and now Sketch, I’d been noticing that something felt missing. I was craving getting…

We asked the @netmag Twitter followers for their tips on making a portfolio that will help you stand apart from the competition and get the kind of work you want. STORYTELLING It may be the buzzword of our times, but don’t dismiss the need to show your workings. “Show what didn’t work,“ says @ burning_. “Detail why it didn’t work and what you did to improve it. Take the viewer on your journey, not just the destination.” In a similar vein, @sgolubev advises: “Show how your design has transformed the business”. FIND YOUR OWN STYLE “Avoid the urge to make it resemble a bland, generic, uniform, machine generated, by-thenumbers, uninspired, Bootstrapbased WordPress theme,” says @ Octavector. These established design patterns are safe because they work, but clients love it if…

JOE LOVELOCK Joe is the founder and creative director at London based Studio Lovelock, an agency offering considered design for creative thinkers. w: www.studiolovelock.com t: @studiolovelock site of the Month CSS3, TYPESCRIPT, REACT F37 FOUNDRY f37foundry.com When I started out as a digital designer you basically had a choice of Arial, Georgia, Courier or Times New Roman. These days the wealth of web fonts available is almost overwhelming. In among the noise are certain foundries that rise to the top and consistently produce typefaces I find myself looking for projects to shape around. F37 Foundry is one such place and its crisp site will, I’m sure, only go to further its reputation. In its own words: “F37 Foundry set out to design and build a website unlike any other in order…

s2paganini.com INFO Location: London, UK Coding since: 2001 Areas of expertise: WebGL, front-end development, rapid prototyping, technical direction, game development Clients: Google, Sony, Disney, Ford, Adidas Awards: 16x FWA, 1x Cutting Edge Project of the Year, 1x Site of the Month, 3x Cutting Edge Project of the Week, 9x Site of the Day, 2x Mobile of the Day; 5x Awwwards; 5x Cannes Lions, 1x Silver, 2x Bronze, 2x Shortlist Born in São Paulo, Brazil, but based in London for the past nine years, Silvio Paganini cut his teeth on Macromedia Director and has been working as a developer since 2001, with big-name companies such as Google, Disney and Sony among his clients. He’s been running FLUUUID (fluuu.id), a creative collective, since 2015, and is currently starting up a service to…

Three resources you need to bookmark For even more information on the changing world of SEO, make sure you check out these essential resources. Type SEO into any search engine and it’ll be hard to separate what’s useful, and what’s not. In our experience, these are three of the best places to learn and keep up to date with SEO in 2017. Google http://netm.ag/295-Google Even experienced SEO practitioners forget the basics, so take a look at this Google guide to make it easier for search engines to crawl, index and understand your content. For beginners, we don't think there's a better place to start your SEO journey. A must-read. Moz https://moz.com/blog The industry’s top wizards, doctors, and other experts offer their best advice, research, how-tos, and insights – all in…

If you struggle at times to get your client to buy a font, let alone pay for a multi-thousand-dollar photoshoot, you’ll likely be using stock photography. Here are a few resources to make your diversity directive easy. Getty Images & iStock’s ‘Lean In’ Collection www.leanin.org/getty You may be surprised I’m including these sites, but in recent years, they’ve released a collection of diverse imagery and film in partnership with Leanin.org – the women’s empowerment non-profit founded by Sheryl Sandberg, COO at Facebook. Blend www.blendimages.com This company describes itself as “the world’s leading multicultural commercial stock agency” and “the premiere destination for ethnically diverse stock imagery”. The photography is high in quality and work across a range of budgets. Offset www.offset.com A sister site to Shutterstock, it boasts beautifully art-directed imagery…

ABOUT THE AUTHOR JIMMY RA HERIARISOA w: waaark.com t: @waaark_studio job: Art director, Waaark areas of expertise: Web design, illustration and motion design View source files here! All the source files you need for this tutorial can be found at netm.ag/295-404page 404 POSSIBILITIES FOR A 404 PAGE The demands and expectations of a 404 page are so small that it provides an immense opportunity for the creatives and developers to make anything they like as long as the following two objectives are accomplished. Firstly, the 404 page must make it immediately and abundantly clear to the visitor that the page they were trying to access is, at that moment, unavailable or unavailable via the route they had taken to get there. Secondly, every 404 page, after establishing that the visitor is…

contact us To advertise here, contact our sales team: +44 01225 68 7832 chris.mitchell@futurenet.com FEATURED HOST “… light years ahead of the competition in terms of continuity of service. On the very rare occasion when we have a problem it is resolved immediately and courteously. A first-class technology-based company with excellent customer care” EXPERT TIP DOMAIN NAME CHOICE... Before choosing a domain, make sure you check out the range of new domain extensions now available. There are hundreds to choose from. The Names As well as selling domain names at rock bottom prices, TheNames.co.uk offers great value cPanel Web Hosting, SSL Certificates, Business Email, WordPress hosting, Cloud, VPS and Dedicated servers. If you are a reseller, we offer a comprehensive product portfolio for your customers and resellers, a ready-made private label…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING... KRISTIJAN RISTOVSKI Based in the Netherlands, Kristijan is a web developer making products and helping startups launch with StarterSquad. He’s just open-sourced his responsive testing tool, Sizzy. w: kitze.io t: @thekitze NAEMA BASKANDERI Based in Toronto, Canada, Naema is UX designer/ researcher at Autodesk. You can follow her on Medium @msNaema. w: msnaema.com t: @msnaema QUESTION OF THE MONTH What’s the best way to approach responsive text? Rodrigo Pombo, Argentina KR: Usually, the default solution for responsive text is to add a media query that will change the font size on certain device sizes. But there are a few more things you need to consider too. Think of the vertical rhythm, and change line heights according to font sizes. Be careful with font weight. That sweet…

DESIGNING FOR THE APPEARANCE OF SPEED You can’t control your users’ connection speeds, but you do have the power to minimise how irritating it is for them while they wait for your site to load. This article has some great techniques for making the very best use of whatever data comes down the pipe as soon as it arrives. netm.ag/speed-295 HOW TO SUCCEED AT FREELANCING What’s it really like to be a freelancer? Dan Petty’s new series and upcoming documentary features interviews with some of the most successful freelance web builders out there, with advice you can use on your own freelance journey. freelance.tv WORKING WITH GOOGLE’S NEW INTRUSIVE INTERSTITIALS PENALTY Popups and overlays that obscure content can be very annoying if you’re viewing a site on a mobile device,…

PETER JAVORKAI UI designer at the Adidas Group w: peterjavorkai.com t:@javpet STARK Stark is a colour-blind simulator and contrast checker for Sketch. With this nifty plugin it’s easy to check designs against the eight types of colour blindness. I believe in 2017 it’s a must to design with accessibility in mind. getstark.co BRAIN.FM Sometimes office work can turn into a nightmare if you sit with loud chit-chatters. But don’t worry, get your headphones on and just relax or focus with this AI-generated music. It’s available as a web and native iOS app as well. brain.fm AWESOME SCREENSHOT At the research phase I like to create a board of inspirational layouts, but in the days of crazy parallax scrolling it’s painful to blend together the screenshots screen by screen, so this…

SAMANTHA HANKINS Designer, Mozilla’s The Coral Project www.iamsamhankins.com My love for the web comes from the many ways it can connect people to information, perspectives and communities. I believe that increasing people’s exposure to the authentic experiences and stories of others is the first step to motivating social change. As a result, web designers have a responsibility to look at the things we make and the technologies we use with a critical eye to the way they may exclude people, and then be intentional about inclusion. CATT SMALL Product designer, Etsy www.cattsmall.com Yes, designers can help change the world through the messages they convey online. The internet is global and can reach people in a way not possible otherwise. Projects like Free Rice, Dear Europe and 5 Calls make it…

What’s on your desktop? I’ve been working remotely and from home lately, so as I’m writing down these answers, on my desktop I have my laptop and an espresso. Little things that make your life worthwhile Having the privilege to work from wherever and whenever I want to. If I want to go snowboarding, surfing or to the gym in the morning or afternoon, then I’ll do it. What do you have on the walls? In my home in London, a massive Pac- Man vinyl sticker. What will you do for lunch? I cannot stay at my desk for lunch, I need to go for a walk and after lunch an espresso is compulsory. What hours do you work? Depends. I’m usually an early bird, I’m more productive in the…

2014 Birmingham City Council decides a new website is needed and begins the process of finding the right people for the job 2016 Spacecraft Digital is tasked with an entire rebrand of the website as well as engaging Birmingham’s residents every step of the way JAN 2016 Birmingham’s citizens panel becomes the first of many groups consulted in the discovery phase for the new website, helping us understand the user need alongside existing site analytics FEB 2016 Wireframing of key pages and content types – we begin mapping out any potential custom developments MARCH 2016 First iteration of the new site is created and taken to Birmingham’s ‘Impact Hub’, a community centre within Birmingham that is made up of social enterprises and tech start-ups wanting to build a better Birmingham…

AUTHOR ALEX PIERCE Alex is an art director that crafts thoughtful and strategic digital experiences. Senior Interactive Art Director at Publicis Hawkeye. w: thegeekdesigner.com t: @alexpierce ILLUSTRATOR MARCUS FAINT Marcus (@MJFainty) is a graphic designer running MJ Faint Design Co. in Bath. He also works as an art editor on a national film and television publication. instagram.com/mjfainty You know what’s the strangest feeling? Being one of the few black creatives in the advertising industry, but realising that I had created no work that represented me. That feeling of irony hit me like a gut punch a few years ago. I knew how it felt to be underrepresented by the brands and products you would care about, yet there I was. You hear a lot about unconscious bias in the advertising…

ABOUT THE AUTHOR MARTIN O’DEA w: hungrysandwich.club t: @_hungrysandwich job: Developer and animator areas of expertise: Front-end development, web design, animation WHAT IS BODYMOVIN? Animation on the web is here to stay. From the subtle movements that help make our interfaces feel alive and responsive, to fully animated Canvas experiences and WebGL experiments that are challenging what we once thought was possible in the browser. While the creativity of devs and the capabilities of browsers are increasing, animation on the web has long been a poor relation to video – something that the motion graphics community has approached with caution for years. Developers have relied on libraries such as Greensock and Snap.svg to do the heavy lifting in reproducing animation through JavaScript. While these tools have given a lot of flexibility,…

ABOUT THE AUTHOR SHAWN RUBE L w: www.eezy.com t: @shawnrubel job: Eezy Founder & CEO areas of expertise: Design, Start-Ups, Entrepreneurship The Vecteezy Editor is a free vector editing suite that runs right in your browser. In this tutorial, I’ll cover the basic shape tools and editing tools you can use to edit any vectors on the site. This way you can build badges, buttons, logos, or anything else with relative ease. The GUI for this editor feels similar to Adobe software, so if you already use Photoshop or Illustrator, you’ll have an easier time learning the ropes. But even complete beginners can dive into this and pick up the basics from scratch. For this tutorial, I’ll use these shopping icons from Vecteezy. Just visit the icons page and click the…

ABOUT THE AUTHOR YANNICK MATHEY w: www.prototypo.io t: @_____________y job: CEO, founder and art director of Prototypo areas of expertise: Graphic design, type design, frontend dev Prototypo was launched in 2015 to give graphic designers and type lovers the ability to create personalised fonts. Based on the parametric fonts technology that uses algorithms to generate letters, Prototypo automates the repetitive tasks specific to type design. After choosing one of the three font templates available (two new templates are available on the launch pad), users can draw their own font by moving over 30 sliders (x-height, curves of the serifs, width and so on). The changes apply directly to each character of the Latin alphabet, providing instant feedback on your work. This different approach to type design brings the opportunity to get…