Tabla de contenidos para February 2019 en net

When perfectly executed, design is a fluid, flexible medium. Think of some of your favourite sites and apps: a significant trigger of the surprise and delight you felt the first time you used it would undoubtedly have been down to the way one element effortlessly flowed into the next without you having to think about it. But, ironically, achieving this kind of fluency in your own work isn’t always so straightforward. You need to be able to think like your user and anticipate the way they’ll travel through your site. So, to give you a helping hand, we’ve asked Joshua Garity to put together a comprehensive guide on developing user flows, understanding each step taken by visitors to your site and carrying this insight through into your wireframes and prototypes.…

Tell us what your project does. Design Fragments is a series of typographic exercises featuring free and open-source fonts. As the name implies, they aren’t full designs – more like excerpts from things like print pieces, websites and dashboards. The concept is a little like Dribbble: I don’t do an entire layout or website, I just focus on one small part of a larger design. Why did you create it? I kept running across open-source fonts that I really wanted to use. I also wanted more opportunities to work with typography. Most of my official projects are more comprehensive; I needed quicker, lower-stakes experiments that gave me space to try new ideas. What were you hoping to achieve? To demonstrate high-quality design done without high-cost type. I’d especially like to…

In my career as a web and software developer, I’ve met many other IT professionals who, like me, are musicians. I believe there is a connection between these two disciplines: both require a combination of left-brained logic and right-brained creativity. Music is, after all, a mathematical structuring of sounds, especially in the Western tradition begun by the Pythagoreans in the 6th century. The harmonies they passed down are constructed with integer-based ratios between one frequency and another. I actually got into web development because I was a musician. In 2002, I was building a career as a performing songwriter and knew that the whole music industry was becoming digital so I would need to know more about it. Thus, I began my path as an autodidact. At that time, the…

People relate to a product, service or experience when they can connect to it on an emotional level. It’s natural that understanding humans emotionally is part of the puzzle when designing effectively for voice. In order to design communication patterns between human and machine, we need to consider what defines our own communication patterns. Many of us seek to communicate intentions to machines with minimal ambiguity, which suggests simplicity and core competence are the building blocks for voice technologies. Spoken voice has advantages over written text, both in speed of input and how humans derive additional meaning from a response. The products and services that harness this power in a useful, non-invasive way will be those that profit most. Google’s demonstration of its Duplex technology drew a big reaction when…

Back in 2016, I was lucky enough to be selected to be part of BBC Two’s Big Life Fix. The show saw a team of designers, engineers and makers take on challenges across the UK for individuals who were struggling with day-to-day life. We were effectively paired with and designing for one end user and it ended up being an extremely rewarding and revealing design experience. There are three main reasons for this. Firstly, designing for one generates empathy between the designer and end user in a way that isn’t possible when you’re designing for the masses. The lines blur and you find yourself thinking about the person and their situation around the clock. My first ‘fix’ was for a man named Graham who is living with locked-in syndrome as…

www.danielebuffa.me Considering how hotly contested places in Google’s prestigious Creative Lab are, it’s a welcome surprise to be talking to one of the programme’s Fivers for the second time in a year. Daniele Buffa (www.danielebuffa.me) completed his Creative Lab placement early in 2018, having worked on a Cannes Lion award-winning project and since then has turned down a job offer in New York to stay in London, where he’s just started work at Phantom (phantom.land). We were keen to find out more about Buffa and his work. Hi! Can you tell us a bit about yourself and how you got started in web design? Hey! I’ve been interested in design basically all my life. I remember being a 14-year-old having fun with Photoshop every afternoon and trying to learn as…

Tick Tock (ticktocktea.com) is a family company that’s been obsessed with tea for over four generations. Founder Benjamin Ginsberg pioneered rooibos – the leaves that make Tick Tock so special – over 100 years ago, before his son, Henry Charles, built it up into a thriving tea concern. Henry Charles passed on his passion to his son, Bruce, who in turn introduced Tick Tock to the UK. Today, Ginsberg’s great granddaughter, Georgia, is at the helm. With such a long and vibrant history, Tick Tock needed a site to tell its story and that’s where ShopTalk London (shoptalklondon.com) came in. What was Tick Tock’s brief for this site? JW: Very simply, they wanted the website to tell the story of Tick Tock. The company has a rich family history, with…

