Innehållsförteckning för September 2019 från net

@wixshowcom, Sweden User benefit + AG: The really cool thing about progressive web apps is that they are a progressive enhancement to any website. So even if a browser doesn’t support a feature here or there, the benefits to users whose browsers do support that feature is going to be pretty tremendous. Speed + If you can create a really fast site for 100 per cent of your users and an even faster site for upwards of 90 per cent of web traffic out there, that’s a win in anyone’s book. Icing on the cake + The other bits – push notifications, installation – are icing on the cake and only really useful in specific scenarios. I’ve said it before and I’ll say it again: any site – yours included…

BEYOND PIXELS Ever since the UK was first introduced to Pokémon, I’ve been obsessed! It all started with the Gameboy game and eventually I got hooked on Pokémon Trading Cards. I was nine years old and trading Pokémon cards with my friends in the playground became a daily activity. Back then I wasn’t interested in the game play; I was more interested in collecting cards. The ‘Base’ set, which was the first set to be released, contained the elusive shiny Charizard, the rarest card you could pull from a booster pack. Each pack cost £2.50 and contained 11 cards. One day after begging my mum to buy me a packet, I peeled back the foil and screeched with joy: I had found Charizard! Not long after I managed to collect…

ROB JOZEFOWSKI Senior designer, Project Simply projectsimply.com I wouldn’t say I have one main inspiration for where I am now in my career. My jobs up to this point have been varied, so I’ve picked up nuggets here and there from inspiring and creative people. Sometimes my inspiration has come from being in bad jobs and aiming for something better. I worked with Trevor Johnson at Havas Lynx: he is a truly knowledgeable and inspiring designer and, having been a part of the Factory Records design team, he was someone I very much looked up to. ANNA DAHLSTRÖM UX designer, speaker & coach www.annadahlstrom.com Esse Turnbull, who coached me through my first job in London when I moved here in 2006. Also my head of experience planning, Mark Bell, and…

#322 SUMMER 2019 Get expert advice on increasing your income, spend more time on profitable tasks and build custom Gutenberg themes #321 AUG 2019 Discover the 10 best CSS frameworks, pick up secret skills for improving UX and create a neural net to predict user answers #320 JUL 2019 Create dynamic data-driven animations using p5.js, pick up new skills producing CSS art and build static sites using Jekyll #319 JUN 2019 Take advantage of 19 innovative APIs, use colour theory to improve your user journey and strip distractions from your designsv #318 MAY 2019 Become more flexible by using variable fonts, combine AMP and PWAs to create friction-free sites and improve the UI of your forms #317 APR 2019 Future-proof your mobile design, become a crack code splitter and utilise…

The Unlock the Tomb microsite created for the Tomb Raider movie featured a 3D stack of rocks, which users could click and drag to rotate. Each rock face featured a different pattern, which was required to be aligned in a specific pattern to ‘unlock the tomb’. Solving the puzzle let the user proceed with the contest and unlock special content. Modelled in Blender then exported as FBX files enabled easy importing into three.js. High-quality texture maps over well-crafted, yet low-poly models created a convincing effect of realistic-looking stone. Shadows and dramatic lighting with some colour tinting added to the overall cinematic look. Bump map textures created an even higher level of surface detail to really make the final look work. Combining a stone-on-stone grating sound effect with a slow grinding…

w: nextpoint.co.uk t: @_LeonBrown job: Web developer at Nextpoint areas of expertise: HTML, CSS, JavaScript Access source files here! Download the files here: http://qrin.uk/pt1 WebRTC is a browser API that enables direct communication with a browser on another computer. Communications can consist of any type of data from simple text messages through to streams of binary data representing things such as video and audio. This tutorial creates an object called Screencast to apply RTC data-streaming functionality to your web pages. The full example demonstrating how to use the Screencast object is available from the project URL at the top of the page and includes the following: • signal. php A server script that manages the signal messages sent from the peer computer(s) required to establish a direct connection. • screen.html An example…

