#so i mocked up what a '''mobile''' version of a homepage of one of my sites would look like if i had done that

[machinavocis]

(aforementioned shitposting not contained to tumblr lol.)

(sorry Business Partner Friend but i happened to look at some websites made by the subcontractor of another contractor of [CLIENT REDACTED] and now you’re gonna wake up to a thread of slack private messages in which i prove with both evidence and shouting that everyone is bad at things except us.)

[gomangodigitalblog]

30 essential tools for web developers

The right web design tools can streamline your workflow, helping you work smarter – rather than harder – and more efficiently. After all, you want to invest your energy in solving problems, delighting users and creating beautiful designs. You wouldn’t want to waste your time and energy on dull, repetitive and soul-sapping tasks. Let’s look at 30 essential tools for web developers that will help you become more productive in the coming year.

Where some are brand spanking new while others have been around for a while. But all of them have the potential to save you time, energy and budget in your web design projects.

Sketch

Rory Berry, creative director at Superb, rightly feels that using Photoshop for web design is a mistake. He made the switch to Sketch in 2017 and highly recommends it. “Having been a user of Photoshop for over 10 years, it was hard to change and learn something new,” he says. “But literally after the first day of using Sketch, there was no looking back. I’m a total convert.”

He offers a number of reasons why. “Compared to Photoshop, sorting all your documents that you have and making revisions on Sketch is much easier,” he begins. “Sketch has small documents whereas Photoshop has large ones. Due to it being a vector-based app, the file sizes are dramatically smaller compared to Photoshop.

The Sketch community offers hundreds of plugins to make designers workflow easier and smoother, he adds. “There’s basically a plugin for everything if you can find it. Photoshop/ Lightroom is still our go-to for photo editing, but Sketch is an all-around winner for web design.”

Figma

Figma is an interface design tool that enables multiple designers to collaborate in real-time. It’s available in the browser, or on Windows, Mac or Linux. Both free and paid versions are available depending on what you use it for.

Here are some of its outstanding features:

“Figma has a similar USP as Sketch with the exception of being cross-platform,” explains frontend designer Benjamin Read. “I recently used it to create a couple of icons for an article we’re publishing on our website and found the workflow incredibly smooth. It took me no time to learn and had the added benefit of being collaborative: you can share graphics with others within the app.“ I’ve been trying to switch to Linux for my work and sometimes we use Windows, so Figma makes sense to me from a practical standpoint,” he adds. “In comparison, I’ve found many tools for other platforms fall short.”

Content writer and art worker David Eastwood, who works for Co-op Electrical, also has good things to say about Figma. “We were recommended Figma by our web development agency and use it for landing page wireframes,” he explains. “This has included proposed changes to the homepage and specific sales landing page, especially around Black Friday. It’s also been a really useful tool when we’ve needed to quickly mock MVTs; sometimes small additions to an existing layout. We love that you can quickly create designs for desktop, tablet, and mobile.”

Affinity Designer

Serif’s Affinity Designer has been dubbed the ‘Photoshop killer’ by some, and it’s easy to see why,” says Dan Edwards, creative director at No Divide. “My first impressions are that the app is incredibly well designed and feels like it’s been made to be a dedicated web and graphic design tool.”

“There were few features I really enjoyed, including adjustable, non-destructive layers. This essentially means you can adjust images or vectors without damaging them.”

“When it comes to designing, the UI feels familiar. When moving from Photoshop, everyone seems to want to start over, which can pose a real challenge. What Affinity has done is to keep the layout familiar, while tightening everything up and hiding distractions. I was easily able to jump straight in and get designing.”

“Overall, Affinity feels like it could be a real competitor to Photoshop, Illustrator, and Sketch. And at just £48.99 it’s a real bargain!”

Anime

Although web page animations have at times got a bad rap, developers are always looking for ways to make things easier. CSS animations and transitions have been a huge step forward, but more complex interactions often require a library. Anime is a new animation engine you’ll want to take a look at if you need to add complex animated components to your apps.

This code defines the objects you want to animate, along with specifics of the animations. The API allows you to target elements using CSS selectors, DOM elements or even JavaScript objects.

Avocode

