Tabla de contenidos para September 2018 en net

What are your thoughts on rescaling icons? Do icons always have to be pixel-perfect? Heidi Helen Pilypas, Adelaide, Australia + MF: Ten years ago, half pixels stuck out like sore spots and we crafted each icon size to meticulous precision. With today’s high-res devices, those things are barely visible to the trained eye. + My icon and UI templates at applypixels.com increasingly rely on the notion that you just have to create the largest size and then have your design tool automatically scale and export all the smaller sizes. It’s convenient and easy but we would have scoffed at the idea all those years ago. + Today, I don’t think you need to design every icon at every size. Rescaling is fine because most people can’t tell the difference. When…

INFO AMIT NAMBIAR job: Architect by training, uses code for design w: amitnambiar.com t: @NambiarAmit Tell us what your side project does It is a community of makers who like to make furniture from code. Designers create designs using JavaScript that act as a plugin into a web app. The app is then able to extract drawings from the designs, which can be used to fabricate the design from plywood using a computer-controlled machine (similar to 3D printing). Designers can get creative in different ways when they start writing code to create furniture designs. For example, they can formulate a design for a chair that changes for people according to their different heights or a table that changes the table height as per the age of a person. The possibilities are…

Work and stress can lead to depression, anxiety and illness. In my case, stress three years ago may have been one of the factors that caused me to be diagnosed with ulcerative colitis. After being in and out of hospital while trying to establish my career, I have learnt painful lessons on how to manage stress. OPEN UP First of all, the best thing to do is start talking. If you’re comfortable doing so, open up to your family, friends and colleagues. These are the people you spend most of your time with, so it’ll be helpful for both of you to understand what you’re going through. My partner and I talked about my illness regularly and it helped us get through it together. Crohn’s and colitis can be difficult…

http://samsy.ninja INFO Location: London, United Kingdom Designing since: 2013 Expertise: Creative technology, WebGL, installations, real-time rendering, WebXR Studios: Stink Studios, B-Reel, Nexus Interactive, HUSH Clients: Google, Chanel, Warner Bros, Ninja Tune Awards: FWA, Awwwards, Cannes Lion, Chrome experiments Creative technologist Samuel Honigstein – AKA Samsy – specialises in creating amazing and immersive experiences both in the browser and beyond. Born and raised in the banlieues of Paris, he moved to London in 2015 as one of just five talents selected each year for Google Creative Lab’s Five programme and he’s been living and working in the UK ever since. Working with studios such as HUSH, Stink Studios and Nexus Interactive, he’s been busy pushing the limits of what’s possible in the browser, with a particular focus on VR and AR…

Senior developer advocate for Microsoft, Holland is a big fan of sarcasm and JavaScript, the latter of which makes him the perfect person to assess the various frameworks available. t: @burkeholland Today’s JavaScript developers building web applications have unprecedented access to a seemingly endless number of libraries and frameworks. When choosing a core framework on which to build an application, it can feel like an overwhelming task to try and hack your way through the jungle of options. And it is a jungle out there. However, the good news is that front-end development has more or less coalesced around three main frameworks: Angular, React and Vue. We’ll call these the ‘Big Three’. Three options is clearly better than three million but a choice still has to be made. What follows…

ABOUT THE AUTHOR DANIEL SCHWARZ w: https://uxtricks.design job: Founder of UX Tricks, design blog editor at SitePoint areas of expertise: Product design, UX, UI Over the last few years, InVision (http://invisionapp.com/) has built incredible tools to supplement its original focus on helping designers and stakeholders to collaborate on interactive prototypes. Handoff tools here, whiteboard tools there, yet somehow InVision has also found ways to lessen the gap between its tools and design apps that designers use (i.e. Sketch and Photoshop). InVision’s new screen design app, Studio (https://www.invisionapp.com/studio/), available only on macOS for now, narrows this gap even more by enabling designers to contain their entire design workflow within InVision. With almost instant connectivity to handoff and commenting features, Studio also ships with responsive components, built-in transitions, shared design systems and, finally,…

ABOUT THE AUTHOR MATT CROUCH w: www.mattcrouch.net t: @mattcrouchuk job: Software engineer at Vidsy areas of expertise: React, CSS-in-JS and accessibility When starting a fresh project, it can be easy to slip into some bad habits. As applications grow, components can start swelling in size and when the time comes to reuse a section of it, it can be hard to break apart. Large components become awkward to test, difficult to extend and easy to break. The best way to avoid this problem is to split the UI into smaller, generic pieces that are easier to reuse because they get their data as props – a pattern known as ‘presentational components’. By focusing on the quality of smaller components like a button or input field, we know anything that would…

