Tabla de contenidos para March 2020 en net

You can add the most innovative functionality and harness the most dynamic frameworks but a site is nothing without a well-designed user interface. Your latest project may have powerful, efficient engineering under the hood but if the dashboard is more Ford Model T than Tesla, you can’t be surprised if users would rather take someone else’s site for a drive. Good user interface design is fundamental to effective web development and yet it can be easy to overlook. For that reason, we’ve dedicated this issue to covering the guiding principles and latest developments in UI. Kicking off our ultimate UI design guide, we look at how you can get the best out of elements like typography, colour palettes, buttons and links and turn them into consistent, reusable components. Then, as…

* SIDE PROJECT OF THE MONTH Tell us what your side project does. GameController.JS (https://netm.ag/2FuWCsj) is a JavaScript library that enables developers to manage gamepads in all modern browsers. Its goal is to remove the initial complexity of the original web API. Why did you create it? While searching for a web API to integrate in a different project, I was surprised to find that there was a standard Gamepad API. I enjoy playing games and it had this cool factor that made it fun to learn. After getting the first snippets working from scratch, I realised that every step in the process required many repetitive tasks and, although not excessively complex, it was going to be difficult to maintain. Building a library to simplify the interface was a natural…

* BEYOND PIXELS As a natural introvert, sitting on the bank of a lake with a flask of tea and a pint of maggots is a great way to recharge the batteries and get some perspective. It’s a perfect antidote to the day-to-day pressures I face. Running a busy design and web development agency for over ten years is an incredible privilege. To be able to work every day doing something I love is rewarding but overseeing a small business can sometimes feel like a 24/7 job. With a never-ending to-do list and expectations constantly drawing me towards ‘doing more’ or working longer hours, finding any sort of headspace in this environment is crucial for my wellbeing. I feel fishing is as far removed from my day job as it…

myfavouritemagazines.co.uk/net/promo20 Offer does not apply to quarterly or 6-month subscriptions GREAT REASONS TO SUBSCRIBE Print edition delivered to your door 13 issues in a one-year subscription iPad and iPhone edition download Android edition download Money-back guarantee CHOOSE A PACKAGE PRINT EDITION PRINT & DIGITAL TERMS AND CONDITIONS: This offer is available to all new subscribers. Discount applies to annual print and print + digital bundle subscriptions only for ImagineFX, Computer Arts, 3D World and Net. Offer can only be redeemed online via the web link stated opposite. Prices and savings quoted are compared to buying full-priced print and print + digital bundles. You will receive 13 issues in a subscription year. You can contact us to cancel your subscription within 14 days of purchase. Payment is non-refundable after the 14-day…

We’re approaching a tipping point in terms of understanding data, which is awesome. Data practitioners have worked hard to demonstrate that data and insight aren’t just mountains of intangible numbers or impenetrable reports. We’ve fought to take the data to the people! We’ve shown the power that can exist in insight, when the data story is told in an engaging and relevant way. We’re also seeing public awareness of data grow. Using NOW Corpus, the online news keyword analysis tool, we can see that the use of the term ‘data’ in the news has grown 70 per cent since 2010 (from 251 times per million words to 429 times per million). With that growth of awareness can come fear and nervousness of the pervasiveness of data and its uses. And…

Website migration projects are full of promise. Switching to a new platform is a chance to address the drawbacks in your legacy site and breathe new life and enthusiasm into your digital strategy. So what are some of the things you should consider to ensure a successful migration? WHY MIGRATE? There may be several reasons for migrating to a new platform. Identifying specific goals will impact on the platform you choose and your approach to development, as well as providing a measure for the project’s success. Simply switching your website to new technology isn’t a fix for poor process; it won’t suddenly enable you to write more blog posts but it may make the process more efficient. Choosing a new platform isn’t easy. There will be opinions from other developers…

https://travelshift.com If the sad demise of Thomas Cook highlighted anything, it was that the ecommerce age has revolutionised the holiday market. And this digital progression has given rise to more savvy, boutique marketing platforms like Travelshift. This glossy brochure site effectively demonstrates their vendor portal for selling travel experiences online to busy but discerning customers. Designed by Parisian purveyors Immersive Garden and lavished with plenty of awards, the site emphasises how users can book a memorable journey in no time. WebGL is imaginatively employed to create an awesome warping effect on the opening screen. Prompted to click and hold by a custom pointer, visitors are met by a burst of breathtaking location shots. The optical illusion is like a picturesque wormhole and halts seamlessly on release so you can select…

https://www.herbieduah.app Designer, developer and photographer Herbie Duah has a vision. Born and raised in Ghana but now living in Phoenix, Arizona, he believes we will all have our own app. Not content to wait around until someone else builds his, Duah has crafted his portfolio in that style. Herbie Duah App, currently in version 1.5, begins as a minimal experience with an abundance of white space. Favouring a zigzag layout with subtle fade-in CSS animations, the structure is understated. An initial summary introduction page interweaves nuggets of text with Duah’s own photography before a neat tab-based menu offers deeper access to work, photos and his impressive resume. The site really comes into its own, however, when we explore the Customize section and the app-like options for changing viewing preferences. Duah…

When it comes to UI design, colour is habitually one of the first things that we enjoy dabbling with but we’re taught that diving straight into visual design is a bad thing. This is certainly true, however when it comes to visual consistency, colour should be a top concern because it plays other roles. Colour in UI design can be mighty effective but since some users (many, actually) suffer from various types of visual disabilities, it’s not always reliable. That being said, it’s not necessarily about the specific colour that’s being used, but rather the type of colour. This may not be true when it comes to branding since colour is used for emotional impact in this regard but, in UI design, colour is also used for communicating intent, meaning…

COLOURS The first step is to save all of the colours to the ‘Document Colors’ swatch if we haven’t done so already – this will make them easier to access when we need to apply them in our design. To do this, open the colour chooser widget from the Inspector, choose ‘Document Colors’ from the dropdown and then click the + icon to add the colour to the swatch. This works the same way in most UI tools. SHARED LIBRARIES Next, we need to convert our document – complete with typographic styles, colours, buttons, common areas and basic components – into a shared library. Essentially this means that every element needs to be a component, even if it consists of only one layer. Click the + button in the left-hand…

It’s impossible to build an effective design system without introducing a few valuable tools in the existing ecosystem. Below are some of the most popular and most promising tools: InVision DSM https://www.invisionapp.com/design-system-manager • InVision Design System Manager (DSM) is a platform that helps teams create, maintain and evolve a powerful design system. The DSM platform includes a Sketch tool, a web view and a set of APIs. DSM provides component search, version history management and a semi-automatically generated style guide. Adobe XD https://www.adobe.com/products/xd.html • Adobe XD is a vector-based user experience design tool for web apps and mobile apps. The tool supports linked assets, which enable you to easily share and consume not only components but also colours and character styles. This is handy if you or your team members…

WebGL renderer The renderer handles drawing the 3D scene using WebGL. It targets an HTML <canvas> element to draw into. You will call the renderer to render each frame of your scene. The scene You can have more than one scene in a project. A scene contains the elements you wish to show, such as lights, meshes and particles. The renderer is supplied with a scene and camera to use to render an image. The camera Three.js has different camera types, including a perspective camera and an orthographic camera, used for rendering 2D scenes or UI elements. You’ll most often use the perspective camera when it comes to 3D. Geometry Geometry can be defined manually or with built-in primitives such as planes or spheres. It can also be loaded from…

In the fragment shader, colour values are required as values of zero to one. Most of us have been around the RGB model of zero to 255 enough to be able to guess the values but our software gives us those values easily enough through the various colour pickers! Converting a colour value over does involve a bit of maths. Changing the value into a percentage will definitely help but even then it’s only part of the way there as the decimal place has to be moved. Start by heading on over to https://www.calculator.net/percent-calculator.html – an online percent calculator. Selecting a colour in something like Photoshop gives us easy access to those RGB values. If the colour selected has a red value of 92, in the online calculator you can…

* CLIENTS FROM HELL I was working with a client who called me almost every other day, including weekends, to ask simple questions that could have been answered in person. It was annoying but I didn’t complain because he paid me on time. One day he asked me to design a flyer to hand out to potential customers. I started working on it using the brand guidelines. I mailed him the proposal and five minutes later got a call: Client: This looks too much like our previous flyer. Make it different, make it POP! Me: Sure. I redesigned the flyer, still using the brand colours and sent him another proposal. Client: No, no, no. What’s wrong with you lately? I feel like you’re relying on the same old, same old.…

Could you introduce yourself to anyone who doesn’t know you? Hi! I’m Ali. I work as a lead instructor at General Assembly, where I teach new programmers to be software engineers. I also have a blog geared towards new programmers – welearncode.com – and I co-host the Ladybug Podcast. I’ve also been a software engineer at a couple of startups. Outside of work I am a digital nomad, so I travel a lot and live out of Airbnbs with my dog Blair. You’re known for your passion for teaching code. Where does that passion come from? My passion for teaching code comes from two angles. First, I learned how to code in computer science 101 class in college, which was a lot later than a lot of my peers. I…

VUE, CORE-JS, CSS FONTSMITH VARIABLE FONTS https://www.variable-fonts.com If typography giant Monotype is to be believed, variable fonts are set to be very influential. Referring to its ‘trend report’ for 2020, it asserted that designers would continue to demand greater versatility to achieve textual harmony. Variable fonts enable this by including multiple typeface variations within a single file, manipulated by code and CSS. This interactive microsite from foundry Fontsmith makes its own case with a beautiful showcase of nine diverse families. Created by London agency Taylor / Thomas, the focus is on presenting their inherent virtues. “We needed to demonstrate in the browser the parameters that can be changed to affect attributes,” explains T / T founding partner Craig Thomas. “The site also provides background to the new font format.” What…

http://thegeekdesigner.com Alex Pierce is a Dallas-based designer and art director who likes ‘making stuff on the internet’ for some pretty high-profile clients, netting an enviable array of awards in the process. This new portfolio site really oozes personality and joyousness for what he does, with a ‘geek’ emphasis laden with retro references to movies, video games and comic books. Pierce is clearly a Back to the Future fan; the opening pre-loader mimics the film’s logo before a pixel art caricature of him zooms in on his hoverboard. Rollover effects and scrolling text are a motif right from the off, alongside the use of bright colours and Typekit’s Lo Res font. His disembodied head bounces around the viewport, winking at each collision, while his biography fizzles with flickering imagery appearing under…

THIS MONTH FEATURING… DESIGN EXHIBIT SHOW OFF YOUR WORK IN NET! Our feature format – the Design Exhibit – offers you the chance to show off your concept sites, portfolio projects and prototypes. This is a great opportunity to reveal your design skills without necessarily needing to have had them developed into live commercial sites. If you’re interested in being featured, please tweet us @netmag or email us at netmag@futurenet.com…

UI design is such an archaic term. What actually goes into the design of a user interface? Aesthetics? Usability? Accessibility? All of them? How do all of these factors unite to enable an optimal user experience and which should come first? Accessibility should always come first, laying the foundations for optimal usability. And then, when a UI is both accessible and usable, it should already look rather decent in terms of aesthetics. Let’s take a closer look at the foundational elements of most designs and what can be done to ensure visual consistency. AUTHOR DANIEL SCHWARZ Schwarz is a UX and UI designer, web developer and maker by background. He now creates content for brands like InVision, UXPin and Adobe. w: http://uxtricks.design t: @mrdanielschwarz…

SIZE Buttons and links, much like typography, should have a few variations. After all, not all actions are of an equal level of importance and, as we discussed earlier, colour is an unreliable method of communication, so it cannot be the main method of influencing visual hierarchy. We also need to toy with size. Generally, I would recommend that button text be declared as 18px (same as the body text) but that the buttons themselves have three variations in size: Normal: 44px in height (rounded corners: 5px) Large: 54px in height (rounded corners: 10px) Extra large: 64px in height (rounded corners: 15px) This enables us to make certain buttons appear to be more important without reliance on colour and also to nest buttons (for example, use a button inside a…

AUTHOR NICK BABICH Babich is a UX designer. He runs a blog called UX Planet dedicated to user experience and counts advertising, psychology and cinema among his myriad interests. w: http://babich.biz t: @101babich Design systems help large industry players to standardise the design process and make it more predictable. A lot of companies try to take on the initiative of building their own design system. But quite often, despite everyone’s best intentions, all the effort that a product team puts into making a thoughtful design system can go straight down the drain. Over the course of this article, I will define what a design system is, what to consider before building a design system and how best to introduce a design system in your organisation. What exactly is a design system?…

Gov.uk https://design-system.service.gov.uk Gov.uk is an excellent example of government design. The design system is comprised of styles, components and patterns, all of which are fully WCAG 2.0-compatible. Lightning Design System https://lightningdesignsystem.com The Lightning Design System enables product teams to build rich enterprise experiences and custom applications with the consistent patterns and established best practices that are native to Salesforce. Material Design by Google https://material.io/design/ Material Design is a great example of a design system that redefined the industry. It introduced a brand new way to produce your designs. Polaris by Shopify https://polaris.shopify.com Polaris design system is a set of comprehensive guidelines and principles that designers can use while building apps and channels for Shopify. Atlassian Design http://atlassian.design Atlassian offers end-to-end design language for creating straightforward and beautiful experiences.…

+ Here are a handful resources to get you up and running quickly, as you start to add WebGL and video textures to your projects. Three.js examples https://threejs.org/examples Three.js has plenty of great starter examples, including some specifically for video textures. Well worth a look to learn even more techniques. Three.js Online Docs – Video Textures https://threejs.org/docs/#api/en/textures/VideoTexture The online docs are an invaluable resource for understanding the code we used in this tutorial in greater depth. I’ve specifically shared the link to the section on video textures here, so you can dive into extra features if you need them. Mobfish – How to Create 360-Degree Videos https://mobfish.net/blog/create-360-degree-videos If you’re looking to create some of your own 360-degree video content to use in your WbGL projects, Mobfish has a guide with…

Shaders are notorious for being difficult to create; even experienced programmers can find them awkward to work with. Building your knowledge of how they work from the ground up will help you if you want to start using them to get creative results in your projects. Here are some useful resources… Pixel Shaders http://pixelshaders.com/sample/ The Pixel Shaders website is a great example of introducing basic concepts and then applying them. There is a very simple interactive code panel that prompts you to change the code to the supplied example. All changes that you make are updated live so you can immediately see when you achieve the desired look. Book of Shaders https://thebookofshaders.com/ Taking the concepts of the previous website a stage further is the Book of Shaders, which as the…

* WORKSPACE Fiasco Design is a creative design agency based in Bristol, UK. Now in our tenth year, we’ve been very fortunate to work with some fantastic brands over the years including Just Eat, National Trust and UWE Bristol. Our studio is part of a larger co-working space called Gather Round, which myself and Fiasco co-founder, Jason Smith, set up in 2019. The space is in an old industrial building, therefore the look is a mix of industrial and New York loft apartment, with exposed brick walls, 4m-high ceilings, steel work and contemporary furniture. The vision was for a mixed-use co-working space for creative individuals and businesses. There’s a mix of open-plan workspace, private studios, meeting rooms, nooks and places for people to gather and share ideas. Our studio is…

https://artsexperiments.withgoogle.com/runwaypalette One of the most exciting advances in back-end web tech is artificial intelligence and, particularly, applied machine learning. In fact Allied Market Research published a report claiming the global AI industry could be worth over $53bn by 2026, citing an increasing need for smart applications. Google is, of course, a pivotal innovator in this field and has released a number of experimental apps that demonstrate beautifully how this work might be applied. Partnering with The Business of Fashion (BoF), its Arts and Culture lab has produced this jaw-dropping visualisation that leverages the Google Brain team’s machine learning platform TensorFlow. By analysing 140,000 runway photographs from 4,000 international fashion shows from the last four years, the colour information was extracted. Machine learning was then used to organise them into an…

https://w-wired.com/ww/pc If machine learning is finding a way into online fashion marketing, then WebGL is proving just as pivotal. Using 3D animation can develop more dynamic, energetic and cinematic campaigns and this URL is just one beautifully shiny example. Promoting a designer watch collection from Seiko’s WW Wired range, Unlock You is deeply rooted in urban Japanese culture. Produced by Tokyo agency Cherry Inc, it personifies the brand’s street style by introducing ‘WW Man’ and his attitude to life. Part Jeff Koons’ rabbit and part the DJ Deadmau5, the bunny-eared character wheels charmingly into view on rollerskates to wave and then dash headlong at the viewer. As you scroll, we see section text float around his movements and various trick animations triggered to flip the camera to reveal videos and…

BRIEF Save Whales is an inside project created by the Red Collar team to publicise their concerns about the state of the environment. Following several serious news pieces on the issue during the summer of 2019, Red Collar decided to try and do something and spent 14 days creating a website that would serve as a digital statement of the team’s viewpoint. DENIS LOMOV Lomov is co-founder and creative director of Red Collar. He guided the creation of the site from the idea to the release. w: redcollar.digital Right now, there’s no shortage of people expressing their concerns about the environment. But is there anything that web designers and web developers can do? New York digital agency Red Collar believes the answer to that question is yes and took 14 days…

Great typography (like many aspects of design) boils down to accessibility. Visual design certainly adds to the user’s overall experience but at the end of the day, users are interacting with the UI, not viewing it as art. Legible letters result in clarity and readable words are what help users digest content efficiently. Both are more important than any visual aesthetic. However, well-designed typography can still be aesthetically satisfying. Black-on-white Helvetica (or a similar font) can be a thing of beauty after only a few simple typographic enhancements. By enhancements, what I mean is tweaking the font size, line height, letter spacing and so on – not the font or the colour of the text. ‘Beautiful’ typography is actually ugly when it’s unreadable because frustration always trumps aesthetics. Great design…

CREATING COMPONENTS Components are a huge time saver and all UI design tools offer this feature (eg in Sketch, they’re called Symbols). In Studio we can create components by selecting all of the layers that should make up the component and using the ⌘K shortcut. USING COMPONENTS Now we can reuse this component by dragging it onto the canvas from Libraries > Document on the left-hand side, although bear in mind that this workflow may differ depending on your UI tool. This method of creating style guides (and eventually creating the design itself) works especially well with modular/card-based layouts, although ‘common areas’ such as headers, footers and navigations are also excellent candidates for a component. Just as we’ve done with our typographic styles, colours and buttons, we must remember to…

A design system is not a static tool but rather a living organism that adapts to the changes in your organisation. Creating a clear governance strategy is essential to making sure your design system can adapt to changes. A process of creating a governance strategy starts by answering some critical questions about how changes are handled, such as: In his article, Team Models for Scaling a Design System (https://medium.com/eightshapes-llc/teammodels-for-scaling-a-design-system-2cf9d03be6a0), Nathan Curtis describes the three common models of governance: Each of the models have strengths and weaknesses but the first is the most fragile because it has a built-in risk – when one unit is in charge of so much, that unit can become a bottleneck to the completion of many tasks. As Curtis mentions…

A lot of effort goes into the average homepage design because it’s often the first point of contact in the customer journey. However, it’s important to not be so eager to impress that you end up chasing users away. Here are some things to avoid: 1. Scroll down hints Something as simple as a homepage shouldn’t require instructions. If utilising the fold to the maximum, just leave a little space at the bottom that suggests there’s more to see. Don’t add more cognitive load when it isn’t necessary. 2. Sideways text Sideways text is for aliens with sideways heads. Just no! 3. Lack of clarity Make it super clear what you’re offering. We don’t need to sound cool or smart in order to sell our product; we just need to…

+ If you are eager to try your wearable designs on platforms other than watchOS, here are a couple of resources to help get you going. Wear OS Design Guidelines https://designguidelines.withgoogle.com/wearos/ These are the design guidelines put forward by Google for Wear OS, which was formerly called Android Wear. It is a lightweight platform that connects to the wearer’s body and provides the correct information at the correct time. It has various resources such as components, notification and navigation patterns, colour and style patterns. Adobe XD UI Design Kit for Apple Watch OS https://www.adobe.com/products/xd/ui-design-kits.html This is one of the resources from Adobe XD, which is basically a template for a smartwatch app offering users a choice of 60 screens, more than 20 components, 30 icons and 6 prototype flows that…