netの June 2018 の目次

Considering JavaScript is used by 95.1% of all websites, it’s no surprise it’s considered one of the most critical tools in a web designer’s arsenal. Given it’s dynamic, weakly typed, prototype-based and offers a multi-paradigm approach, JavaScript is well-suited to solving myriad programming problems. However, this very versatility also means that it can be hard to identify the right packages and programs to serve your purposes. Evidently, the dev and design community is crying out for a detailed breakdown of the benefits of the many packages on offer. Fortunately, they are in luck. This issue Matt Crouch is outlining all of the JavaScript tools you need to unleash your creativity, whether they are helping you increase code quality, perfect project testing or make use of interfaces. And there’s far more…

What new and upcoming features in Adobe XD should people be made aware of? Trent Davidson, Leicester, UK EC: Users of Adobe XD can request new features via our UserVoice site (adobexd.uservoice.com). Here are some we’ve been working on lately… Design features From the design perspective, the XD team has been working on features that enable higher fidelity designs over the past few months, and recently released both radial gradients and stroke position. Prototyping From the prototyping perspective, we’re in active development for some of our most requested features, including the ability to fix a header or footer and create an overlay artboard that can slide over an existing artboard. Motion Also be on the lookout for even higher fidelity motion in the future: there’s much more on the way…

INFO MATTHEW CROUD job: Creative front-end developer w: ingrid.guide t: @Octavector Tell us more about Ingrid Ingrid allows users to visually develop complex and flexible layouts. Similar to a spreadsheet program where you can select and colour cells in a table, Ingrid invites you to make a master grid and then populate it with child elements by selecting individual cells. When elements are added their grid coordinates are ‘recorded’ at the current browser width like keyframes in an animation. Why did you create Ingrid? The idea came from past experiences in print design, using such tools as QuarkXPress and Adobe InDesign to create layouts for brochures. Each project document would begin with a large and flexible grid, which would help arrange the elements on the page. As CSS Grid allows us to…

I’ve always been a fan of video games since my parents first got me and my brother an Amiga 500 as a kid with Pluto and Firepower. Video games come as a way to relax after a day of designing and switch my thinking to puzzle solving or fast reactions. Being able to play with family and friends is what drew me in more towards online gaming and eventually the family gaming channel we set up on YouTube [called The Now Gaming Zone]. The idea for a gaming channel started when all three of my boys would play Minecraft together and then watch other people play it to get ideas on how to create their worlds. They would pretend they were making their own videos on YouTube talking amongst themselves.…

