FLAT PHOTOSHOP TO WEBSITE IS SO YESTERDAY
I see it all the time across social media, LinkedIn discussions and forums. Design companies are struggling with the web design process. They have a creative team and a development team. Their creative team have little or no idea about front-end coding and development team don't have a creative bone in them. They have not embraced creative development.
So how do they get from a flat Photoshop file to a working, engaging and creative user experience (UX) focused website? The truth is, nine times out of ten they don't. When browsing the internet for inspiration I always see some really great ideas with terrible execution. That's because the design and development team have not quite connected and understood each other. It may be because they are not communicating effectively, but it may just be because they do not have the skill-set between them to deliver what is needed. Something comes in-between creative and traditional development.
WEBSITES ARE CHANGING AND SO MUST THE WEBSITE PROCESS
Scrolling banners just don't cut it anymore, website visitors are used to interactive, 'app-like' experiences. We all know that website users don't like waiting around and if the website does not load in a fraction of a second, it is thought to be slow or not working! There is no such thing as a standard browser width anymore too, tablets and mobile device views are growing every day and responsive web design has become a must. We, as designers and developers, have a lot to think about. I'll leave that there for another time and come back to the actual web design process. Showing the client what their website will look like in every resolution during the creative design phase is a tricky thing without going through a timely (and costly) creative exercise. It adds an additional layer of complexity to the 'sign off' stage and you can easily find yourself making unnecessary tweaks before approval that can easily be rectified during the build phase.
THE 3 CREATIVE WEB DESIGN PROCESS SOLUTIONS
Before the list I just want to say I am not going into wireframing or general research as this can be applied to any kind of design process, whether you are taking a creative or strategic marketing approach to a website design process. So, here we go:
1. DESIGNING STATIC WEBSITE MOCKUPS FOR VARIOUS RESOLUTIONS
Some design agencies show a concept in various resolutions from mobile, tablet, laptop and desktop. That is great, but how will the website actually 'work' and 'interact?' Sure, helpful for developers to understand how they need to adapt the site when building it, but it doesn't really help tackle interaction and overall UX. There is still a gap between the creative and development teams.
2. RESPONSIVE PROTOTYPING TOOLS
Becoming more popular in the design industry, especially for designers with little development resource, or design agencies who need to throw out a quick project, are tools that create responsive websites/prototypes without any actual coding. I can't say I have too much experience with these tools but have heard mixed results. It is on our list to have a play around with them and have the feeling they would be ok for a design process but realistically would need re-developing 'properly' once signed off. Would love to hear other designers' experiences in the comments with these tools.
3. THE SNOWFLAKE APPROACH: DESIGN IN BROWSER
It is not something that we can say only we do but, but it does seem to be quite rare. I was lucky enough to go to a recent Awwwards conference in Paris and spoke/listened to some of the world's leading web agencies and almost all of them adopt this approach. This was the first time I got confirmation they worked like this and was almost surprised they did not have a super powered way of doing things. But why wouldn't they? It does make sense.
SO WHAT DOES 'DESIGN IN BROWSER ACTUALLY MEAN?'
Rather than showing a static image or fancy digital mock-up of a concept in a shiny mac, the designer actually works and creates code in the browser. The designer is still using Adobe Illustrator and Photoshop (or whatever software is right for the job) to create design elements, but the focus is much more on CSS and Javascript work. This means we can show an animated, interactive and responsive concept.
IT'S NOT DEVELOPMENT
Well, it kind of is but not…umm, how do I explain this. The designer is not a developer, but they have the CSS, Javascript and UX knowledge to deliver a working concept. Once signed off, we optimise and re-do the majority of code. During concept stages the quality of code is not of the highest importance, the important part is showing a working, responsive website as it will appear once built properly. It may seem like unnecessary repetition of development, but once we got into the swing of it we found it did not actually take that much longer compared to a traditional, static approach. More importantly. We find revision requests are significantly reduced as things look much more impressive. You may have a great idea in your head, but unless the client is on your wave length and can use their imagination, this creative web design process is a big winner as far as we're concerned.
THE FUTURE OF THE WEB DESIGN PROCESS
Right now, we can't see our process changing. At least not until prototyping tools become more advanced. In up and coming posts I'll talk about our web build process including Grunt, Git, boilerplates and Sass/SCSS. Until then, I hope you find this post interesting and would love to hear what you think in the comments.