Avocode makes it extremely easy for front-end developers to code websites or apps from Photoshop or Sketch designs. It’s built by the same team that brought us CSS Hat and PNG Hat, so it’s not surprising they’ve taken the exporting process one step further. Although previous apps have allowed you to export assets, what makes Avocode really special is that you can use its Photoshop plugin to sync your PSD file into Avocode with just one click.

Avocode quickly and automatically analyses your PSD or Sketch files and brings everything into a beautifully designed UI. You then have full control over how you export assets, including SVG exporting as standard.

You can also click elements in the design, and copy & paste the code into a text editor of your choice. “It gives users everything they need for coding – a preview of the design, and access to all layers and export assets,” says Avocode co-founder Vu Hoang Anh. “The best thing is that developers won’t need Photoshop or Sketch at all. The current workflow really sucks and that’s why we created Avocode.”

Pattern Lab

Pattern Lab is a beautiful pattern-driven design tool created by Dave Olsen and Brad Frost. It’s based on the concept of atomic design, which says that you should break your design down into its smallest parts – atoms – and combine them to form bigger, reusable components – molecules and organisms – that can then be turned into usable templates.

Although at its core it’s a static site generator that stitches together the UI components. There’s much more to Pattern Lab than that. It’s language-and-tool-agnostic enables you to nest the UI patterns inside each other and design with dynamic data. It features device-agnostic viewport resizing tools to help you ensure your design system is fully responsive and fully extensible so that you can be sure that it’ll expand to meet your needs.

Vivaldi

Sometimes the best tool can be something as simple as a new browser. Vivaldi is a fast, customisable web browser for power-users built by some of the people who started Opera. Dubbed ‘a browser for our friends’, Vivaldi is built using web technologies like JavaScript and React that are used to make the user interface, along with Node.js and lots of NPM modules.

Vivaldi is the most customisable browser out there, and it offers other cool features such as command line control, a panel for taking notes, tab stacking, tiling and web panels that enable you to put all your favourite sites in one place for easy access.

Canva

Do you want to mock up something like an infographic quick and easy? Then Lawrence Harmer, founder of Solve Media, recommends Canva.  It’s a free, browser-based tool that’s used by both designers and non-designers, to make graphics for both print and the web.

“Canva is pretty good for making nice images,” says Harmer. “Images are the window into the soul of your website and social media, so a tool like this can be key to success.”

Web Designing Proposal Tool

It’s essentially a simple ‘Proposify’ tool, which allows you to quickly and easily churn out proposals,” explains BeeWits’ David Attard. “It’s essentially a glorified form that allows you to enter and change pre-set text and then creates a Word document ready for sending directly to the client.” If you sign in to the free service, you can save your current version, such that next time around, you’ve got a bunch of fields already filled in with your details. It’s simple, but it gets the job done, and what more do you really want? It’s not officially been launched yet, as BeeWits are currently canvassing feedback, but it’s otherwise ready to use.

Site Stack

Here is another browser-based tool that’s both simple and brilliant. Type in the URL of any website to this Chrome extension and it lets you look at its tech stack. It’s fast, smooth and reliable and provides coverage for over 40,000 products. It prides itself on both the accuracy and exhaustiveness of its data.

“We built this extension to be a simpler way to access this data,” says its makers, “while also protecting your privacy and running all operations on our own servers so that your browsing isn’t slowed down.”

Codepen Project

Founded in 2012 by Alex Vazquez, Tim Sabat, and Chris Coyier. CodePen has grown to become the web’s largest and liveliest communities for testing and showcasing HTML, CSS and JavaScript code snippets. For the last five years, it’s functioned as both an online code editor and an open-source learning environment, where developers can create code snippets (“pens”), test them and get feedback.

Recently CodePen took another big leap forward by launching its own IDE (Integrated Development Environment), CodePen Projects, which lets you build websites within your browser.

You can drag and drop your website files, organise them into tabs, and preview your site as you build it. There are templates to help you create sites more quickly if you choose, as well as built-in debugging tools.

Bootstrap

Bootstrap is certainly not a new tool. But the new version of the world’s most popular front-end framework is tabbed as ‘a major rewrite of almost the entire project’, so I think it warrants a mention. Some notable changes include the following:

Bootstrap has revolutionised development and there’s no doubt the ubiquitous framework will continue to shape how we build stuff on the web.

Dropped support for IE8 and iOS6

CSS source files move from Less to Sass (‘.scss’)

Switched from px to rem for primary CSS units

