When it comes to creating a truly great piece of design, the struggle doesn’t only lie in ensuring that it is attention grabbing, unique, and tailored to the brand and their target audience – it’s about making sure that the design principals shared within both print and digital mediums can converge, allowing that particular design to be carried out across multiple channels seamlessly.

It’s this interplay between print and digital design principles that sparked a recent workshop titled ‘Design in The Digital Space’ held in our office by our lead UI/UX designer, Aaron Lepik, to help unify design ideas, enable greater efficiency and ensure that designs that look great on the page also look great on the screen. For your convenience, we took some notes from this seminar to help shape your thoughts around digital design and have broken this material into two parts – the first part of the seminar can be read below and covers usability, devices and browsers.

When it comes to explaining the purpose of design, Steve Jobs said it best, ‘Design is not just what it looks like and feels like, design is how it works.’ Design isn’t flat – it’s something that is experienced and played with, and this is what we must always remember when designing for digital.

From the outside looking in (both outside and inside the industry) the roles of graphic designers and digital designers can easily be blurred without keeping in mind some key considerations across methodologies and technologies, functionality and constraints. Some of these key considerations that have a bearing on design include:

• Usability (Simplicity, Relevancy, Learnability)
• Devices (Computer, Phone, Tablet, Watch)
• Browsers (Desktop, Mobile, Web Standards)
• Technology (Bandwidth, Development constraints)
• Accessibility (Colours, Fonts, Contrast, Size)
• Budget Impacts (Cost vs Time, Iterative Design)

All of these criteria make up the same overarching purpose: digital design is about the user. While traditional graphic designers take cues from marketing, the role of the digital designer is to bring to life a framework or wireframe that was planned with the user’s experience (UX) in mind. Graphic design is part of UX, and a crucial one at that and makes us answer questions like ‘how user friendly is this website, app or experience’. It’s this thinking that leads into User Centred Design, a collection of processes which focus on putting users at the centre of product design and development; it dictates that a digital product takes into account user’s requirements, objectives and feedback, ultimately ensuring:

• The design is navigable, intuitive and clear
• It functions to facilitate their goals in browsing
• It encourages conversion and solves user pain points
• Is consistent with UI patterns and interactions

As you can see, at it’s very essence, digital design is interactive. The true task of digital designers is creating the components (menus, content cards, buttons) that have an underlying intent to follow common user interaction patterns. Ultimately, graphic design is emotional and creative. Digital design is empathetic and functional.

So how best can we be empathetic and make design as functional as possible? When it comes to usability, simplicity is key. Simplicity comes with a bit of a stigma – but simplicity doesn’t have to be boring. The yardstick for many digital designs is the fine balance between creativity and simplicity. A design could be deemed as “unusable if the users’ journey is hindered (there’s an information overload, confusing layout, unclear calls to action, over-designed elements). User interfaces by their nature should be easy to use.

Secondly, great usability should provide the ability for learnability. Learnability reduces the time it takes to complete tasks. By relying on familiar, core psychological properties, we can ensure that user interfaces are easier to learn. As a result, user interface patterns emerge – recurring solutions that solve common problems, e.g. Top navigation (desktop), “burger” menu (mobile), Icons and symbols (universal language), and inline validation (inputs and forms).

Usability extends beyond digital products alone. Design standards appear in every medium, both digital and physical. Common design languages and patterns assist the user in learning an interface (e.g. consistent placement of navigation, similar coloured buttons for actions). Defining your “digital product type” early helps educate users and stakeholders on why design decisions were made and rationalised.

When it comes to devices, there is one design to rule them all: responsive web design. Design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation. It means asking yourself how does this website look scaling from a large 27” iMac, all the way down to older 3.5” mobile devices? On a desktop, users would see content shown in three columns, whereas a mobile might show the same content stacked into a single column.

To help us better understand responsive web design, it’s necessary to get familiar with three basic ingredients: fluid grids, media queries and flexible media.

Fluid Grids:
These are based on percentages and are a departure from traditional pixel-based design. A “grid” is the underlying framework for any digital design or app. The grid is important because it helps designs feel organised and easy for users to follow. It determines placement, size and hierarchy; it is not meant to hinder design creativity, but aid the designer in their decisions. Furthermore, designing for multiple devices relies on a grid that responds to both large and small viewports.

Media Queries:
Also known as breakpoints, these are used to apply different styles based on the capabilities of the device. We can control specific element’s (size, width, colour etc).

Flexible Media:
This requires us to adapt images and other media to load differently, depending on the device, by scaling or cropping.

As technology has progressed, the challenges for designing for multiple devices has grown. Print designs only need to support the medium it’s printed on, and nothing else. A digital design however needs to support current and future devices which aren’t even out yet, across multiple sizes and aspect ratios. Ultimately, A digital designer needs to be empathetic to users and developers, knowing the design is not only “usable”, but also “buildable” as a final product. A digital design that allows itself to grow and expand to suit the device will be easier and more cost effective to develop. Design once, develop once.

But the challenge doesn’t end with devices alone – we need to look at multiple browsers as well. In 2017, most browsers use similar standards which reduce headaches for designing digital products, but they are not without their nuances.

Additionally, with mobile taking over desktop in market share, this has resulted in a mobile-first design approach to websites and apps. And when we think mobile first, we need to be thinking content first as well. The mobile-first approach organically leads to a design that’s more content-focused, and therefore user focused. The heart of the site is content — that’s what users are there for. By adding layers of enhancements to a strong content foundation with the purpose of delivering an accessible (and hopefully optimised) user experience to all, this forces the designer to think about what’s important and provides insight into content hierarchy.

So how can you make sure that a design works well across all devices and browsers? The answer is simple – don’t over design it. Card/container based design (simple, singular entry point to content) translates well into responsive web design. Keep in mind the balance of visual clutter! In the end, the more complex your digital design is in terms of columns, elements, content, images, buttons etc, the harder it will be to support all devices and browsers.

Next week, we’ll move into the areas of technology, accessibility and budget impacts on digital design – but in the meantime, if you have any questions about digital design or are looking for a helping hand – give us a shout.