Disclaimer
I graduated as a technical design-assistant in media and communication in 2002. In 2009 I graduated as computer-scientist from at Beuth University with a thesis on pen- and touch-driven interaction designs. From 2009 till 2019 I worked in a great variety of (mostly) interesting and idealistic projects which were low on resources but had the need to create web designs. It is out of this experience and perspective the following process description can be understood best.
Web-Designs are not Screen-Designs.
As a web developer it happens that one is confronted with some bitmap documents representing the web design to be implemented. If the designer is very good and experienced, this is not a problem for frontend developers to work with.
But what people need to understand is: A web-design is the opposite of a bitmap, it's interactive, it's dimensions are fluid and its representations are manyfold. The user has full control with what device or tool she loads the web resource or what is the size of her desktop window. The design of webpages is rule-oriented design. What we create when designing webpages are rules for presenting content and not strict frames or fixed layouts like we may do in Destkop Publishing (DTP) tools. DTP and the Web Design are different worlds, don't be confused that people use the same graphic tools to design for both worlds, focus on the design decisions and articacts which make compose every good web design instead.
So, 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 through scope and input
- (b) define the various deliverables or outputs in advance each stage so you
- get what you really want
- can switch designers for any of the phases (but not in between phases)
In the following I propose and describe the web design as a process of shared idea development in four phases
- Sharing an understanding of what is to be designed
- Draft, sketch, work on width of your (design) ideas
- Communicate, share, iterate and decide
- Develop one or two designs deeper
- Deliver the final web design by delivering its elements (not in bitmaps)
If yo think you need a web design before you have developed a brand, just go with some name. If you want to go with real brand, it makes sense to first develop a clear identity of that brand (product and organization).
In any case: Respect that any design process needs to start with a shared understanding of what is to be designed. If you have no answers yet on who you are, what you want, what your value or service is. If you didn't do your homework before getting a designer, be prepared to find that out when you hire one. After that you can take an informed decision about if starting work a web design now is your next best shot.
Ok, let's go!
0. Sharing an understanding of what exactly is to be designed!
The design work can start if there's 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.
From my experience this requires at least a 1-4 hour Briefing (regularly more) or a couple of workshops in a relaxed, open and curious atmosphere, potentially with a group of involved people.
1. Drafting and sketching to build width of ideas
Input/Requirements
Define the minimal content of one full draft.
For some web designs, this may be, e.g.
- layouts for 3 different type of pages,
- 2-3 graphical highlight elements,
- and one comprehensible color schema/palette.
For lots of designers creating drafts (think of: creating design approaches) 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 design problem.
Output: Two or three full (as pre-defined) drafts as different approaches to the design challenge.
2. Communicating on design work: Share design decisions
Input/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 deisgn idea one of the design drafts represents.
Output/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 design ideas as full drafts are delivered because until know everything should've been cheap in regards to the investment of resources. After all, this step is just about developing and communication design ideas. No need for anything else then pen and paper and some sketches here.
I believe you shouldn't go ahead if not at least one of the design ideas drafted is worth to be developed. Then you better go back to step 1 or change designers because the goal is to develop a gret web design and get it done.
3. Optional: Develop one or two of the drafts
Input/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.
Output/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!
Input/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.
Output/Deliverables
Delivering a web design in a structured way helps not only to discuss certain parts of it but it also enables re-use and faciliates implemention.
Here is the structure in which I, as a designer and front-end developer would always want to get a detailed design idea for website delivered.
Most of the web designs I had to make design decisions regarding the following four components.
4.1 Color Palette / Color 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 Typography / Fonts and Whitespace
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.
My personal opinion on the minimal design decisions to be made on any good web-design
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
- (maybe) one or two graphical highlight elements (4.4).
Many different page layouts (4.3), especially in times in which every web design needs to be a web design (see Introduction) is nice to have but not strictly a requirement for a great and successful website.
TL;DR:
Prepare the design process through a great briefing in which you nail your message, identity, brand or cause and target audiences.
Define what a full draft is and order three full 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, depending on your resources, choose one or two of the drafts to be developed in 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.