As TangoSource’s role description says, web designers are architects of the web. They focus on the look and feel of the website; and so, they should be visual arts experts, who are skilled in color scheming, graphic design, UX and information flow. However, this is just a glance at the whole knowledge baggage that a web designer should own and dominate in order to create good and effective web solutions.
The web design process is not a linear path, but a convergence of multiple disciplines, techniques, and methodologies, which have to adapt to every project’s needs, whilst keeping up with the new technologies coming up every day. It involves and integrates several disciplines as Information Architecture, SEO, User Experience Design, User Interface Design, Graphic Design, Product Design, User Centered Design, and Front-End Development, to mention some of them.
However, many of the sources I’ve reached on the internet address web design just as development’s initial step, before starting to write the code. This development method approach is called Waterfall, in which every step leads to the next one, and every part of the team works separately and sequentially.
The Waterfall method starts with a project plan. Before any part of web development can begin, designers must have a clear vision of the final product in mind. The planning stage is upfront and quite extensive, but one of Waterfall’s benefits is that most of the times, web developers can accurately estimate the timetable and budget for a project.
This workflow approach was the most popular one until a couple of decades ago. And it certainly has its benefits, but one of its disadvantages is its lack of flexibility, as it doesn’t allow an open communication with the client and the rest of the team throughout the process. In many of the cases, if any part of the initial design changes, the team has to rethink the whole project.
Waterfall Model
During my recent experience working at TangoSource, I’ve had the opportunity to work with the Scrum Framework, one of the web development Agile Methodologies approaches which work through iterative, incremental cycles. It allows designers, developers, project managers and stakeholders to actively participate in the whole process, encouraging an open communication through it. Something to always keep in mind is that getting feedback from different perspectives is really valuable, as you gain team and customer insights for a faster testing and ideation.
In other words, in an Agile environment, the phases run parallel instead of following each other, as in Waterfall methodology. This way, design, development, and testing all occur at the same time, as the product is divided into smaller and independent parts, called Sprints. These Sprints can be individually released, according to the continuously evolving requirements and solutions, defined by the project’s needs. This also speeds up the feedback process and mistakes come to light, making bugs easier to identify and reducing time and money waste. Sounds idyllic, right?
Agile Model
These principles constitute the basis of the Lean Startup Mindset, known as the 3 step process: Build, Measure, Learn Feedback Loop. This infinite informational loop gives business the opportunity to create, launch, learn and iterate on new and old products, and it works as follows:
Build – Create a Minimum Viable Product (MVP) based on a set of assumptions.
Measure – Launch MVP and measure your hypothesis based on your assumptions.
Learn – Accept or reject your initial hypothesis and iterate on the MVP.
Build Measure Learn Loop
The essence of the Lean Startup Methodology consists of helping reduce time and risks associated with launching a new product to the market, by taking advantage of the efficient use of resources, and continuously testing said product for market risk. This is done by guaranteeing user’s interest before building the solution and testing for initial user engagement while continuing working on improving the solution to an identified problem.
As we have seen, Lean Startup Mindset and Agile Methodology share some principles and adapt them to their own techniques. This doesn’t mean that you have to choose one over another, but you can rather take from each one the tools that best fit you since they have their own way to add value to your own process.
In his article A Designer’s Introduction to “Agile” Methodology, Joel –who performs the creative work in a consultancy– gives us an insight into this, speaking from his own experience:
“As a designer, making the transition from freelancer to working within a big company with multiple teams on Agile projects, can be a big leap. In my experience, it is a useful framework to work within and its principles can even be used in your own personal projects.”
– Joel
If you’ve heard about the term ‘Agile Design’, it is simply the application of some of the agile development principles to the design process. One of this flexible framework advantages is that it can be easily adapted, according to different workflows, teams, and projects needs.
On the other hand, the incremental cycles approach can present some difficulties on the design end. One of the risks that a web designer might face while working with iterative processes, is potentially finding visual style inconsistencies between the early stages of the project and the final outcome. Especially, if there wasn’t a document defining the style guidelines from the beginning.
For this matter, defining a style guide is one of the best ways to ensure visual consistency. A style guide is an equivalent of creating a development documentation in which every project’s guideline is promptly defined. This guarantees us focusing every effort in the right direction and avoiding style incongruities during the whole process, or whenever future development or third-party production intervenes.
“The Agile approach of Continuous Integration is reflected in the use of style guides, because creating content first and then using it to build a flexible framework reflects the iterative and cyclical nature of Agile development. The iterative format comes from the ability to experiment, test and tweak the way the coded elements are used in a layout.”
– Luke Clum
If you want to dive a little more into this, Tom Greever has given us nine valuable Principles Of Design Implementation, which perfectly adapt to the iterative process design essence, and on which every design team can base to create their own style documentation.
These days, you can find several different tools out there to help you ensure not only visual consistency but also responsiveness and cross-browser functionalities. A great resource to use is the website styleguides.io, where you can find articles, books, and some other tools to help you as a starting point in your extensive quest.
Being aware of design principles is crucial for an effective digital communication, and therefore, a successful product. But it is also important to understand that visuals don’t construct the whole design, but just a part of it. There always has to be a solid communicative speech on which design decisions can rely.
As Matt Meazey said in his article The Web Design Process in 7 Simple Steps:
“Web design — and really, design in general — is all about finding the right balance between form and function. You need to use the right fonts, colors, and design motifs. But the way people navigate and experience your site is just as important.”
– Matt Meazey
Certainly, there’s more than one way to do things, but there is one main focus which has to remain as the center of our thinking process: creating real solutions for digital communication. Innovation is a plus. Always remember that as every project and team is different, you’re best off choosing the methods that work for you, and adapting them on the road.