INFO job: Writer, designer and educator t: @fehler w: tinybooks.org With your business launched and – hopefully – successful, it’s tempting to start to establish plans for expansion. In my article ‘Repeat’ (net #300) I stressed the need to develop new products or services to ensure that you have a pipeline of products. As I noted: “A single product will only maintain momentum for so long and, as such, over time you’ll naturally see a fall-off in sales. This is where building a ‘pipeline of products’ comes in. The secret is to release new products often and maintain contact with your customer base.” Adding new products or services to your mix will help to drive sales. However, it’s important that you don’t lose focus by adding new products that don’t fit with…

Carl is a UX and UI creative for brands, who was awarded Creative of the Year in the Wirehive 100 2013 and has over 10 years experience. t: @carl_cahill w: carlcahill.com Prototyping is an essential part of any digital design process. It helps us simulate our designs, test out journeys and user flows within our projects. Long gone are the days of printing and providing PDFs of designs. With these prototyping tools, you’ll be set to meet the design challenges you might face, whether you want to create something beautiful or technical from an idea. With any prototype, it’s important to test and play with your interface so you can validate the experience. Most of these tools come with a price tag but some give free access for a single project or…

Webpack In case you don’t know what Webpack is and what it’s all about, it can simply be described as a static module bundler for modern JavaScript applications. It helps to bundle all of the different modules and then it packages them into one bundle or more. At the time of writing, Webpack 4 has been released, which offers better features and improvements that will definitely make your development flow a lot easier. Vuex Like every other component-based framework, it can become difficult to keep track of state when your application begins to grow – when there is a lot of data moving around from one component to another, we need some sort of state management solution. That’s where Vuex comes into play. State basically means the current working status…

When a CSS variable changes, the browser repaints the already rendered view without any additional push Custom properties (or CSS variables) are not a new feature – they have been in the CSS spec since 2014 – but browser vendors lagged behind. Firefox adopted early, Safari and Chrome in 2016 and in late 2017 even Edge implemented it fully, giving it 88% global coverage with IE and Blackberry’s browser pulling back the number. In 2018 it is safe to say that it’s ready for the modern web. Choosing the native implementation over a rigid processor gives you much more than a simpler development process. Custom properties are live, they can be changed based on media queries, element scope or with plain JavaScript. When a CSS variable changes, the browser repaints…

Graphic shaders enable a wide range of effects by working directly with the graphics hardware of devices. In the previous articles, we learned what shaders are and created our first ones. We also learned about post-processing, making greyscale and using sepia tones. This tutorial is going to continue delving into processing images. It’s still just scratching the surface of what can be done but will give you something practical you can use. As always, my primary goal is to get you inspired so you can start creating your own effects as soon as possible. IMAGE POST-PROCESSING Image processing is everywhere. Instagram filters, blur effects, transformations and colour-grading for film are just a few examples. These effects can also work with video, since it’s simply a stream of images. We are…

From our timeline What’s your worst job interview experience? I was left in a small room that was more like a cupboard with empty boxes and forgotten about for 45 mins! No apology or prep work from them. @rorystandley At the beginning of the interview, my would-have-been boss (had I accepted) thought he was being polite to me by yelling at his current design lead to do things for me. That just showed me how he treats his employees. @alainavirginia When a manager asked me about Office Skills while interviewing for a Graphic Design position. @WaqDev At the end of a long 5 person, back 2 back interview, I show the evp my site on my phone. I hand it to him and he says, You run a porn site?…

I’m a 26-year-old male designer. I was making some new branding for a new client – who, for the record, was a 45-year-old man. The work was all fairly straightforward – things like business cards, comp slips and a letterhead – but the client insisted we meet for coffee before I started. He seemed polite and his request was reasonable so I agreed to meet. After we talked for 15 minutes about the work, he started asking about my personal life: Client: How long have you lived in the city? Any wife or kids? Me: I’ve lived here for three years. I used to live around the countryside but there is not a lot of work outside of cities. I don’t have a wife or kids, but I do live…

INFO job: Designer w: flarup.co t: @flarup You’ve launched a lot of your own products. Which are you most excited about right now? I’m super thrilled with my new resource platform applypixels.com, which is a place where we create industry-standard design tools for icon and UI work. This is empowering both veteran designers and newcomers, as we give them downloadable UI and icon templates, allowing them to jump over technical obstacles and get results faster. Being the canvas for other people’s creativity excites me. I’m also very happy with the work I’m doing with my little game studio, Northplay. We’re following our hearts and making games and entertainment products. The standout right now is Conduct-Franchise at conductthis.com. What makes you so entrepreneurial? A guiding light of my career has been…

We have been trained to look at the world and our lives in terms of resources: the finite and the infinite, scarcity and abundance. Supply and demand is a primary driver of modern society. Yet one of the most valuable resources is one many overlook: time. This is not to say that we don’t think about time at all – as the saying goes, time is money. Especially within the world of e-commerce web design and development, we go on and on about the consumer, leveraging technology to capture their time through new innovations and services, push notifications and social media. And we also design to save them time by removing friction in user journeys and adding personalisation and customisation elements to streamline their experience. But this doesn’t mean that…

CLOSE UP 1) A striking landing page to make a strong first impression. It distinguishes the site from other reports and sets the tone from the outset as authoritative and technically precise. (2) It was a real challenge given the density of the report to get it to work effectively on mobile but absolutely critical. Mobile traffic has accounted for nearly 70% of traffic so far. (3) A simple and consistent navigation system was really key to make a lot of content easily accessible whether the user is after an overview or the full detail. (4) All the graphs can be downloaded as standalone graphics, enabling users to easily incorporate the data into their own presentations. (5) Each article can be saved, enabling users to easily create their own bespoke…

Shaders can be used to create advanced effects that are optimised for performance If you missed previous articles or are new to graphic shaders, here is a quick primer. Multiple shaders work together in the graphics pipeline. Some are programmable, some are locked to the hardware. We’re most interested in two shaders in the pipeline – vertex shaders and fragment shaders. These are the core of the OpenGL Shading Language and the WebGL graphics pipeline. We’re going to focus on fragment shaders in these tutorials. GLSL (OpenGL Shading Language) shaders compile and run on a wide range of platforms. You can apply what you learn to any environment that uses OpenGL, OpenGL ES or WebGL. This means you can use this knowledge for websites, three.js, iOS games, interactive installations, Unity,…

You know what’s wrong with ecommerce site design right now? It’s that you only have two options to get a store live on the web and that they occupy opposite ends of a spectrum. That spectrum is creativity. The extremes of the spectrum are occupied by templates and code respectively and as creativity increases, so does the need for coding ability. At one end, you have the template-powered estore offerings. Your Pattern (by Etsy) sites. Your Squarespaces, Weeblys and Wixes – and, for most, your Shopifys. Easy to set up, easy to launch, easy to sell with. Assuming you can get people to your site. These options have dramatically lowered the barriers to entry for online commerce. They’ve made code-free ecommerce a reality. They’ve also brought to life a host…

Send your questions to netmag@futurenet.com QUESTION OF THE MONTH How is Adobe XD going to be developed this year? Hemali Tanna, Mumbia, India EC: We have a lot of new functionality in the pipeline for the next six months and beyond. Adobe XD is constantly growing and evolving and our monthly releases mean that you’ll be able to use new features as soon as they’re ready. If I were to categorise the two types of features we’re focused on in the next six months, I’d say increasing both productivity and expressiveness. Productivity features like the introduction of linked colours and symbols through the Assets panel increase the speed of your design process. And additional changes – such as adding support for math operators in our Property Inspector values – will…

