As a web developer, specifically as a Frontend developer, it happens at work that one is confronted with some bitmap documents representing the web design to be implemented. A web-design is the opposite of a bitmap, it’s interactive and it’s dimensions are fluid as the user has full control over her window-size / viewport.
If you’re a person interested in getting a custom web design made by a web designer, here are my recommendations for you on (a) how to structure the process and (b) define the various deliverables so you get what you really want.
Step 1: Working on Width, 2: Communicate/Share, Iterate and Decide, 3: Develop one or two designs deeper, 4: Deliver a web design in its elements.
Please note: If you only think you need a web design before having developed a corporate design or a clear visual identity for your brand, product or organization, please, please, pay the designer as a consultant first. Good designers are very, very good consultants regarding the message you want to communicate and a web design may or may not be the most effective solution to the problem you face.
In any case: Please respect that any design process needs a shared understanding of what is to be de designed. If you have no answers yet on who you are, what you want, what your value or service is, be prepared to find that out with a designer as a consultant first and then take the decision on creating a web design again.
Design Process
As outlined in the intro, the design work can only start if there’s at least a clear vision and shared understanding (between designer and the principal) on (1) what exactly it is that is to be designed and (2) whom the design should address. This requires at least either a 1-4 hour Briefing or a couple of workshops in a relaxed, open and curious atmosphere (and potentially in a working group).
1. Drafting and Sketching: Build Width
Requirements: Define the minimal content of one full draft. For a web design, this could be, e.g. 1.a) layouts for 3 different type of pages, 1.b) 2-3 graphical highlight elements, 1.c) and one comprehensible color schema/palette.
For lots of designers this is the most challenging, creative and fundamental step in each design work. For the principal (AuftragnehmerIn) it is also the potentially cheapest and fastest way to get hands on a few (visual, textual or conceptual) alternative approaches onto a single problem.
Deliverables: Three full drafts as different approaches to the design challenge.
2. Communicating on design work: Share design decisions
Requirements: 2-3 full drafts as different approaches to the design challenge.
Either you and your designers iterate here and go back to 1 or you’re all happy with the way the design is developed.
Deliverables: Either a decision on how many and which design drafts are to be refined and developed further or a decision to go back to step 1 and create 1 or 2 advanced, more and different drafts. This step of the process is at best iterated until satisfying or promising drafts are delivered as coming back later on, the costs for step 3 might be smoked up.
3. Optional: Develop one or two of the drafts
Requirements: One or two mood-boards (or an artifact similar in scope and thoroughness) so that people who, util now, have been outside of the design process get a really good overview of the design or its core design decisions.
A mood-board is a quick, visual artifact wich already tries to elaborate on some of the details of the design approach. It should be easy to understand and aimed at a broader audience (which was possibly not involved in one of the earlier steps) an immediate impression on the direction of the final design. This step as well as sharing and discussing its outcomes with others is heavily recommended if you e.g. need a broader backing on the final design.
Deliverables: Either a consent on which of the presented design drafts the designer should finalize and deliver or another draft. At best this consent is shared among most parties who want to have a say in the final appearance of the product, idea or brand.
4. Elements of a web design: Delivery!
Requirements: A fully-fledged draft or mood-board on which there is a shared consent among all parties that this is the design to be developed and delivered.
Deliverables: Delivering a web design in a structured way helps not only to discuss certain parts of it as well as to re-use or implement or apply elements of the final design in an easy way. Most of the web designs I had to deal with had anyway make design decisions regarding the following four elements. Minimally, from my perspective, a good web design needs only to contain the essentials: a color palette (4.1), specifications of the websites typography (4.2) and (4.4) one or two graphical highlight elements. Many different page layouts, especially in times in which every web design needs to be a web design (fluid, responsive, see-above) is nice to have but not a requirement for a great and successful website.
4.1 Color Palette / Schema
Create a dedicated SVG document concerned with a clear and unambiguous definition of the colors for a web developer in either RGBA or HEX-Code. Furthermore, the document could contain some ideas on the combination of the colors on a page.
4.2 Fonts / Typography
The font’s family, size, face/style including spacing should be delivered for at least all of the following elements of a web page:
Title, Subtitle, Floating Text, Hyperlinks (3 States), Menu Items, Buttons (4 States), 5 Basic Form/Input Elements.
Again, the statements in the document should be unambiguous for a reasonable concentrated recipient.
4.3 Page and Site Layouts
Document as the designer wishes, either on pen and paper or some digital tool. Just make sure all important spacings (e.g. paddings or margins) are unambiguous and included in the document you share.
4.4 Graphical Elements
Share all graphical elements in either the SVG, the pen Inkscape SVG, PNG or JPEG document format with the principal.
This is it. If you’ve managed to read the page until here you now know everything I find important when you order a web design at a third party.
TL;DR:
Prepare your designs a great briefing nailing your message, identity, brand or cause, Order 3 drafts concerning the 1 problem, communicate and share all decisions on the drafts in a bigger team, iterate the early steps but as soon as you like a design idea, choose 1 or 2, for step 3 and /or step 4.
Last but not least: Please pay designers fairly and for every hour, especially for those hours she or he is only concerned with helping you finding out what exactly you want or need to be designed.
Storyboard: Templates for interactive design-drafts
Sadly i am not quite sure from where I found the storyboard templates I use, so, actually I am most probably not allowed to share these files here on my site.
But I try to find out again. If you need any templates for your web-design drafts feel free to contact me per Email. Alternatively, check out this search on google (Attention: No license filter applied) or these downloads by Printable Paper.net.
I use just a small subset of possible templates for sketching responsive web designs and I would say, at minimum, if page or site layouts (4.3) are included in the drafts, each layout needs to be at least sketched for 5, better 7 different screen sizes: Desktop, Tablet (Vertical, Horizontal) and Smartphone (Vertical, Horizontal). Differentiating between bigger and smaller smartphone screens would additionally be a wise choice.
By the way: The whitespace on storyboard- templates is there on purpose and the purpose is to let designers describe the functionality or interactivity of the elements they created. Simply use a alphabetic or numeric reference to address the interactivity or different states of an element next to your sketch.