Increased the global font size to 16px from 14px

Added support for Flexbox in the grid

A new, all-encompassing ‘cards’ component to replace older components

Nearly all components refactored to use classes without child selectors

Ally.js

No list of web development tools would be complete without at least one accessibility tool. Accessibility is one of those often-neglected aspects of design and development, and ally.js can simplify it for you.

Now a stable product, Ally.js is a JS library that gives you fine control over focusable and non-focusable elements. For example, using its API you can prevent elements outside a modal window from receiving focus until the modal is closed. You can also find out exactly which elements are focusable or tabable, and identify focus changes within the shadow DOM.

Type Nugget

Type Nugget addresses a need you’ll have on just about every frontend project: dealing with CSS typography. Still, in beta with more features in pipeline, it’s an online typesetting tool that gives you fine control of typestyles.

The tool displays a diverse set of text samples on the page, which can be live-tweaked in a panel on the right. The panel lets you select font size, weight, style, colour, letter spacing, text decoration and more for individual aspects of the page (global styles, headings, paragraphs, links and HTML lists).

This tool also allows you to register for an account, log in and save the progress of your work. After specifying all your settings, you can hit the ‘Generate Code’ button and Type Nugget will produce a link to a style sheet hosted on its CDN. If you find CSS typography tedious and repetitive, you’ll benefit greatly from adding this tool to your workflow.

ARkit

Augmented reality is as blending digital object and information with the environment around you. It is a space that’s generating a lot of excitement in the web and app development community today. Not least because in June at WWDC17, Apple released ARKit, a new framework that allows you to easily create AR experiences for iPhone and iPad running on iOS 11. To get started, simply download iOS 11 and the latest version of Xcode 9, which includes the iOS 11 SDK.

Vue.js

What would a list of new web tools be without the hottest new JavaScript framework? Vue.js, like React, is a framework for building user interfaces and utilises a virtual DOM. As the name suggests, Vue’s core library is focused on the view layer.

Look at a code example, taken from Vue’s docs, that utilises user input and demonstrates the library’s elegance. We’ll start with the HTML

There is a custom v-on handler that calls the reverse Message method. Vue is great for those who are less-experienced with complex libraries, but also has a number of plugins to help with the development of complex single-page web apps.

Hologram

Hologram is a new all-in-one tool for WebVR creation. This free desktop app requires no previous coding knowledge, and its native Google Blocks integration enables you to play with lots of free 3D objects right off the bat. Under the hood, Hologram takes full advantage of the power and simplicity of A-Frame, Mozilla’s WebVR framework.

This means that developers can download projects created with Hologram and use them in their A-Frame workflows. It’s currently available on Mac and a Windows version is promised soon.

Parallax SVG Animation Tool

Created by Gareth Battensby of Parallax, SVG Animation Tools has a range of SVG animation tools in the form of a Python script. “I built the tools as a response to the frustrations you get when creating complex or long sequence SVG animations,” he says in this explanatory blog post.

“The biggest of these being overwritten edits whenever you re-export from Illustrator. These tools completely eliminate that issue – they’re perfect for front-end developers who animate SVG graphics with GSAP or similar animation libraries.”

Github  Notifier

Hate wading through emails? Prefer the idea of getting GitHub notifications in your browser? This Chrome extension does exactly that.

This straightforward but effective tool was created by Stacy Goh. It enables to get real-time push notifications whenever someone creates an issue, comments on an issue, pushes code, creates a pull request, forks your repository or stars your repository. You can learn more about how and why Goh created it in this blog post.

Quill

Quill is billed as a WYSIWYG rich text editor ‘for the modern web’. There are lots of different contexts in applications where a rich text editor is needed. So it’s no wonder Quill has exploded in popularity since its version 1.0 beta release in mid-2016.

Now a stable product, Quill lets you convert a basic div element into a powerful rich text editor with a few lines of JavaScript:

But the most powerful features in Quill are its flexibility and extensibility by means of modules and a powerful API. Quill offers themes and modules that include a toolbar, keyboard, clipboard, and history. You can test-drive many of these features in the Quill playground and of course, the documentation is a must-read if you intend to use its advanced features.

URL TO PDF