ABOUT THE AUTHOR SIMON JONES w: http://simonjones.tech t: @j_a_nomis job: Software engineering director areas of expertise: JavaScript, front-end frameworks, emerging technology There have been numerous cross-platform mobile frameworks over the years, with steady improvements to developer experience and performance throughout. Flutter is a new addition to the pack and is particularly interesting because rather than using a JavaScript ‘bridge’ as many frameworks (such as React Native) do, it compiles to true native code. In this tutorial, we’ll look at how to set up Flutter and explore the basics of building apps using the framework, using macOS for our development. We’ll assume that you’ve programmed before and know how to use the Bash shell but might not have developed for mobile. You’ll need to download and install a few things before you…

JOSHUA GARITY Garity has refined user experience strategies for some of the world’s top organisations with his agency Candorem. On page 60, he reveals how you can probe the performance of your UX. w: www.candorem.com BURKE HOLLAND Senior developer advocate for Microsoft, Holland is a big fan of JavaScript. Which makes him the perfect person to offer insight on page 68 on the relative benefits of frameworks such as React and Vue.js. t: @burkeholland JONAS DOWNEY Downey is a product designer at Basecamp, co-creator of Hello Weather, an avid writer and pun jokester. He offers us his pick of the month’s best websites on page 40. w: www.jonas.do t: @jonasdowney MATT CROUCH Crouch is a software engineer at Vidsy and specialises in React, CSSin-JS and accessibility. He outlines how you can create…

VS CODE CAN DO THAT?! + Did you know Visual Studio Code can refactor your JavaScript to ES6? Or that you can put the sidebar on the right to avoid jiggling your code about? This site is packed with useful tips and tricks that make working with this powerful editor even easier. https://vscodecandothat.com/ ANIMATE CALLIGRAPHY WITH SVG + If you’ve ever tried to animate calligraphy you’ll no doubt have discovered that the first step is fairly straightforward but things get trickier when the path crosses itself. Claus Colloseus over at CSS Tricks explains how to overcome this difficulty and create smooth animations. https://css-tricks.com/animate-calligraphy-withsvg/ I DISCOVERED A BROWSER BUG + Jake Archibald accidentally stumbled across a browser bug when he noticed some strange behaviour from a service worker he was playing…

Graphic designer and front-end developer https://tim-breeze.com/ FIGMA Over the past year, Figma has become my go-to design tool. It just does everything I want and boy does it do it fast. It’s revolutionised not only the way I design but the way I collect client feedback and present my designs. I simply love it. https://www.figma.com MUZLI This handy little Chrome extension replaces every new tab with a curated list of, mostly, design news. You can tailor it how you like and I find it’s a great way to start the day – whether that’s checking the latest shots on Dribbble or threads on Designer News. https://muz.li TANIA RASCIA Tania writes the most effective tutorials I’ve ever read. Her blog is a great source of guides for a wide range of…

As designers, innovators and entrepreneurs, our mission is always to make people’s lives better. Everything we create is pitched the same way – ‘Hey, what you’re currently doing is painful; here’s an easier way’. So when Steve Selzer, a designer manager at Airbnb, suggested at SXSW that ‘making things easier’ isn’t always a good idea, I did a double take. To make his point – that there are unintended consequences to removing all effort from every experience – Steve brought up WALL.E, a movie where everyone’s strapped to a motorised chair and eventually unable to see past a screen in front of them. In our world, our desire for everything to be instantaneously easy has caused us to shy away from facing anything tough. But challenges are how we grow.…

JONAS DOWNEY Jonas Downey is a product designer at Basecamp, co-creator of Hello Weather, an avid writer and pun jokester. w: http://jonas.do t: @jonasdowney SITE OF THE MONTH HOMEGROWN STATIC SITE, GULP, NETLIFY XOXO 2018 https://2018.xoxofest.com I was fortunate to attend the first-ever XOXO festival in 2012; it had a big impact on how I think about the web and its creative community to this day. I’m thrilled to see that the event is still going strong – it’s a weekend-long love letter to creativity, joy, failure and independence on the net. The experience is cathartic, energetic and wonderfully earnest. This year’s website matches that spirit, with a torchlight-sunrise colour palette atop a gorgeous full-length illustration by Shawna X, paired with tilted text in a nearly-hard-to-read handwritten script and monospaced fonts.…

