Red, Lithium and Stack at the Frontend Conference Zurich 2013

Frontend Conference Zurich 2013: inspiration for better design

09.09.13

The Frontend Conference Zurich 2013 could convince with many innovative approaches and useful tips regarding frontend design. A recap of the most inspiring talks on the design front of the event.

Inspiration for frontend design

From the 29th to the 30th of August, the third edition of the Frontend Conference Zurich took place. Renowned speakers from all over the world spoke about frontend design and technology. The talks were grouped accordingly, so that there was both a design and a technology oriented stream of presentations.

The most inspiring talks in the design stream were John Peebles’ talk on how to build better products, Simon Raess’ explanation of his approach called “design driven development”, Denise R. Jacob’s inspiring speech about creativity, Hans Christian Reinl’s insight into how we can use style-guides to improve team work, Vitaly Friedman’s numerous tips for responsive web design and Dan Rubin’s talk on the language we use in web design.

John Peebles - How to Build the Perfect Product Your Users Want But Can’t Describe

John Peebles shared his tips for building great products. Contrary to popular belief, building a product should not be user driven. Instead, you need to focus on the point in the workflow in which your product resides. Adhering to a deep and thoughtful approach of information gathering, John Peebles demonstrated that building a product means solving a problem, declaring the core mechanics to be „know“, „define“ and „solve“.

The first step is to „know“. This can be achieved by developing detailed personas for your product, observing the task which your product will be doing, exploring the entire process of how your product will be used, including what comes before and after it, and understanding the prospective users’ motivation and incentives.

The next step is not yet the solution, but the definition of the problem. John recommended various useful techniques, such as the “5 Whys”, meaning that you constantly question the answer to the previous question until you reach the very bottom of the problem. Another tip of his is to take nothing for granted and challenge all that appears to be given, thus forcing ourselves to come up with new concepts and innovations. And lastly, instead of listening to users and giving them what they want, we should watch them and present them with what they need.

Finally, we have to solve the defined problem. Run through the product using your personas, try to visualise the product within the workflow and see if your solution works by using it yourself. Collect feedback and use the input to improve your solution.

Solving a problem is a complex process, during which it is important to remain consistent. If you think about adding new things, you have to consider how these can be integrated throughout the whole product.

Analogies can help you develop lateral thinking and come up with new ideas. Sometimes however, you might have to sacrifice a good idea for a better one – innovation is often not evolutionary, but revolutionary and requires destruction. And if you get stuck: Start proposing stupid solutions – these ideas might spark a useful thought for a new solution!

Simon Raess – Design Driven Development

The many requirements of marketing, business or legal issues often run the risk of covering the original vision of a product. Techniques such as Usability Engineering, Agile Development or User-Centred Design try to avoid this. Simon introduced us to his approach: Design driven development, which is a combination of existing methods with the goal to build better results in less time. 

At first sight design driven development looks like the outdated waterfall model: It starts with concept design and goes step for step through interface design, visual design, web development and an optimisation stage. The difference is that design driven development integrates all team members in every step, and it defines the user as the overall centre, so that each step involves testing before moving on to the next one. 

To make design driven development work, it is essential to have T-shaped employees: Employees which apart from being experts in their own field also understand the areas of their co-workers. Only then can the intended exchange and collaboration happen.

The client is also integrated into the whole process. There are no consultants or art directors standing between client, designer and developer, so that direct communication between the people involved can happen. By creating a real-time feedback loop and sharing a broad overview of the progress with the whole team, the client included, everyone is can see and understand what is going on in the project, so that best results can be achieved.

Denise R. Jacobs - The Creativity (R)Evolution

Creativity is what enables us to come up with new, better solutions, leading to what Denise calls “betterness.” Creative revolution means that we are moving from where we are right now to somewhere new.

Setting this revolution into motion isn’t difficult: Start by modify an existing behaviour, a small habit and thus improve your work and creativity incrementally by anchoring something which you can already do. According to Denise, the individual is the gateway for the creative revolution, because in order to provide better results and help others, we need to be motivated and love our job. Anything that you enjoy doing, things and processes which feel like fun and play, are helping you be creative. 