Brought to you by Alvar Carto, this self-hosted API enables you to convert the HTML into PDFs. Hence it’s handy for rendering receipts, invoices, or any other HTML content. The API ignores a page’s @media print CSS rules by default and sets Chrome to emulate @media screen, to make the default PDF look more like the actual site. You can set it to operate automatically at regular intervals and best of all, it’s free.

iota CSS Architecture

iotaCSS is a CSS framework that’s been purposely crafted to be design-agnostic. It was created by consultant front-end architect Dimitris Psaropoulos, who found that other CSS frameworks were imposing a lot of limitations on the designers he worked with. This was forcing him to either write a lot of code on top or ask the designer to compromise. So instead, he created his own framework, which works a little differently.

While most CSS Frameworks behave as a unit, iotaCSS is a set of individual, small and flexible modules that don’t depend on each other. You can use one independently or you can combine them to build more complicated user interfaces.

Launchpad

Launchpad is a tool from Anima that lets you publish websites directly from Sketch, with no coding required.

The entire interface is integrated into Sketch and can be used to create landing pages and static websites, although at the moment it doesn’t support dynamic web pages using JavaScript. But it does let you include links, add responsive breakpoints, set up forms, embed videos and integrate analytics tools. So it could be an ideal tool for setting up a quick and easy promotional website, for example.

React sketch. Aap

React Sketch.app provides a super-easy way to manage Sketch assets in a large design system. Built by the team at Airbnb to help bridge the gap between designers and engineers. It’s basically an open-source library that allows you to write React components that render to Sketch documents.

Because React Sketch app uses Flexbox, its components can have the same rich layout as your real components. That means no more dragging rectangles by hand; everything works like your target layout engine.

React Sketch app, then, makes it simple to fetch and incorporate data into your Sketch files. It also provides an easy way to build your own custom design tools on top of Sketch.

SVGito

SVGito is a free web app that cleans up your SVG files, to save you the bother of manually editing them.

Created by Peter Nowell, this neat little app automatically optimises your SVGs at the touch of a button, and will typically reduce their size and complexity without changing what they actually look like on screen.

Sizzy

Sizzy is a tool that allows you to preview multiple screens at once while you’re testing out your responsive web apps.

Creator Kristijan Ristovski had previously been using react-storybook to switch between the different variations of each component. But he got annoyed having to go back and forth between so many devices. Hence, he built Sizzy, which allows you to see all the changes simultaneously, making it much quicker and easier to spot and fix layout bugs.

Foundation for emails 2

Foundation for Emails is a framework from ZURB formerly known as Ink. It is used for creating responsive HTML emails that work on just about every platform and service, bundling together email coding best practices. The latest iteration uses a Sass codebase that gives you access to a settings file, wherein you can define all sorts of defaults to suit your needs.

Form

RelativeWave’s Form is a prototyping tool like no other we’ve tried. It’s not a typical design tool in that there’s no tools or layers palette. Using the app feels like a mix of design and code.

While you can’t actually create graphics in the app, you can insert them and use what Form calls ‘patches’ to add gestures and interactions. The Mac app requires you to also use the iOS app so you can view your prototype in real time and interact with it.

“Form is an app design and prototyping tool with the goal of producing designs that are closer to what you get in production,” explains RelativeWave creative coder Max Weisel. “We want designers to work directly on the production side of an app, and at the same time free up engineers to focus on more complex problems.”

There are some great tutorials on how to use Form, but the process is rather complex if, like us, you are used to creating visuals in Photoshop. Moving an image to the centre of your device, for example, is achieved using Superview variables and Match Patches. Once in place, you use maths to divide the width and height and connect them to the X and Y positions in Image View. Group those together, rename the variables and adjust the X and Y anchor points. We found this process fairly complex.

However, once you get your head around the processes, you can create stunning prototypes. Having access to the device’s camera and other sensors means the prototypes you create are just as powerful as the coded app would be.

[timothyakoonce]

What is Mobile First Website Design and Do You Need It? A Guide for Business Owners.

“Yes, your site will be mobile friendly.”

Any good web designer will tell you that. But your next question as a business owner should be, “Do you design mobile first and should my site be designed mobile first or not?”

Getting the answer to this question answered correctly can increase revenue. Getting it wrong can leave money on the table because of a less than optimal experience visitors have on your website.

This article isn’t written for web designers, but for you, the business owner, to help you understand what type of site you need and what to talk to your website designer about.

What is Mobile First Web Design?