When we moved to our King’s Cross office just over a year ago, we wanted to build a creative and collaborative space where people were able to work together and solve challenging problems. Kalo allows freelancers and companies to work with the best talent anywhere in the world. We decided our office setup needed to reflect this ethos regardless of whether you work remotely or come into the office. Our office space is completely open plan and we work in our project crews – teams that mix product managers, designers and engineers, rather than sitting in our separate disciplines. It’s such a collaborative way of working on a problem and allows us to share knowledge across the company. I enjoy spending time in our chill-out area (1) with other members…

INFO job: UX and product-management consultant w: mrjoe.uk t: @mrjoe “A designer who doesn’t understand psychology is going to be no more successful than an architect who doesn’t understand physics,” claims UX consultant Joe Leech, who has made psychology for user experience and product design his speciality. There is absolutely no doubt that data and testing are important and that they help you look at trends on a large scale but it’s quite hard to determine how individuals think and behave with data alone. You need to understand how the brain works to design products, apps and websites that match human behaviour. “The best and most successful teams I’ve seen look for ideas in psychology,” Joe explains. “It can help generate solutions to particular problems like the number of items to put…

YOUTUBE VIDEO, WEBGL, CSS3 REDBULL RACING + CITRIX www.thenewmobileworkforce.com This microsite displays and showcases the partnership between Formula One’s racing team Redbull and software giants Citrix. It’s a really immersive demonstration of gorgeous visual content that has been put together very well. The site itself operates with very little scrolling and works more like a presentation. You quickly get used to this format and learn that there are five key areas to explore that enable you to go deeper and dive into more interesting content. Each screen hosts wonderful explorable features using data visualisation, 3D renderings and video assets. The combination of these mediums really help to make the site less static and more engaging to play with and view. What I take most pleasure from with this site is…

What would we find on your desktop today? My MacBook, Urbanear headphones, trusty notebook, Creative Review and obviously a coffee! What do you have on the walls? We share a co-working space so they tend to handle what goes onto the walls and they do a great job! What will you do for lunch? 100% Bosconova, it’s a small but brill cafe. We have been going as a team since I started and we all have our go-to lunches there. What hours do you work? We tend to work from around 9 and finish off for about 6, but our working day is pretty flexible if needs be. What else do you do in the office? We chat a lot about movies, designers we love, future plans (and avocado on…

If you know JavaScript, then you also know about the endless line of frameworks that help make coding easier and faster. If you didn’t already know what Vue.js is, it’s a progressive JavaScript framework, which means if you already have a server-side application, then you can plug Vue into just one part of your application. Vue focuses on building user interfaces and it only works in the ‘view layer’; it makes no assumption of middleware and backend and therefore it leaves you free to integrate other libraries and tools, and can be entirely used to build more robust single-page applications (SPA). Vue is very much like React where it also uses such things as a virtual DOM, props and state. While there’s much more Vue can do, in this tutorial…

One of the single best features of CSS processors is variables. Having the ability to declare once and reuse the variable across your project should not be optional in any system. Using a pre-processor like Sass or Less gives you at least one extra build step, which can be a pain if you just want to build a thing fast. CSS has come a long way since the dark days of table hacks, so let’s look into one of the most useful aspects: custom properties. We’ll start with a simple example. The: root pseudo selector targets the highest-level parent element in the DOM, giving all elements access to --color-red. Yes, CSS variables definition should start with --, and you can access them anywhere with var(). Well, anywhere that is cascaded…

From HTTP/1 to CSS, the early internet was built on open standards. It is thanks to the wider technology community’s desire to work together to build a shared fabric of modern communication that we are here today. Unfortunately nowadays, with a technological culture where an increasing amount of online activity takes place via integrated products and apps rather than through websites, things simply aren’t so straightforward. Truth be told, we have absolutely no idea what the internet will look like 20 years from now. We don’t know what browsers we will be using, what features they will support or even if we will be using browsers at all. The further we stray from open standards, the more likely it is that future generations will not be able to see the…

Loading textures into shaders can open a world of possibilities Texture data To grab specific pixel data for a loaded texture we use the following: iChannel is the variable holding the texture data, uv is a two dimensional variable specifying the fragment or pixel to obtain data for. You could grab data for the current pixel, or other pixels, like we would in a blur effect. The flexibility of this enables us to use textures in combination or as non-visual data. For example, you could load a texture loaded with audio data into the pixels and use that as source for an effect. The possibilities are endless. Uniforms Each render tool will have its own little nuances, such as built-in uniforms (variables) passed to the fragment shader, for things like…

When I started to learn HTML, I began with basic elements like h1, p, div and button. I learned about semantics, creating sections with headings and styling elements with CSS. Unconsciously, I was laying a foundation of knowledge on how to build accessible websites. In 2014 – eight years in as a front-end developer – I attended a talk by Heydon Pickering in which he mentioned accessibility. This is when I realised semantics play an important role in accessibility. Before that, I’d only written semantic HTML because that’s what I’d learned to do. Looking back, I realise it shouldn’t have taken eight years before I learned about something as important as accessibility. In those eight years, I read a lot of articles about various web-related topics. I don’t remember accessibility…