User flows are flowcharts with a UX spin on them. Map out the flow and don’t worry about layouts or design at this stage. With that in mind, here’s a list of popular services that people use for this specific need. Slickplan https://slickplan.com/diagram/maker-features Slickplan’s diagram maker enables you to quickly jump in to building a simple visualisation with its drawing tools. Once a few pages – or shapes – are created you can click on an icon to connect each to generate the flowchart-like arrows. No more resizing or drawing custom elements! Focus on the flow. Great for low-fidelity user flows. Great for strategists to use. FlowMapp https://flowmapp.com/features/userflow/ FlowMapp is a more visually appealing service that creates marketing-friendly flowcharts and offers more flexibility with aesthetic changes to match brand colours,…

Web designers and developers are on a constant journey of discovery. Whatever framework, tool or technology is used, you can guarantee there will be a new version or update in the pipeline. Or there might be an alternative on the market being adopted by the creative masses that will improve your job prospects if you can add it to your CV. Perhaps you have always wanted to improve your illustration skills so you can finally finish the personal project that has been sitting on your desktop for the last two years. Whatever the reason, there is no better way than to learn from those in the know. For instant access to some top-class training, YouTube is the perfect platform. First up it’s free (most of the time) and the best…

Web sites and apps can have various moving parts including front-end creative, server-side processing, APIs and data storage. AI can plug in any of these components. On the front-end, you can connect voice commands, chatbot interfaces or reactive WebGL creative elements. On the back-end, databases use intelligent algorithms to maximise speed and analysis. APIs can provide a layer of abstraction from a wide range of AI functions, from predictions to collective training. NATURAL LANGUAGE Natural language processing (NLP) focuses on the interactions between machines and human languages. It is the objective of NLP to process and analyse vast amounts of language data to improve natural communication between humans and machines. This field of AI includes speech recognition, understanding language and generating natural language. Our focus will be on understanding natural…

WordPress 5.0 is here and its biggest change is its brand new editor. Gutenberg has been around as a plugin for quite some time but now it takes over as the main page editor. This enables web developers of all levels to build out their pages using simple blocks. Gutenberg has a number of blocks already built in, however this now opens up new opportunities for developers to create custom blocks for their clients. This makes it much easier for them to manage their own website. In this tutorial, I am going to show you how you can build out your own basic block for Gutenberg. This will be in the form of a box that contains an image and some text. It can be quite a long-winded process for…

From our timeline Does it matter if you’re professionally trained or self-taught? Not at all. I’ve never had an employer ask about my degree qualifications, although if I could do it all again, I’d still go back to uni. Education doesn’t define how good you are but rather your dedication and understanding to the subject. It all depends on the individual. @McKay_1988 The Rock told me it doesn’t matter. But on a serious note, I’ve noticed those looking for the ‘professionally trained’ are only concerned about their budget not the end results. To be selftaught means it’s a passion and the education never stops. @jaynebayquen It doesn’t matter. I’m self-taught and started a successful agency that has earned 45 industry awards and many top clients. Some of my employees are…

Could you briefly introduce yourself to anyone who doesn’t know you? Hello, I’m Leisa: I’m the head of research and insights at Atlassian and I’m based in Sydney, Australia. Previously I worked with the Australian government in the Digital Transformation Agency and with the crew who made GOV.UK at the Government Digital Service in London. I’m Australian but lived in London for about 10 years. I like gardening and cycling. I have a lovely husband and two beautiful young sons. What’s the story behind Atlassian and what role are you serving there? The mission that drives us is to unleash the potential of every team, so understanding how teams work together and what we can do to better support effective collaboration. Atlassian is best known for producing software that supports…

JQUERY, TWEENMAX, REQUIREJS ARCHE68 https://www.arche68.com/front/en Constructed by German design studio Bureau Cool, this startling product catalogue is something of an intriguing contradiction. Built to represent the 68-year anniversary of Gallic leather and shoe company ARCHE, it neatly offers French and English versions for international visitors. However, the design remains remarkable and befuddling in the most entertaining way with anarchic navigation. Filling the browser window completely with high contrast red, white and blue typography, it eventually dawns that we’ve landed in a menu. Text links for the various site sections wrap into a column, all independently cycling in opposing directions at mercifully slow speed. Scrolling vertically only sends the viewport into a crazy muddle, stacking the menu into an infinite tower of text that you probably shouldn’t look at for too…