Mobile first web design simply means that the mobile version is designed first and takes priority in design considerations before the desktop version of a site is created.

In the “old days” (aka the early days of the smartphone), all web designers would create a beautiful site for desktop and then think, “Okay, how are we also going to make this look good on mobile?” Then they would create the responsive design of the site for small-screen devices. It’s not wrong, it’s just the way everyone designed back then, partly because the viewership on mobile was small and it was a newer medium.

Not anymore.

When you need a new website for your business, you now need to make a decision about whether your site will be Mobile First designed or Desktop First designed. (Note: When we say desktop, we also mean laptop. It really means a larger screen with a horizontal orientation versus a smaller with a vertical orientation.)

Mobile sites tend to have more restrictions. For example, the clickable button on a mobile site has to be large enough that the end-user can click it easily. On a desktop, this isn’t an issue.

Why is Mobile First Design Important?

More and more people will visit your site on their mobile. This is a general trend and is expected to grow. Your site needs to function well in a mobile environment.

In 2012, smartphone sales overtook PC sales. Obviously, that correlates with more people using smartphones to search the web.

However, that doesn’t mean it is true for your website. You need to know the truth about your website’s viewers.

How Do I Know The Mobile Versus Desktop Viewer Stats on My Site?

You can know the trends for your own website if you have Google Analytics installed.

Go to your Google Analytics homepage dashboard by logging in at https://google.com/analytics

Look at your home Google Analytics dashboard for a section called What Are Your Top Devices. It looks like this:

Click on that area and you’ll be given more detail.

You can change the date filter to see how your mobile versus desktop viewership has changed over time. Typically, we see a growing trend toward mobile, especially if views are compared Quarter-to-Quarter or Year-to-Year.

In general, we are consistently seeing a trend toward greater mobile viewership. However, this depends on the audience your site is targeting (see below).

Why is it important to know whether people are viewing more on desktop or more on mobile?

Because you want to design first to the device on which the majority of online visitors view your site.

All designers must make choices. Your site should look fantastic on desktop and mobile. However, it will still be slightly design optimized to look and work a wee bit better on one platform than the other. This is not just a Moon & Owl Marketing approach. The desktop first versus mobile first choice is innate and requires that every designer has to make some decisions which render the appearance and effectiveness a tiny bit better on one platform versus the other. The key question is, does desktop or responsive design come first.

Here is a general rule of thumb. The more business-to-business (B2B) your site’s audience is, the more desktop views you will have. The more consumer oriented (B2C) your site is, the more mobile viewers you will have.

Notice the difference between these two examples.

B2B Website | Desktop Usage Heavy

B2C Website | Mobile Usage Heavy

This makes sense. Think about how you use the Internet.

You look at different sites at work on your PC than you do when surfing on your phone. Everyone follows this pattern.

So if you have a heavily oriented B2B website, it should be designed desktop first if 70% of your traffic is arriving via desktop/laptop.

If you sell a fun product or lifestyle product (fashion, décor, fitness, etc.), or perhaps have a blog or passion-based content site (like The Pioneer Woman and her almost cult like following), you should definitely have your website designed to be Mobile First.

Is mobile first website design important for search results and SEO?

On March 26, 2018, Google announced it is making the mobile version your site the dominant way it will index your site (how it breaks out the presentation of your site in search including which pages are listed in ther SERPs).

And while this is new, be assured, your mobile site, rather than desktop, is the site version Google is most using to determine both your site’s content and index it.

While the Google powers that be currently say mobile first isn’t yet affecting ranking. Trust us, this isn’t active yet, but it’s coming soon.

This means the Google smartphone bot, and not the desktop bot, will be most utilized. (Don’t think of bot as R2D2 or CP3O. It’s automated software agents, called code, that crawls your website to discover what is on it.)

The better optimized your site is for mobile, the better it will ultimately rank on Google. And keep in mind, user searches from a smartphone and user searches from a desktop often return different results.

If you do have a large percentage of mobile users, ask your designer if they incorporate something called AMP (accelerated mobile pages). To learn more about AMP, click here.

When you design for desktop first and then approach mobile design, the design principle is called graceful degradation.

When you start with mobile first, your designer is forced to boil down the site to the most essential features for a great user experience. Then, he or she can do additions that add non-essential value for the desktop user.