What’s on your desktop? A framed Japanese Raichu secret trading card. Little things that make your life worthwhile Websites: Hacker news, Shadertoy, The Book of Shaders Apps: Twitter, Uber, GMaps Audio: Low End Theory, ED Banger, Ninja Tune Reading: The New Scientist, Wired, MIT Technology review What do you have on the walls? A Noogler cap and a traditional Japanese tenugui! What will you do for lunch? Grab takeaway food and watch a series. What hours do you work? Usually 10am to 7pm. What else do you do in the office? Sleeping: my office is in my room, heh. How often do you hang out with other designers? I’m living in a designer / developer flatshare, so every day. Describe your working culture in three words Never. Underestimate. Yourself.…

Key dates in the Free The Birds project NOVEMBER 2017 Free The Birds proposal presented and project awarded to The District. DECEMBER 2017 Workshops, competitor analysis and fact finding. EARLY JANUARY 2018 Wireframing, UX and content consultancy. JANUARY – FEBRUARY 2018 Concepts created, experimenting with different mixes of serif and sans serif typefaces. FEBRUARY 2018 Chosen concept and HTML scaffold developed. LATE FEBRUARY 2018 Responsive and device testing to ensure consistent experience across all viewports. MARCH 2018 Integration of content management system into the site. APRIL 2018 Site launched.…

UsabilityHub usabilityhub.com UsabilityHub’s key value proposition is “Settle design debates with data.” You can’t beat that! A great alternative to more expensive remote user testing solutions on the market. It offers solutions for five-second tests, click tests, surveys, navigation tests and A/B preference tests. Userbrain userbrain.net Userbrain attempts to streamline the user testing process for smaller teams or professionals just getting started with UX testing. You can input a web URL and write a simple task. Userbrain takes care of the rest by recruiting for you and sending you recordings, five to 15-minutes long, that you can watch any time. A great way to get your feet wet with testing. UserZoom userzoom.com This is a more robust option for testers that have a firm grasp on what data they need…