t: @muzzlehatch_ job: Designer and developer areas of expertise: JavaScript, React and UX Mention TypeScript to a developer who works with JavaScript and you’ll probably get one of two responses: they will either struggle to understand why someone would not want to use TypeScript or they will struggle to see why someone would use it. I think this sometimes depends on where you started your journey to JavaScript. Often people come to the language from a server-side language such as C or Java, which are statically typed. In these languages, dynamic typing is seen as a real hazard, an unsafe practice. On the other hand, if you’ve started your journey as a developer from HTML and CSS, you’ve probably been more used to the generally more dynamic world of the…

RICHARD MATTKA Mattka is an award-winning designer and developer specialising in VFX. He puts this expertise to work on page 60, showing you how to introduce 3D experiences into your sites. w: richardmattka.com t: @synergyseeker JAMIE STANTONIAN Stantonian is an experience lead at Inviqa and an artist whose work explores the role of technology in human evolution. On page 22, he explores dark UX and design ethics. w: https://inviqa.com t: @jamiestantonian. LEON BROWN Developer and author of e-learning content at nextpoint.co.uk, Brown makes complicated concepts easy to understand and fun to learn. Want an example? Check out his tutorial on screen sharing over on page 76. t: @_LeonBrown VAMSI BATCHU Batchu is a senior UX designer at SunTrust and specialises in UX, mobile animation and JavaScript. He shows you how to conduct…

+ Richard Womack has brought a claim against billionaire Mahmud Kamani and says he was promised a 10 per cent share in the online fashion retailer. A spokesman for Mr Kamani described the claim as “entirely without merit”. https://netm.ag/2JF1Y5D YOUTUBE TESTS NEW AR LIPSTICK EXPERIENCE + Following I/O 2019, Google Search gained its first AR objects with 3D animals. Now Google ads on the web can feature interactive 3D objects, while YouTube AR lipstick ads are another way the company says it is making advertising more appealing. https://netm.ag/2JrFM01 FACEBOOK’S SO BIG, IT’S DESIGNED A NEW OPENSOURCE DHCP SERVER + Facebook has announced the creation of a brand new open-source DHCP server, as it had outgrown the products it was using. This tool, called DHCPLB, will enable it to scale its…

w: evensix.com SKETCH AND INVISION When push comes to shove and you just need to get the work done, you need the Swiss Army Knife, with lots of community support. It never lets you down (maybe InVision does sometimes). Hats off to Sketch though: still the best and long may it last. https://www.sketch.com/ GATHERCONTENT The best content planning, prioritisation and defined workflow in the world will still never prepare you for the clusterf**k that ensues when copywriters and clients create content to be published in a Word doc. The fix? GatherContent – it couldn’t have come soon enough. https://gathercontent.com/ GOOGLE SHEETS In my opinion, Google Sheets is underrated as one of the cornerstones for web design and development. You know that old expression: good design is something you don’t notice but…

Many design agencies and software houses push the idea of creating a design system from scratch. While the benefits of a bespoke system can be very appealing, the time and money it requires can be prohibitive. Building a new design system requires the ongoing recreation of new components and redefinition of how to use them. That involves designers constantly redesigning and developers constantly rebuilding. This sucks up team productivity and costs can spiral out of control, which particularly problematic for startups with limited resources and time. Is it really worth it? An alternative is to select an off-the-shelf design system with tried and tested benefits that you can take advantage of from the get-go. You can use its existing documentation and principles and match them to a user interface (UI)…

9 THINGS TO KEEP IN MIND WHEN LOOKING FOR A WEB DESIGN MENTOR https://netm.ag/2JpOVoL + A web design mentor can help you grow but finding the right mentor can be tricky. In this post for Web Designer Depot, Jeff Cardello lists nine things to keep in mind. GET MORE FROM YOUR MENTOR https://netm.ag/3236aVf + There’s no substitute for having a stream of mentors in your life. In this article, Tom Manning speaks to Marc Lewis of London’s School of Communication Arts about what you should look for in a mentor and how to build a powerful working relationship. 6 WAYS TO GIVE BACK TO THE DESIGN COMMUNITY IN 2019 https://netm.ag/2Xo4mrs + Giving back to the design community not only makes the industry stronger but can aid your development as well…