These are enhancing additions but do not change the core functionality and conversion optimization of your site. Often designers call this progressive enhancement.

If most of your traffic arrives on mobile, it is better to expand a small-screen designed mobile site than to constrict a large-screen design down to a small screen.

But, for the web designer, it is also less fun as they must consider the constricting elements of mobile before setting off on the less restrictive wild-west of desktop version. Many designers don’t like doing mobile first design because they feel it limits their artistic creativity.

It’s much easier for them to design a mind-blowing desktop experience and then dumb-it-down to mobile.

But the primary job of your designer isn’t to have fun or be artistic.

A web designer’s priority is to design your business a website that converts viewers to customers, patients, and clients on the device on which they arrive.

How does mobile first affect the actual design of my business site?

Your website should look beautiful (or cool, or luxurious, or kitschy or whatever reinforces your brand) but its PRIMARY goal is to deliver content to the end-user.

Mobile first design tends to be content-centric. The written copy of your site is clearly presented for end-users. While your site will still look great, any distracting elements (landscape photos, hover-over buttons, etc.) will not be present.

The design process is the same:

Target Audience Definition – clearly knowing who is the desired end-user.

Foundational SEO & Strategy Work (keyword research, user intent, etc.)

Content List / Sitemap – the outline of your content.

Copywriting – writing the content for your site.

Wireframe Creation – the blueprint or skeleton of how your site will lay out on mobile.

Mock-up – the color rendition of your homepage and internal pages.

Coding – turning the mock-up into working pages and merging in the written content.

Desktop Design – modification of design to add enhancing elements for the desktop.

Testing – ensuring everything is functioning at 100%

Launch – taking the site live at the active URL.

Does starting with mobile first design mean my desktop experience will be inferior?

No. Your desktop can have further enhancements off the solid foundation of your mobile responsive design. Nor do the experiences of your website viewer have to be exactly the same. Content and basic functionality should remain the same, but each design can be adjusted to take advantage of the native capabilities of each device.

If your data reveals that the same user is accessing your site on BOTH mobile and desktop, you do want to ensure your designer makes the user experience (UX) similar by not varying the user interface (UI) too much.

Here is an example of a simple enhancement on desktop…

In the presentation, what is a bulleted item on your mobile might work better as a chart on a desktop

Is consideration given on how humans interface with each device differently?

The approach and ergonomic element (how the human body, in this case, the hand) interacts with the device is a crucial consideration.

The look and layout of your site need to make logical sense, but it also needs to make ergonomic sense.

For example…

A user on a cellphone uses his or her thumb to navigate. This means the call to actions and/or actionable item on a website needs to sit near the position of the dominant thumb – near the bottom of the screen. Their thumb will also be obscuring the screen partially as they interface.

On a laptop or computer monitor, they will most likely be using a mouse which doesn’t obscure the screen. But with a mouse, you don’t want to require one click on the right side of the screen with the next click on the left side of the screen followed by a third on the right. This is to much “travel time” for the mouse, and the user will get frustrated.

Now compound this fact that many new laptops and monitors are actually touchscreens. Things can get complicated quickly.

Separating the Discount Designers from the Professional Designer

An experienced web design agency, like Moon & Owl Marketing, will weigh all things in your web design.

This is what separates the great designers from the discount designers who make “pretty websites.” Mobile first considerations, ergonomic considerations, and other criteria all go into your site planning and design.

Your Business Owner Action Checklist

Know your website visitor percentages of smartphone vs. tablet vs. desktop/laptop devices.

Decide based on this data if a mobile first approach is needed.

Evaluate the functionality of your mobile page. Be critical of your own site. We’ll even give you a free evaluation if you call us. 817-889-1487.

Determine if you need a site refresh or redesign that is mobile first.

If Needed, Make the Change or Update

Remember, your website is a digital asset. It’s not carved in stone and can be updated. If you see a majority of your viewers are on mobile yet your site was not designed to be mobile, it’s time to switch to a mobile-first design approach.

We are available to help advise you and provide design, redesign + development on a business website for your company that converts viewers to customers, clients and patients. Call us for a free consultation at 817-889-1487.

The following article What is Mobile First Website Design and Do You Need It? A Guide for Business Owners. was originally published on: https://www.moonandowl.com/

[akashamichelleblog]

Will Designers Be Replaced by Robots?