Ember Ember has been around for over a decade now and is used in some form in Apple’s iCloud (as the SproutCore framework) as well as at LinkedIn. It has been tried and tested in enormous applications used by millions. The Ember Data module (https://github.com/emberjs/data) is praised for its power and sophistication: modelled after Rails Active Record, it offers a simple interface for persisting database structure in front-end applications. Some developers will find Ember’s strong opinions too restrictive. As with Angular, Ember also has a fairly steep learning curve that can serve as a deterrent to adoption. But it is still a full featured and modern JavaScript framework that has already held up under the weight of enormous consumer-facing applications. Strengths Handlebars for templates Battle tested in production Weaknesses Opinionated…

+ InVision Studio is quite new but that hasn’t stopped talented designers, writers and even the Studio team themselves from creating epic resources to help us become Studio masters in no time at all. Resources range from tutorials and UI kits to inspiration and vibrant communities for Studio users. Studicons http://studicons.com/ The world’s first icon set for InVision Studio, designed by Oliver Pitsch. It’s quite an extensive set too and won’t cost you a penny. InVision Studio community https://www.facebook.com/groups/InVisionStudioCommunity/ This Facebook page is quite useful, as the team are always around to answer any questions. It’s an ideal place to report bugs too. StudioTalk https://invisiontalk.io/ Made by Olivier Heitz, creator of SketchTalk, this is a forum-type community for InVision Studio users. It’s a great place to keep up with resources…

Send your questions to netmag@futurenet.com THIS MONTH FEATURING… IDA AALEN Ida Aalen is a Norwegian speaker and writer working in the overlap between user research, UX and content strategy. She is CPO and co-founder at Confrere, which offers video chat tools tailor-made for professionals who want to meet their clients online. w: https://idaaa.no/english-version-who-isida- aalen/ t: @idaaa MICHAEL FLARUP Michael is a Danish designer, entrepreneur and keynote speaker. He loves making things, going on adventures and also telling stories. w: http://flarup.co t: @flarup QUESTION OF THE MONTH What’s your process for coming up with an icon style for any project that you’re working on? Darshan Gajara, Mumbai, India MF: My process is largely the same whether I’m designing for myself or for a client: I try to make things I like. So I…

Copy and paste. @_LeonBrown Agreed! Especially when ‘test’ class names or whatever aren’t changed. @nataliedeweerd That’s another one. Change requests mean that BigRedBox class eventually becomes a small blue triangle. Handy to know how to use naming conventions that will never change. @_LeonBrown Spaces instead of tabs. @_csilverman Repetition of code because ‘it’s faster’. @RafAndersson Ignoring readily available resources. A great way to solve a problem is not having to solve it at all. When in doubt, google it – there’s bound to be someone else in the same situation. @davidpottrell It grinds my gears when people put on blinders to everything except performance when approaching software design decisions. It’s not just junior devs making this mistake but senior devs too. Optimising for developer time over processor time is almost…

It’s always interesting how something that looks self-explanatory just after you wrote it can seem totally incomprehensible a mere week or so later. We asked the @netmag followers what they do to make sure their code is understandable to their future selves and others. ENCAPSULATION AND GOOD COMMENTING “I write code thinking I’ll want to delete it in six months, so I encapsulate it as much as possible,” says @ailin10. @thefuzzpedal has this advice: “Write meaningful commit messages; keep a consistent coding style; write comments especially in complex areas of code – you will not remember what that lambda does!” STREAMLINE YOUR CODEBASE “Avoid leaky abstractions. Choose established libraries with a large user base and good documentation. Remove dead code. Remove living code. Remove entire features. Say no to features…

INFO job: Freelance front-end UI/UX developer w: sarasoueidan.com t: @SaraSoueidan There aren’t many speakers in our industry whose passion for front-end development is as infectious as Sara Soueidan’s: her workshops and talks are so crammed with advice, not least because of the dizzying speed she delivers them, that they regularly leave attendees with their minds blown. The impressive words-per-second ratio even prompted one delegate to tweet how amazing it would be if Soueidan and Eminem competed in a rap battle. Best known for her outstanding work around CSS and SVG (her SVG workshop, in fact, is her most popular one), Soueidan has been developing a new workshop, set to debut at Generate London in September, that is focused on designing and creating universal UI components. “A while ago Zach Leatherman retweeted…

DANA JAMES MWANGI Branding and website strategist, Cheers Creative www.cheerscreative.com I don’t go off grid nearly as much as I should but I am getting better at resting and taking breaks. On the one hand, I really love design and my work makes me excited to jump out of bed. But I’ve come to learn that part of serving my clients well means that I must engage in more self care, so that I can give them the best ‘me’. Every time I rest, I come back sharper and I’ve also noticed that it’s easier for me to retain information and learn something new after taking a good vacation. JOE RUTLAND Freelance UI designer joerutland.com After going freelance in 2016, I could never switch off. Wherever I was, I’d receive…

This month… LIVE MUSIC VENUE PROFILES CHRIS SILVERMAN Silverman is an award-winning senior designer and illustrator at Vassar College, New York. w: www.csilverman.com t: @_csilverman CHRISTOPHER DOWSON Dowson runs Interpunct, an ethically-minded design studio. w: interpunct.studio t: @interpunctuated WARREN CHALLENGER Challenger is senior designer at JH, a leading ecommerce agency based in Nottingham, UK. w: warch.io t: @warchdesign CHRIS SILVERMAN STATION FIVE A site that brings the history of the building into its design Station Five is a club and restaurant in a former firehouse. The red/yellow palette, elements of brickwork and typography (Pompadour for logo and Highway Gothic, used on all US municipal signage) suggest its roots. Photography plays a major role here; the gallery is the primary means for drawing visitors into the site. I didn’t want the imagery to be overwhelming though and…

JUNE, 2009 Obtained French literature and philosophy high school diploma. JUNE, 2010 Started academic drawing, painting. JUNE, 2011 Attended graphic design uni courses. MAY, 2012 Joined a light-painting photography collective. JUNE, 2013 Completed first project involving coding (real-time light painting software). SEPTEMBER, 2013 Secured first job: a creative coding apprenticeship. JUNE, 2015 Graduated from GOBELINS art school in Paris, digital section. SEPTEMBER, 2015 Moved to London from Paris to join Google Creative Lab Five programme. OCTOBER, 2016 Started as a freelancer. JANUARY, 2017 Completed first international project.…

Garity has worked with some of the world’s top organisations to refine and implement user experience strategies for nearly 20 years. Candorem, his UX-focused USA-based agency, has earned more than 40 industry awards in the last five years. w: www.candorem.com t: @iamlucid Evaluating the success of user experience strategies in a project requires a deep understanding of why decisions were made and what core goals motivated the project in the first place. Purpose is what provides context to data. Without that context, the data you review is always going to be clouded with your own personal bias and assumptions. It’s why all of those impressive unauthorised redesigns of websites like Facebook that make the rounds every year mean absolutely nothing. Making something better is often based on opinion. I once…

The problem with most UX blogs is that they are heavy on content but light on philosophy. UX as a concept is simple but the purpose of what we do and why is incredibly nuanced. It’s important to understand the logic behind certain decisions. Not all methods are equal. UX Booth uxbooth.com A one-stop resource for interaction design. Learn about design systems, best practices, user testing, philosophy and even the business side of UX. The ongoing content is easy to read like a blog post, while managing to be informative like an educational resource. Nielsen Norman Group nngroup.com It was actually Donald Norman, a cofounder of NN/g, that coined the term ‘user experience’ in the 1990s. The group has standardised much of the industry by opening up its findings to…

There is an enormous amount of pressure to make the right choice when picking a framework upon which to standardise and build your applications. It’s a big investment and no small decision. There is no prescriptive answer to the question of: ‘which framework should I pick?’ The truth is that there is only the framework that works for you, your team and your project. When it comes to the Big Three, you can take some comfort knowing that it’s impossible to make a bad choice. It could be that one of the lesser hyped frameworks such as Ember and Preact might also fit the bill and both are great choices. If you’re building a smaller application or Chrome Extension, don’t be afraid to pick up jQuery and, for the intrepid…

ABOUT THE AUTHOR RICHARD MATTKA w: http://richardmattka.com t: @synergyseeker job: Interactive director, designer, developer areas of expertise: Shaders, VFX, WebGL Shaders enable a wide range of effects by working directly with the graphics hardware of devices. This tutorial continues our series by showing you how to map UVs of 3D objects to your shader, so that the shader materials move with the geometry of your 3D objects. You’ll gain some cool effects and practical visuals you can use right away in your projects. SET UP A BASIC HTML PAGE Start by setting up the HTML page and some basic CSS to size things for full screen. This tutorial will use three.js to handle drawing to the canvas so you will need to add a reference to the three.js library, which you…

The scene The scene is a container object that encapsulates the other objects and elements that we wish to show. Camera Three.js has a few different camera classes, including a PerspectiveCamera, which we will use for 3D and an OrthographicCamera, used for rendering 2D scenes or UI elements. Renderer The renderer handles the display of the 3D scene using WebGL. It targets an HTML <canvas> element to draw into. Typically you will call the renderer to render each frame. Materials Three.js comes with several materials, such as Normal, Basic, Lambert, Phong and Shader. Materials are used to texture the faces of an object’s geometry. Attributes include things such as textures maps, colour and opacity. Geometry Geometry defines the vertices of an object to draw it. Faces created by these vertices…

Native The default way of developing on mobile is to write native code for each device – usually Java for Android and Swift for iOS. This can give you the best result but the problem is that you then have two codebases to maintain. WebViews The earliest way to get around this was to build ‘hybrid’ apps that were essentially web pages rendered within an app container (referred to as WebViews). The Ionic framework is an example of this approach. This has limitations in user experience and relies on a JavaScript ‘bridge’ to interact with native services, which can impact performance. React Native The release of React Native gave us the ability to write JavaScript code (with React syntax) that used entirely native widgets. It still uses a JavaScript runtime…

Xcode https://developer.apple.com/xcode/ Xcode is Apple’s mobile SDK and is required for iOS development with Flutter. Android Studio https://developer.android.com/studio/ This is Google’s Android IDE and is required for Android development with Flutter. You can download the Android SDK using it. VS Code https://code.visualstudio.com Microsoft’s VS Code is arguably one of the best code editors out there and is a great IDE to use with Flutter. Dart https://www.dartlang.org/guides/language The Dart programming language is core to Flutter but you probably won’t have used it so it’s worth taking time to get familiar with. Flutter Tutorials https://flutter.io/tutorials/ Flutter’s own website has some great tutorials on how to build common app features.…