net的Summer 2019目录

Eoin Ward, Edmonton, Canada Google Docs AC: While limited in its scope, Google Docs (within Google Drive) can be a great, simple and accessible tool for documentation or at least give you a solid start. Style guide tools There are many other tools to aid design system documentation and also the design, build and management of design systems. Style Guides (http://styleguides.io/tools) is a good place to search for them. Just be wary of which tools you invest in. Your team is going to invest a lot of time in these tools, so you need to be confident they will still exist a year from now. Sketch When it comes to design, I’m a big fan of Sketch. Sketch’s nested symbols, symbol overrides and Sketch Library are invaluable when working with…

Whether it’s making that sale or adding a prospective client to a mailing list, if that all-important call to action doesn’t work, all the effort involved in making the site look great in the first place might be for nothing. We asked @netmag’s followers how to make those calls to action truly top drawer. PERSON FRIENDLY Tailoring your language is a good idea, says David Leonhardt (@amabaie). He advises: “Use second person all along the way, except for the button people need to tap/click. The first person has proven more effective.” TEST THEM Get some quality control on the go by making a list and whittling it down via testing, says From Scratch (@scratch_posts). “Write a long list of possible CTAs, narrow it down to your top five and then…

LAUREN WATSON Digital producer w: https://www.tecmark.co.uk t: @laaureyy ASANA Asana is a great project management tool that works across different departments, including freelancers. It allows for myself and the team to keep track of what needs to be done, as well as highlight anything outstanding and anything up and coming. https://app.asana.com/ INVISION A wireframing prototyping tool for easy collaboration between designers and the client; the end result is pretty much how the live site / app would look! The results are time-saving for everyone involved in the project, as well as giving the client the best possible vision from the start. https://www.invisionapp.com/ UNSPLASH There is nothing complicated here; it is quite simply a high-resolution image website. The images are free to use and it is straightforward to find what you want. Also,…

The IT industry is continually evolving and, with technology advancing faster than ever before, the importance of being completely up to date has never been as vital. With the current pace of change, the world that we face next year, next month or even tomorrow will be very different to what it is today. Technology is the biggest catalyst for this change so, for workers today, responsiveness and dynamism is more important than ever. As in all industries and sectors, being aware of the latest trends and developments will always be beneficial to career development but, for IT professionals, being up to date often means being ahead of the curve. Making sure you know exactly what’s going on and what’s just around the corner can make a massive difference to…

TOBIAS AHLIN Full-stack designer and teacher What’s on your desktop? A few different folders with machine-learning tutorials and a screen recording of VoxVote’s wonderfully playful sign-up animation. Little things that make your life worthwhile Conversations that produce endless tangents, the smell of a new book and salmon croissants with iced lattes. What’s on your walls? Plants, a huge map from 1953 visualising the economy of Europe after the wars and framed pictures in a mosaic pattern. What will you do for lunch? Grab a Poké bowl and eat it down by the water with some friends. What hours do you work? I usually start at nine and work from home until lunch but the rest of my routine is decided by my mood and the day’s weather. What else do…

In reality, a customer journey map is a simple illustration of all the detailed touchpoints that the user might come into contact with when they are planning to achieve something. There are a lot of ways in which the visuals can be created, such as Photoshop or Sketch. In fact, there are a ton of tools to make this mapping process easier. Here are a few you can use to create a sample journey map. Microsoft Visio https://products.office.com/en-us/visi This is Microsoft software can be used to create a variety of user flow diagrams. With the help of this visualisation tool, users can also create complex customer journey maps with data input. UXPressia https://uxpressia.com UXPressia is customer experience platform that is mostly cloud based. It is very useful in helping the…

When conducting a split test, what do you need beforehand? First of all, you need to decide upon a metric that you can measure that will tell you which version of the test is better. Often enough, this metric is the CTR (Click Through Rate). However, you might also want to track the success rate of an entire funnel; firstly because a singular interaction rarely tells us a lot about the user intent (meaning users can misclick based on confusing information) and secondly because, at the end of the day, success rate is the most important thing after ethical design. Secondly, what will you do with the data? Obviously you’ll want to implement the winning version but when it comes to user-testing tools like Maze, we’re welcomed with an abundance…

CRAIG GRANNELL Grannell has been smashing words into shape for nearly 20 years. He mostly writes about tech, games and black rectangles but he makes an exception on page 60 to talk about how you can gather more green ones. t: @craiggrannell RUTH HAMILTON Hamilton spent three years on the net team before becoming deputy editor of our sister site, Creative Bloq. She shows off her skills with a piece on growing your workflow on page 66. w: ruthemilyhamilton.wixsite.com/portfolio AHMED ABUELGASIM Abuelgasim is a front-end developer at Potato and has expertise in CSS, JavaScript and Angular. On page 76, he shows you how you can create custom themes for WordPress’s editor Gutenberg. w: hungryphilomath.com REBEKA COSTA BRABO Costa is a content writer at Justinmind, a prototyping tool. She lies awake at night…

88-YEAR-OLD TRIES HER HAND AT CODING Grandma Pamela Sweeney went back to work at her grandson’s firm, Quickfire Digital, to try out coding and website design. Sweeney’s lifelong interest in technology saw her working on one of the earliest computers in the 1960s and 1970s. https://netm.ag/2wNCUmX A11Y: AN URGENT PRIORITY FOR THE PUBLIC SECTOR A11Y regulations due to be introduced in September mean major upgrades for public sector websites and digital platforms, warns Sigma’s Hilary Stephenson. The Public Sector Bodies Accessibility Regulations will require all new public sector websites and apps to meet certain accessibility standards, such as being compatible with speech recognition software. https://netm.ag/2KJqJ2U ITALY OPENS ANTITRUST PROBE INTO GOOGLE Italy’s antitrust authority became the latest international regulatory body to open an anti-competition investigation into Google, after energy company…

For all the benefits that technology brings, there is a dark cloud that hangs over all of us. This cloud chases us in newspapers every day and is felt across the entire world. It makes us fear for the future and question our habits – our youth is even skipping school to demand action. This cloud is mostly made up of CO2 and its name is climate change. Among the many culprits of rising carbon emissions is the IT sector. It embodies the very thing that has defined the 21st century and includes everyone from UX designers to tech giants such as Apple or Google. It connects the entire globe and, unsurprisingly, requires a lot of energy to operate. Data – and our growing need to send and receive it…

Billen is a freelance writer who has been writing about web design and technology for over 15 years. w: markbillen.com t: @Mark_Billen WEBGL, THREE.JS, GSAP UNLEASH THE BEAST https://www.dodge.com.mx/muscle Anyone old enough to have a fondness for 1980s television will doubtlessly recall The Dukes of Hazzard. It followed the madcap exploits of the Duke brothers and their customised ‘General Lee’ that made a generation fall in love with the Dodge Charger. Fast-forward 40 years and Dodge is still going strong, with modern models of its iconic Charger and Challenger muscle cars available to nostalgic petrol heads. Unleash The Beast is a Mexican brochure site from agency GrupoW that offers a digital tour of both cars. A brief intro sequence transitions to dark frontal shots of each, with headlight animations and…

PROFILES ALEX HUNTLY Huntly is design director at Lunar Works, a web app design and development agency. w: https://lunarworks.co.uk t: @LunarWorksLab JORDAN DOBNEY Dobney is a web designer at JH, based in Nottingham. w: www.dbo.design t: @jorddobbo EMILY BRENNAN Brennan is a digital and motion designer working at Redweb in Bournemouth, UK. w: redweb.com t: @emilybrennan BRIEF Who doesn’t like to sit outside and enjoy the ambience of a garden or outside space? For this issue, we want you to bring to life all the plants and accessories that will make this happen. Think recommendations, inspirational ideas and, of course, ease of online purchase. ALEX HUNTLY BLOOMS A site designed to spark those creative ideas for your garden Seeing a product in a real-world scenario, as opposed to a studio, adds authenticity and helps users get…

ABOUT THE AUTHOR w: hungryphilomath.com job: Front-end developer at Potato areas of expertise: CSS, JavaScript, Angular Although WordPress is most commonly used for blogging, custom themes mean developers can customise the layout and styles of a website and thus use WordPress for any type of site. Furthermore, the latest version of WordPress ships with a new editor, Gutenberg, that introduces more flexibility and features and enables the easy creation of media-rich pages and posts. We will create a Gutenberg compatible, custom WordPress theme for a simple site with a home page containing two reviews and an items page containing two items. For faster development we’ll do this locally, then migrate the site to a live server. WordPress stores content in a MySQL database, so we must create one locally. To do…

ABOUT THE AUTHOR w: vamsibatchu.com t: @vamsibatchuk job: Senior UX designer, SunTrust Banks areas of expertise: UX, mobile animation, JavaScript For any business to grow, it is vital to understand its customers and the journey they take when interacting with the business/product. In the same way as we use GPS maps to guide us when we travel, customer journey maps help businesses to understand the user pain points and identify important things such as: Understanding various customer touchpoints and business needs at all the different stages in the sales funnel Identifyingthe logical stages and the gaps between the ideal customer experience and the current experience being offered Prioritisingthe development priorities and enabling the business to concentrate spending efforts on what features matter the most. In this article, I will explain the…

THIS MONTH FEATURING… ANDREW COULDWELL Originally from Yorkshire, Couldwell is a designer who codes. Now based in New York, he’s worked internationally, in-house and remotely on projects for leading brands, agencies, startups and charities. w: roomfive.net t: @andrewcouldwell MARK ROBBINS Based in Brighton, Robbins is a CSS and email geek who’s given talks globally. He’s product management senior manager at Salesforce. w: codepen.io/M_J_Robbins t: @m_j_robbins QUESTION OF THE MONTH Is there a difference between ‘system design’ and ‘design systems’? Are there any resources to help me get my head round this terminology? Avaya Neal, Portsmouth, UK AC: Yes, ‘system design’ and ‘design systems’ refer to different things. You can design systematically without having a design system. Systematic design is the act of creating reusable and consistent elements and guiding principles – be it…

Side project of the month INFO job: Fulton is a UX designer, coder and tea-room manager at Prototypr.io, a company made with his bare hands and no investors. w: https://prototypr.io t: @graeme_fulton Tell us what Letter does. Letter is a dynamic email tool that redefines the workflow of making a newsletter. It integrates with popular design tools. Start by designing in Adobe XD, Figma or Sketch and then export your artboards straight into Letter as HTML code. Within Letter, there’s a drag-and-drop builder that populates your designs with content at the click of a button. Finally you can send the email using your favourite services. Why did you create it? I don’t believe humans should be doing mundane, robotic tasks. Creating email newsletters happens to have lots of those. It used…

BEYOND PIXELS Labelled by teachers as a daydreamer, the chalk and talk approach of school lessons never worked for me. On the other hand, games always stood out as an easy method to learn without the reading, writing and listening. It was receiving my first computer as a Christmas present in the 1990s that really made a difference. Computer games played a significant influence in developing computational thinking skills. From here, I became interested in creating computer games, which taught the programming skills I now use for web development. Games are still a significant influence in my work as a web developer. Most obvious is the practice of analytical thinking through games such as chess and Advance Wars, helping to recognise risks and opportunities relating to web development projects. Understanding…

INFO job: Founder of Change Sciences w: pamela.is t: @paminthelab Our lives are becoming more and more intertwined with technology. But there’s something missing: emotional intelligence. For example, our smartphones don’t know if we are having a good day or a bad day. As Pamela Pavliscak, founder of insights and innovation studio Change Sciences, puts it: “Technology is developing more IQ but it lacks EQ.” Pavliscak has made it her mission to help organisations create emotionally resonant and durable products and services. To raise awareness of this oft-neglected emotional aspect and get us to rethink the way we build products, she has just written a book called Emotionally Intelligent Design, which introduces a new approach to design that will lead to more empathic technology. “I define emotionally intelligent design as design…

ROBERT FENECH Freelance web designer and developer robfenech.co.uk When I first started out as a freelancer, I was offered a chance to work on a fashion site that was pro-fur. I’m opposed to the fur industry and, despite needing the money to make ends meet, I declined the work. I had to put my morals above my need for money, no matter how difficult it was. There is a line for every designer and I do think it is hard to turn down paying work. I suppose it comes down to your own moral compass and what you find close to the line, rather than over the line. CODY WALTON Creative director codywalton.com A recruiter reached out to me regarding a creative director job at an agency of which I’d…

INFO Location: Stockholm, Sweden Established: 2004 Expertise: Design, development, teaching Clients: Spotify, GitHub, Minecraft https://tobiasahlin.com/ Swedish designer and developer Tobias Ahlin is living proof that the saying ‘those who can’t do, teach’ is, well, bunk. He certainly does teach, both in his formal role at Hyper Island in his home city of Stockholm and as a popular speaker at conferences around the world. But his ‘do’ resume is just as impressive. Ahlin was in his early 20s when he joined Spotify and was made responsible for the user interface design of its apps, on everything from iOS and Android to Windows and obscure stereos. He went on to work as a designer and developer at GitHub and then experience design director for Minecraft at Mojang. He’s been freelance since January…

2 JULY 2018 Team agrees a creative direction and picks a story to bring to life. 2 JULY 2018 Illustrates storyboards. 3 JULY 2018 Models and rigs 3D assets. 3 JULY 2018 Builds basic framework for website. 4 JULY 2018 Gets underway with 3D animation. 4 JULY 2018 Works on the pacing of the story and typography animation. 5 JULY 2018 Much more 3D animation. Team piece together the music and sound effects. 6 JULY 2018 Team finishes off 3D animation. 6 JULY 2018 Refines the website build and adds the CSS effects.…

1. User testing Crouch notes that the Vidsy team used to skip user testing but it turned out to be more valuable than they’d thought. “While previously it was skipped for the sake of speed and not wanting to bother the bigger companies that use our platform, this ultimately resulted in lots of wasted time building products they didn’t need,” he says. “More recently we have found users quite receptive to being asked their opinion as it ultimately makes a product better suited for them.” 2. Client relationships Personal recommendations are invaluable. “Your relationships might be your most lucrative sales tool,” says Dunham. “I’m a designer. It feels like there are approximately 4,8957 billion other designers out there. The unique relationships I cultivate are the only thing that not a…

ABOUT THE AUTHOR w: https://uxtricks.design t: @mrdanielschwarz job: Creator of UX Tricks areas of expertise: Product design, UX, design tools Naturally, as human beings, we have assumptions. If we implement these assumptions, we run the risk of being wrong. This means we can waste time, money and resources developing an app or website that either isn’t useful (because we didn’t user test) or is useful but designed wrong (because we didn’t usability test). Despite knowing what users tend to like and dislike, we have to remember that we ourselves are not the user. We don’t experience the problem the user faces or, at least, not always and almost certainly not in the exact same way another user does. As designers, we may be knowledgeable but we are not wise until we…

ABOUT THE AUTHOR w: richardmattka.com t: @synergyseeker job: Creative director, designer, developer areas of expertise: Shaders, VFX, WebGL WebGL lets you create a virtually unlimited variety of immersive browser-based experiences. Interact with life-like models that speak and react as you engage with them. Experience cinematic sequences, augmented reality and dynamic videos. Turn on your VR headset, get behind the wheel and take a virtual car for a spin. All of this is possible, right in the browser without plugins. In this tutorial, you’ll learn how to load 3D models using two popular formats (FBX and glTF). Additionally, you’ll discover how the three.js animation system works and how to access your model’s animations. You’ll find out how to run and control the animations, as well as how to blend between multiple animations…

CONTACT US To advertise here, contact our sales team: +44 01225 687 311 george.lucas@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 energy-efficient 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 managed…