DesignCourse https://bit.ly/1R1pFmI This channel is run by a chap called Gary who has worked for some of the big names in video learning including Pluralsight, LinkedIn Learning and Lynda.com. He teaches full-stack development, which in this case means you get a mix of design and development tutorials including UI/UX, front-end dev, back-end dev and graphic design. With new videos coming weekly, it’s always worth checking out what’s new. And if the latest addition isn’t for you, you can always dive into the channel’s extensive back catalogue. Gigantic https://bit.ly/2QF2GWb If flat-design illustration and 2D animation is on your learning radar then this channel has plenty to offer. There are lots of tutorials that demonstrate how to create/illustrate cartoon characters that look amazing. Beyond character design there are videos on logo design…

Artificial intelligence (AI) is defined as a machine-based intelligence, as opposed to the biological-based intelligence of humans and animals. AI refers to machines performing functions of cognition (of the mind), such as learning, planning and solving problems. But the definition seems almost too simplistic to capture the incredible range of incarnations of AI. Communication, transportation, scientific discovery, medical research and service industries all are enhanced by AI. It performs a wide range of activities including game theory, electronic trading, robotic automation and exploring the vastness of space. AI is an integral part of our world, embedded in nearly every technology we have. AI is in the Google searches we run, the voice commands we tell Alexa and the map directions we follow. It’s part of ordering our morning coffee and…

Many of our administrative tasks are now completed online. However, those with ranging abilities are often unable to use these platforms (and therefore access the services) due to poor design. This is particularly relevant for the charity sector. For those going through a challenging time, the internet is often the first port of call for advice and much of a charity’s work is about giving these individuals a good experience in a bad situation. If the charity cannot provide for even a small minority of those people, it has failed in its mission. It’s important to remember that this not only applies to the organisation’s audience and service users but also to its employees, volunteers and fundraisers. Although the government is set to provide £1m to improve digital leadership skills…

