Crafting Pixels

Web design is a diverse field that changes quickly, and as web designers we have to adapt and improve our skills daily just to keep up.

Responsive web design changed the way that we think and processes we use. We cannot assume who our audience is, or what medium they are using. We must work with the user, understanding their top tasks and goals, to create an adaptable product.

This is why the title of Web Designer becomes a blur, at one end of the role we are trying to develop better techniques to get user insight by gathering qualitative data, in order to test and improve the sites usability. At the other end we look to create prototypes and detailed animations that usually require the use of JavaScript. Between, we use our creativity, implementing our understanding of the data, using visual language and design theories to outline solutions. This becomes the script for our prototypes.

While important to have a wide range of skills and techniques in our toolbox, each member of the design team has varied skill sets making teamwork essential in creating a better product. We ensure that we can still work collaboratively, within our own team, and with teams throughout the organisation. To ensure this, it is essential our systems of working are transparent, allowing team members to easily adopt and adapt. This is why we build the foundations, our framework and essentially ‘The core’ to our design process.

As designers at Secret Escapes we are working with a living breathing product, we make data driven design decisions in order to improve our product. Our work varies from site iterations in order to meet hypothesis for tests, to large roll outs of site features. Alongside this, as a team, we are creating patterns libraries, with modular components to distinguish our visual language.

Creating static, bespoke layouts is no longer feasible, nor sustainable. Our site has rapidly expanded over 4-5 years, new pages, new features, new territories! Our product is highly adaptable, so we are striving to ensure our visual language is not only adaptable, but scalable. Object-oriented design reduces complexity, allowing us to iterate and introduce objects, without affecting the rest of the system.

 

To create our visual language our first step is taking inventory of all that makes up our site, pulling the interface apart. Slicing pages into modules, that can be used to design our system. Re-usable modules will help to rapidly create new pages, keep consistency to the design and emotion of our site, thus improving the user’s experience.

From our inventory we create our visual language, a scaffolding for team communication. These names will help to identify component functions, inconsistency and duplication.

Secondly we create our css architecture, at each step questioning the design of our modules. Can it be re-used? How does it work at different viewport sizes? We aim to keep our front end maintainable and understandable. By using common conventions such as the BEM naming methodology and CSS namespaces, we create internal standards. With our modular names having already been decided, as a team using our visual language, it produces clarity and ensures we can abide by our front-end standards.

CSS architecture

CSS architecture

Common conventions, BEM and namespacing

Common conventions, BEM and CSS namespaces

The outcome becomes our framework, a lightweight modular responsive framework, designed using object-oriented patterns. Together our visual language and CSS architecture become reusable, maintainable and scalable.
Our goal at Secret Escapes is not to create a shiny new page based on ‘trends’, but to look at the bigger picture, produce a consistent, high quality user-experience based on qualitative and quantitative user data.

Leave a Reply

Your email address will not be published. Required fields are marked *

*