On the next level, we should realise that creativity is social and evolves best in a team. The more people you have to collaborate, the “better“ your creativity will be. You need teams with people who trust each another and like working together, people who can push one another to achieve better result. Make sure you take care of this ecosystem, and be positive to encourage creativity. Be the creative revolution you want to see in the world!

Hans Christian Reinl - Be Friends With Your Designers and Style-Guides

Style-guides are not just a useful reference, they can also improve the collaboration between designers and developers. Style-guides describe and consolidate the identity of a company. They create consistency and can support efficient, conflict-free collaboration, eliminating disagreements before they even occur. 

Typically, style-guides contain information about colours, iconography, lists, forms, etc. Parallel to this, it is useful to also define code conventions in a style-guide to ease maintenance and improve readability and understanding of the code.

Separating concerns into different components, for instance modules and widgets, can further improve your production process. These different components, which consist of markup, styles and functionality, allow you to focus on one task at a time, which is especially useful for larger websites, as it enables you to split your team into different groups which can take care of the individual components.

To ease your work, there are component libraries such as Bootstrap, yet you should ensure that you are only using the components which you need instead of just a library which contains everything. Hans Christian Reinl also encourages to think beyond using your own git repository and consider tools like Bower, a package manager for the web, or Yeoman

Vitaly Friedman – Responsive Web Design: Clever Tips and Techniques

The web is an unpredictable environment with no black and white solution. Vitaly Friedman provided an extensive overview of practical tips and techniques for responsive web design, which can help us deal with the web’s fluid changes and make our design future-friendly.

Preparing our design for the future means that we will have to go beyond where we are now, and for instance go from responsive design to responsive interfaces. The users’ experience can progress with their learning curve, for instance by adapting the size of assets as the user progresses through the website.

Another new challenge is resolution independence. The rapid spread of devices with high density displays forces us to find future-proof solutions for graphics. Our options today are SVG and Icon Fonts, yet there are still many things which we can enhance. SVG and Icon stacks introduce the idea of selectively deciding which part of the SVG should be which colour, rather than combining two of them. Another neat trick are compressive images. We don’t necessarily need high resolution images for high density displays. Instead, we can take an image with normal resolution, double the image in size and use maximum JPEG compression. Now, the picture is a great deal smaller in file size, but still looks like a high resolution picture due to being re-sized.

Furthermore, Vitaly presented several tricks which allow us to improve the loading time of a website. The first one is conditional loading: We break down everything into core content (e.g. HTML/ CSS), enhancements (e.g. JavaScript) and leftovers (e.g. Google Analytics), which we keep decoupled. Loading them progressively, we can already provide the core content while for instance the JavaScript “enhancements” are still loading. Another trick is lazy loading, which can be used to avoid the long loading times of JavaScript. We can let browsers download all of the JavaScript right away, but evaluate it only if the user needs it, meaning that much of the downloaded JavaScript will be commented out when not needed. What we ought to keep in mind is that performance too can be a design feature!

Dan Rubin – The New Language of Web Design

Dan Rubin’s talk revolved around the language which we use day in, day out in web design. Words carry power – they can describe, promise, oblige, express, even change the state of the world. The web industry, evolving faster than ever, constantly creates new terms and words. Dan examined how we can form vocabulary which can last for the next years.

One way of creating new terms is to borrow words from other disciplines. However, this might lead to confusion, as there is already an existing concept behind these words: The term “page“ for instance, when used in the context of print design, describes static dimensions. However, in web design, it stands for a dynamic area. Terms borrowed from disciplines further away lead to less confusion. „Responsive architecture“, for example, causes little to no confusion. Further sources for new words is the combination of existing terms to describe a new concept, or the use of old words, such as „scroll“, which originally refers to a physical roll of paper or parchment.

The world of web developers and designers can be changed through a single blog post which introduces a new word. Therefore, it is important that we think about our words and define our vocabulary, because the terms which we use today might stay in the heads of the people of tomorrow. Defining our vocabulary will define our future, and everybody in the web industry is both involved in and responsible for this task.