+ Although nothing has been explicitly confirmed, mounting evidence (https://netm.ag/2E9PZwE) suggests that brand sentiment is now contributing to search engine visibility but how can we capitalise on this as a designer? Well, as with privacy, brand sentiment starts with design. When designing UX, think about the entire customer experience. Positive brand mentions in content could be a contributor to SEO too, as well as social selling (i.e. the quality of verified reviews from items sold via social media). It can be hard to know what to focus on when the world of tech evolves so quickly but when it comes to SEO, taking a user-centric approach to design makes the most sense. Think: if you were the user, how would you evaluate the quality of a brand?…

You’ve created the perfect SVG but the client would now like the <text> element(s) to break into pieces and fall off the page. Your first thought may be to return to your vector software and convert the text to compound paths. But let’s look at placing text in a <pattern> element. We’ll then be able to easily animate the pieces while retaining the ability to change the text content at any time. We’ll start by creating <text> elements inside a <pattern> element and use that pattern to fill shapes. We’ll animate those shapes with the GreenSock Animation Platform (GSAP) to simulate the text breaking apart. This will still be a <text> element. We won’t need to convert it to compound paths. You can grab the project files from the CodePen…

Send your questions to netmag@futurenet.com QUESTION OF THE MONTH How can you trust the chatbot platform software when developing? At Wixshow, we spent 400 hours on Motion AI and now they’ve terminated their service. Andreas Kviby, Sweden SL: Unfortunately this is the risk with any new technology. This is a pretty immature space – there has been and will continue to be a fair amount of consolidation. It’s the same with any new technology. Would you jump straight on a new JavaScript framework? In the tech space, especially in the past few years, there has been a lot of ‘new and shiny’ super-early adoption. We jump on something new before we know if it will still exist in five or 10 years. If you’re going to use a third-party provider,…

In rural Lake Mills Wisconsin, located between Madison and Milwaukee, rests the office of our 45-time award-winning [1] user experience, web design and strategic marketing company, Candorem. On the outside, the former city hall could be mistaken for yet another antique store but upon entry the literal writing on the wall tells a different story. The 2,500 square-foot space is a reflection of the collective personality of our six-person team. The bright lights, tall ceilings and oversized whiteboards invite our team members to explore their ideas without limits. Or, for privacy, they can cosy up in front of wall-to-wall windows next to a classic brick fireplace. The kitchen, a former vault [2] is my favourite space. Not only because that’s where the coffee is but also because many of our…

AUTHOR JOSHUA GARITY Garity has worked with some of the world’s top organisations to refine and implement user experience strategies for nearly 20 years. Candorem, his UXfocused USA-based agency, has earned more than 40 industry awards in the last five years. w: www.candorem.com t: @iamlucid What exactly is a user flow? Visually, it’s a bit like a dance mat. Right foot here. Left foot over there. Now bring them together, turn and repeat. Without knowing how to dance you’re still able to stand on this mat and move along with your feet stepping in the right places in the right order. A user flow is just that. A loose but coordinated dance with your website. It’s important that you know where a user will step and in what order for that…

Prototyping should be your best friend. It enables you to share the vision of how users interact with your project in a very quick way without investing any development time to build out. It also means stakeholders can explore a project and understand the flow between pages or interaction with elements. InVision https://www.invisionapp.com/ InVision is a go-to tool at Candorem. We’ve used it to sync up to our Dropbox project folders to auto-update wireframes and designs automatically, which saves a ton of time. You’re able to drop in static images for desktop, various tablets or mobile devices and wrap the image in a device frame to give the impression it’s on a phone, for example. Create clickable hotspots that trigger overlays, link to other screens, scroll to a new position…

LevelUp Tuts https://bit.ly/2BTCG0V The mission of this channel is to help you become a better web developer. It has a comprehensive collection of videos – over 800 – with new ones added regularly. So what languages and technologies are making the grade? If you’re keen to learn Vue and React then there is plenty populating the playlists. GraphQL, Gatsby, Apollo and Redux are all getting their own space. But the channel is not too dev heavy. It also includes HTML5 videos, Drupal, CSS, Sass, Sketch and WordPress among many. Check out the store to get yourself a neat geek t-shirt. Google Chrome Developers https://bit.ly/28PpwDs Every designer and developer knows who the Big G is and unsurprisingly it has a lot to offer. Google’s reach on the web is pretty wide…

Despite the ever-changing definitions, there are several identifiable objectives or disciplines within AI. Some applications of it are but not limited to: Knowledge reasoning Machine learning Natural language processing Computer vision Speech recognition Robotics Virtual reality Data mining Game theory Artificial intelligence APIs Whether you need to process a user’s input, analyse an image or make predictions based on data sets, these APIs can help you get it done. Integrate these AI resources into your projects, in addition to the Google Natural Language API we used in this tutorial. Dialogflow by Google https://dialogflow.com Enables you to build and manage powerful AI agents using NLP and much more. Watson AI https://www.ibm.com/watson/developer Tap into one of the most powerful AI systems in the world via API endpoints: data mining, predictions and computer vision are…

+ Below is a list of resources that will help you on your way with Gutenberg. WordPress Handbook https://wordpress.org/gutenberg/handbook Gutenberg is the main editor for WordPress 5, so the handbook is a great place to get to grips with how the editor works and how you can build out block types. ES6 for Everyone https://es6.io ES6 is pretty new for WordPress developers and with Gutenberg relying heavily on ES6, this premium course is a good place to learn through video content. WordPress Gutenberg Examples https://github.com/WordPress/gutenberg-examples The official WordPress GitHub has a dedicated repository with lots of Gutenberg custom block examples. Diving into the New Gutenberg Editor https://kinsta.com/blog/gutenberg-wordpress-editor This article looks at both the pros and cons of Gutenberg, along with a more in-depth look at the editor itself. Gutenberg Block…

While the mayhem known as 2018 is now over, the design industry went through significant changes that may alter our design approach in 2019. We began the year with the beta release of InVision Studio in January, then of course the GDPR hell was unleashed on 25 May. The day after, Google announced mobile-first indexing and then finally rolled out the ‘speed update’ in July, which demotes websites that don’t load quickly enough. But to top off the year on admittedly a higher note, Adobe XD’s October release included voice prototyping – a lovely treat. So what does all this mean for the design trends of 2019? Let’s take a look. 1 VOICE PROTOTYPING Voice user interfaces, or VUIs, have been the subject of speculation for a few years now.…

+ VUI-hybrid design (websites and apps that can be navigated with voice and touch) will become so mainstream that we’ll start to adopt standard screen sizes – and therefore fixed artboard sizes – in our everyday screen design tools. This could mean a range of standards for smart watches, smart home devices with touchscreens and maybe even smart glasses. And of course, this would include a set of VUI design guidelines similar to Apple’s Human Interface Guidelines and Google’s Material Design Guidelines. With screen design tools like Adobe XD now catering for voice apps, indie makers and top corporations alike are 100 per cent going to want to master this craft.…