MARK BILLEN Billen is a freelance writer who has been writing about web design and technology for over 15 years. w: markbillen.com t: @Mark_Billen BLENDER, DRACO, NUXT.JS RENAUD ROHLINGER https://renaudrohlinger.com/ You may recall some industry praise last year for a superb web game called Detective Moustachio. The project was lauded by Awwwards, CSS Design Awards and FWA, with creator Renaud Rohlinger making a name for himself. Well, he’s back to deliver an update to his own online portfolio that literally ‘blends’ his WebGL skills with a distinct Japanese flavour. Deciding to move there from his native France after a recent trip, the site is dotted with attractive Kana characters and animated fonts. “With this portfolio I tried to express what I saw and felt during my trip to Japan,” he explains.…

What’s on your desktop? The new book Herman Miller: A Way of Living. A leather mouse pad from Ugmonk. My custom Faculty S’well bottle from our launch package. Ellsworth Kelly USPS stamps. What’s on the walls? Our own Good Work poster. Brooklyn Bridge Typo Edition letterpress by Cameron Moll. Alphabirds Foil by Jessica Hische. Design Makes Everything Possible poster by Laura Bohill. Make Everyday Things Beautiful poster by Joseph Alessio. Space Shuttle poster by Aaron Draplin. Freedom poster by James Victore. What will you do for lunch? Ride bikes into downtown Boulder, for either pizza or tacos. What hours do you work? 9 to 5. What else do you do in the office? Chat with fellow designers and illustrators at Roost. Make espresso drinks with our Breville Oracle Touch. How…

DECEMBER 2018 Nesta emails brief to ToyFight. JANUARY 2019 Kick-off meeting and workshop between ToyFight and Nesta. FEBRUARY 2019 ToyFight begins conception phase, which includes a first look at designs and an animatic. FEBRUARY 2019 Prototypes initial development. MARCH 2019 Starts visual design phase, after concept feedback. MARCH 2019 Creates brief for and kicks off the illustration. MARCH 2019 After design sign-off, starts full development phase. APRIL 2019 Carries out content population, along with QA and UAT. APRIL 2019 Launches site with high fives all around.…