Adrian Shaughnessy, writer at the Creative Bloq, discusses how automated processes could threaten the role of the designer.

"During my time as a graphic designer, I've experienced nearly everything – short of physical violence – that working life can throw at you: recessions, legal disputes, defaulting clients, and of course, the thrill that comes with completing a successful project.

But two events – both of which turned the practice of graphic design on its head – stand out as life changing. The first was the arrival of the Macintosh computer. For all practising designers at the time, computerisation necessitated an extensive rethink of the craft: no more mechanical artwork, no more paste-up, no more typesetters, no more expensive retouchers. Many of the tasks previously done by repro houses were taken over by designers sitting in front of computer screens. It was the beginning of a new age of digital self-reliance and a period of massive reorientation. 

The second event was the arrival of the internet. Here was a new way of thinking about, and making design. Suddenly, designers no longer had complete control over how their work was received. The inability to control browser use, screen ratios and fonts had a decisive impact and old rules such as the number of characters per line length rule became redundant. Even the users themselves could mess with the appearance in ways unthinkable to designers trained in print design, where layouts were fixed once they left the designer's hand. 

Is VR the future of design?

These two events threatened to shrink the role of the designer, but the opposite happened. There are now more graphic designers and students than ever before. Design is a global industry embedded in, and inseparable from, business and culture. For many, graphic design is as much a lifestyle choice as a career choice. We do it because we love it.

The rise of automation

If design and designers can be said to have benefited from these two shocks in the long run, there are concerns that the craft and the profession might not survive quite so well. Is design about to meet its Uber moment? Is AI about to take on the role of the designer? Is the surge towards a fully automated world about to engulf design? 

It might seem that automating the design process is impossible. You might assume that the creative imagination is the least likely arena to be taken over by machines, that bots are for routine production, not conceptual thinking. In reality, the process is already underway.

"It might seem that automating the design process is impossible... In reality, the process is already underway"

Social media has usurped many of the roles previously done by designers. You can start a business with a Facebook page (or as one expert calls them "Facebook pages … the new small-business homepage"). For many, access to a Twitter or Instagram account is all the design they need.

The automation of countless realms of everyday life is already at an advanced level: entire factories are operated by robots; legal contracts and stock market trading are routinely done by bots; automated warehouses, ATMs, and user operated supermarket tills mean fewer jobs in industries once regarded as high volume employers; driverless vehicles signal the end for the millions of people who drive for a living. Why should design be any different? 

In the book, Inventing the Future, Nick Srnicek and Alex Williams state that: "anything from 47 to 80 per cent of jobs are likely to be automatable in the next two decades." They also note that the "roboticisation of services is now gathering steam, with over 150,000 professional service robots sold in the past 15 years. Under particular threat have been routine jobs – jobs that can be codified into a series of steps." 

The demise of web design

Surely this lets design off the hook? We can't expect machines to make the irrational, gravity-defying leaps of imagination that designers make, can we? What about the designer's ability to capitalise on accidents and unforeseen coincidences? Surely this sort of cognition is beyond the bot? 

Not so. We live under the dictum that anything that can be automated will be automated. And nowhere in the design world is this idea more advanced than in web design. In a post titled Why Web Design is Dead, on the website UX Magazine, designer Sergio Nouvel notes: "Most of the content you see on the web today is run by some framework or service – WordPress, Blogger, Drupal, you name it. Frameworks provide you a foundation and shortcuts so you spend less time struggling with the creation of a website, and more time creating content. As a consequence of the ubiquity of these frameworks, a world of free and paid templates lets you start with a professional-looking design in minutes. Why hire a web designer if you can achieve a fairly acceptable design for a fraction of the cost using a template?"

The Grid, a San Francisco and Berlin-based startup, was the first to announce that it has created a website builder that uses artificial intelligence. It enables users to upload images and text or make use of its library of colour combinations and images, and then, using AI, it performs all the key design functions: positioning of images, placement of text, selecting colours and sculpting a unique, customised website. The Grid says it doesn't use templates, but 'layout systems', which it claims offers greater flexibility.

With The Grid, if you don't like what you see, you hit the Redesign button and in seconds a different layout appears. The Grid's promotional video gives the impression of effortless, nearly instant success. It's a seductive pitch. But not everyone is impressed. 

Various webinars offer a less convincing glimpse into The Grid's AI approach to web design. Watching these critical takedowns, I was reminded of the early days of DTP design – gap-toothed typography and bitmapped images. But the painful DTP birthing phase didn't last long. Designers mastered the software, the software improved, and so did computing power. You wouldn't lose money betting on AI websites becoming much better in the future. 

A grit-free process

It's easy to see why clients would be attracted to this grit-free process. There's no more time spent listening to pesky designers defending their design decisions, no more waiting around for new designs to arrive. And here's the clincher: no more redesign fees. Instead, clients inhabit a fragrant world of endless iteration and seemingly limitless choice.

The Grid is not alone in its quest. In September 2016, the website Tech Crunch reported that Canva, a design platform for web and mobile, had announced a new infusion of $15 million in funding and a doubling of its valuation in 12 months. This added capital was reported to have brought Canva's valuation up to a whopping $345 million.

What makes Canva so attractive to the guys with the money is the fact that it can be used by non-designers. Canva claims it only takes 23 seconds to become a proficient user of its software. 10 million people are allegedly using it to design business cards, posters, presentations, and graphics for social media. 

Looking at the formulaic design featured on the site, it's hard to take seriously claims that 'anyone can become a designer' with Canva. It's easy to laugh at some of the work these sites post as examples – most of it looks as if it has been designed by someone on autopilot. But will we be mocking in five years' time? When we look at what is happening in AI, it seems foolish to dismiss attempts to automate design. 

AI-driven design

When I talk to designers about the likelihood of AI taking over the tasks of designers, I'm met with scepticism. But this strikes me as short-sighted. In a detailed account of Google's work in AI, published in the New York Times Magazine, the journalist Gideon Lewis-Kraus writes about the company's use of artificial intelligence to transform Google Translate. Anyone who has used the translation service will know that its results are hit and miss, always require correction, and are rarely idiomatically correct.

All that is changing. In its new AI-driven version, Google Translate is producing astonishing results. Developed by the Google Brain team, 'artificial neural networks' (much like those in our skulls) are offering an alternative to traditional computer programming and represent a move towards self-learning machines. Using these networks, robots can then acquaint themselves with the world via trial and error in the same way that children do, giving machines "something like human flexibility." 

Lewis-Kraus reminds us of Alan Turing's famous test for an artificial general intelligence: "A computer that could, over the course of five minutes of text exchange, successfully deceive a real human interlocutor. Once a machine can translate fluently between two natural languages, the foundation has been laid for a machine that might one day 'understand' human language well enough to engage in plausible conversation." 

If Google's new translation service is close to fulfilling Turing's criterion, then it's not much of a stretch to imagine AI tackling more sophisticated design problems than shifting elements around on a webpage. Most of the everyday design we encounter can be broken down into a simple set of principles that can be codified, and it seems highly probable that a machine can learn the rules of typography, the golden ratio and the rule of three. And it's no gamble to assume that cost-culling businesses will latch onto the money saving benefits of AI design. 

Adapt to survive

What should designers do? AI-driven design already has the potential to remove some, or most of the production based tasks that designers do. Need 100 web banners for a global ad campaign, all with different information and numerous different languages? No problem. Robots capable of handling such routine tasks will result in fewer design production people.

But will the sharp end of design be affected? Eventually, yes, and just as human beings have learned to do since the introduction of industrialisation, we must adapt. It's my belief that designers are well equipped to do this. Teaching flexibility and a willingness to learn may be the biggest challenge facing the world's design schools. 

In the information age, we may be looking at a world without paid work

Of course, this doesn't only apply to design. In the information age, we may be looking at a world without paid work. This takes us into the political realm, and subjects that governments are avoiding. It poses questions such as adopting a basic income, and the relearning that will be needed when the post-industrial world is replaced by one of unlimited leisure. These topics are discussed in academia and future-gazing think tanks, but we all need to be thinking about them sooner rather than later.   

Halfway through writing this, I had a sudden, sobering glimpse into a machine-driven world. My five-year-old iMac died. The screen went black, none of the usual remedies helped and it was Christmas, so there was no chance of emergency repairs. It was a personal mini-disaster. But this is what happens to machines: they break. Perhaps their fallibility is the only thing between us and an AI future.

This article originally appeared in Computer Arts issue 263; buy it here!

Source URL: Creative Bloq