Create or download models with animations There are hundreds of file formats available for 3D models. The three.js library has many loaders available to handle these formats, including OBJ, FBX and glTF. Head over to Sketchfab (https://sketchfab.com) or Mixamo (https://www.mixamo.com) if you haven’t already to download a model with animations included. Alternatively you can use Blender, Cinema 4D or other 3D applications to create your own models and export their animations. When you import your model with animations attached, they will become accessible in your three.js code. Using the mixer class In three.js animations are handled by the mixer class. This is typically done after your model loads, when you add it to the scene. The loader exposes the animations array of the loaded model. You can create a mixer…

+ Traditional browser communications require a server to act as a middleman between clients. Aside from facilitating the initial connection, WebRTC changes this by enabling browsers to send data directly to each other without involvement of the server. Removing the server’s requirement for handling data traffic between browsers opens significant opportunities to reduce the costs of operating web apps. Heavy data requirements, such as broadcasting video and audio, will increase bandwidth consumption, resulting in additional costs when your hosting limits have been exceeded. These concerns are eliminated when the server is cut out of the equation by enabling data to be sent directly between the browser clients. There are no restrictions on the types of data or their purposes that can be sent between client browsers using WebRTC. If the…

w: vamsibatchu.com t: @vamsibatchuk job: Senior UX designer, SunTrust Banks areas of expertise: UX, mobile animation, JavaScript Generally whenever a product is being developed by a company, one of the most important aspects to deal with early on is to understand the generic landscape where the product will compete. This can be achieved by performing a competitive analysis study. This also helps the business to compare the product’s unique features against the competition in the market, identify potential user types/personas and, most importantly, gain a view on their visual language styles. Let’s look at a few advantages of the analysis when it comes to the design aspect: Helps the design teams to identify and solve common usability issues. Informs the design process of the products out there in the market. Helps…

+ The marketing and strategy industry is growing at an insane pace and there are new innovative techniques to conduct competitive analysis. Let’s look at a couple of them: PEST analysis A PEST analysis method is used by business and engagement strategists to discover and evaluate micro factors that affect the business over time. This framework also understands the opportunities and the threats involved because of the political, economic, social and technological forces. The output of this analysis is useful in informing other analysis techniques such as SWOT. It also helps in various business activities, such as product planning, assisting change initiatives and technology development. Porter’s Five Forces This is a very useful strategic analysis model that helps in explaining why various businesses and industries are sustaining at multiple levels…

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…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING… AARON GUSTAFSON Gustafson is a web designer, author, evangelist and teacher who’s been involved in web standards since 2005. He currently works as principal program manager for Microsoft in Seattle. w: www.aaron-gustafson.com JOE LEECH Based in Bristol, Leech is a UX and product management consultant, conference speaker and author of the book Psychology for Designers. w: mrjoe.uk t: @mrjoe QUESTION OF THE MONTH What are the biggest myths or misconceptions when it comes to psychology and design? Izaan Carty, Singapore JL: That psychology can quickly and magically fix your poor performing website or app. That being said, understanding the user’s mental model for interacting with your product can deliver transformational change when it comes to improving your app or website, if done in the…

A sole web professional is more likely to offer a personal, customised level of support and advice that may not exist with a larger company. Clients will feel like you care more. @MySiteExpert More people to be ignored by the client when making decisions at an agency. @danjdavies I agree with @MySiteExpert but… working as a sole web professional can also be like being a single parent. You gave birth to the child and now you’re responsible for it for life with no one else to share the load. @jackbrighton Direct accountability and, hopefully, clarity and honesty. @simonminter A sole web professional can fully dedicate to your project and have one-to-one interaction with you, in a larger company the information get passed from account managers to others involved on the…

We all know that grabbing a visitor’s attention is crucial if you want them to stay on a page and enjoy all that awesome content you’ve worked hard on. But exactly how do you go about doing this? We asked @netmag’s followers for their advice on how to craft heads and subheads that make it impossible for visitors to ignore your content. PRESENT TENSE @Ampmob says there’s a number of bare minimum requirements for writing quality headers; these include using the active voice and present tense. They added: “Write and rewrite again, don’t mislead but entertain.” ATTRACTING ATTENTION “Headlines should grab the reader’s attention”, says Claire Winter (@ClaireWinterUK). She goes on to add: “The subheads should keep them reading the feature. Many people scan articles, so make sure the subheads…

In the past few decades the user experience profession has taken on an increasingly important role in business, evolving from a ‘nice to have’ to being recognised as an essential competitive advantage. Today, in training our clients to improve their UX maturity, we’re helping them metamorphose into their final form: the ‘user-driven corporation’ – Jacob Nielsen’s term to describe a business that’s absolutely centred on user research to drive its overall direction. This means looking to understand the real problems people face and using these insights to create products and services that address them – perhaps helping people’s lives in the process. But if we step back and reflect on what this looks like to those less invested in the outcome, we might see things differently. Because, to an outsider,…

This month… COFFEE VAN SERVICE PROFILES FRANCO RUARTE Designer at Appnovation. Passionate about all things design. Lover of urban photography. w: www.appnovation.com t: @appnovation JOSHUA GARITY Founder of over-60-award-winning UX agency Candorem, based in the United States. w: www.candorem.com t: @iamlucid JACOB BRYANT Senior designer and developer working at Holograph in sunny Hastings. w: www.holograph.digital t: @Jacobaimlessboy BRIEF Coffee is a beverage that web designers and the world beyond cannot resist. For this issue think how you could bring your mobile coffee-van service alive on the web. How can visitors find you, what are your specialities and what other services make you great? FRANCO RUARTE NOMAD ROASTERS Uniting coffee drinkers and sellers by bringing you a mobile-first platform Traditionally coffee vans pick a spot with high footfall. They stick to it and gradually build a customer…

NOVEMBER 2016 Faculty quietly gets up and running, as Chris Shiflett and Sean Coates continue working with Samsung. NOVEMBER 2017 Chris Merritt and Doug Wilson join the Faculty team. DECEMBER 2017 They have dinner at Frasca with their friends, peers and role models to celebrate new beginnings. DECEMBER 2017 Officially announce Faculty and launch the website. DECEMBER 2017 Faculty sends packages with laser-engraved S’well bottles and notepads to friends. JANUARY 2018 Nick Sloan and Erin Sizemore join the Faculty team. MARCH 2018 Sara Distin joins Faculty. APRIL 2018 Faculty launches Tia, one of its first projects as a team. JULY 2018 Publishes Good Work poster to hold itself to those standards and encourage others to do the same. MARCH 2019 Launches Simply Framed’s new site.…

Three.js documentation To really master the art of 3D on the web, you should check out the full documentation for three.js online. There are plenty of examples to teach you the latest tricks and techniques, as well as detailed documentation on all the classes and methods. Check out the three.js docs here: https://threejs.org/docs Testing 3D models To save yourself some stress and many lost hours, it’s a good idea to test out your models in one of these online viewers. You can verify the model data is good and tweak out some settings before importing glTF Viewer: https://gltf-viewer.donmccurdy.com/ Three.js Editor: https://threejs.org/editor/ Sketchfab Sketchfab is another great resource for a wide range of 3D models and animations. Both FBX and GLTF formats are supported. A variety of licenses are also available…

+ WebRTC is often associated with the WebSocket API for facilitating initial connection signalling. While this API perfectly matches the signalling phase’s real-time communication requirements, it’s not always an option where cheaper hosting or single-direction scripting languages are used. Although less elegant than the WebSocket API, HTTP requests can be used at regular intervals for receiving new message data. Acting the same as any other page request, any server compatibility limitations by restricted hosting plans and single direction scripting languages can be easily sidestepped. This page polling is not real-time communication, hence introducing a delay between messages received at set intervals. This delays reactions to each published message – slowing the process of establishing a connecting communication channel between the two client browsers. Another disadvantage is page connection overhead and…

+ With its numerous advantages, a competitor analysis has become an integral part of strategic planning. Strategists have started considering external and internal factors when crafting new business models for a product or service. Due to its scalability, the process of this research can often become huge and tough to manage using spreadsheets. In response to this, a few companies have developed some innovative tools to quickly assess how businesses stack up against their competition. With the help of these tools, people can spend less effort on the analysis and use that time for marketing and improving their product. Here are some of the tools: Wappalyzer https://www.wappalyzer.com This is one of the simplest, yet most effective tools to find out the software stack being used on a website. Wappalyzer is…

w: https://uxtricks.design t: @mrdanielschwarz job: Creator of UX Tricks areas of expertise: Product design, UX, design tools Empathy is a fundamental quality that all designers must have if they have any hope of designing truly valuable products. But what does empathy actually mean and how can we actionably use it as a method of conducting user research and acquiring insights? First, let’s set up a definition of empathy by comparing it to sympathy. When we learn of a problem and think that the bearer of that problem is undeserving of it, this is called sympathy. As a result, we might wish that the problem didn’t exist, although since we’re not able to really experience its impact – after all, it’s not our problem – we might not know how or…

Change your mindset + Don’t think of it as designing a product. Designing a product puts us face-to-face with the product itself and closes us off emotionally, whereas if we think of it as providing a service, this instead puts us face-to-face with the user in a more open environment, where we’re better positioned to ask questions. Ask questions We can’t learn about the problem if we’re not willing to listen and to listen we first have to ask questions – of our users, our stakeholders and anybody else that may have insight into the problem. Try throwing in a few randoms; you just never know what other audiences might be experiencing the problems and if there are any, they might be experiencing it in a different way. Be selfless…

PLUS Improve your time management: work smarter, not harder Perfect automated accessibility testing with Pa11y Gain expert advice to help your job hunt as a developer ISSUE 324 ON SALE 5 SEPTEMBER PRINT EDITION, BACK ISSUES AND SPECIAL EDITIONS AVAILABLE AT myfavouritemagazines.co.uk DIGITAL EDITIONS AVAILABLE ON ITUNES, GOOGLE PLAY, KINDLE, NOOK AND ZINIO net.creativebloq.com…