How to make a Webdesign?
I am an amateur in webdesign, meaning I have never really learned and don't have much experience, but I certainly try to learn every day more about webdesign. I think I know which steps are required and necessary to create a complete design, so my question is if I am going the right direction with my considerations or am I overthinking webdesign?
11 Replies
I think in order to create a good design, you need to consider at least these things:
1. The overall tone. What is the goal of the website? What kind of feel do we want our users to have when they visit us. Are we going towards professional, playful, heavy, light, arousing, elegant - you name it.
I think this is the very first concern the team has to settle on, as it influences all other considerations and steps.
2. Layout system and layout rules
A layout system is a consideration on its own, without any actual design to consider yet. A layout must be flexible enough to flawlessly shift into different shapes when resizing the screen. Also you have to take all necessary data to be displayed into account. Everything needs a place. Also, if pages differ in content, which rules apply to the layout?
3. Color palette
A color palette should consist of at least 2 black tones, 2 white tones, 3 gray tones, a "success", "info", "warning" and "danger" color, a primary, secondary and tertiary color and 3 shades for each. Without agreeing on a fully featured color palette before development starts, colors will become inconsistent throughout the whole website.
4. Design system and rules
Usage of the colors, typography, borders (thickness, roundness), look of links, handling of images, look of shadows, etc.
5. Component library
In order to keep consistency, components (form elements, cards, badges, lists, tables...) should each have an individual template - if you can only define the look of components by looking at example pages, then consistency is lost already.
6. Design of sections
Individual design templates of the header, footer and other sections which reoccur on many pages
7. Full Design examples
And lastly multiple examples of complete pages, each with one for a mobile sized screen, tablet and desktop.
Its definitely not a top-to-bottom task list. The process is floating, but each step has to be made. Am I missing something? Or am I over complicating things? Or am I totally wrong?
1. Yes this is a critical point, and one that many people bypass, especially early on.
2. I dont' have any idea what this means, so I will say no
3. Color palette is super important, so tentative yes. However, there is no 'rule' that you need such specific numbers of blacks whites grays etc. I generally start with between 1-3 colors total, and various shades of them, and add more only as needed
4. Yes
5. No, this is not necessary in the design phase. But, once your design system is in place, this might be the first thing you work on
6. This probably fits with component development in number 5
7. Definitely no. Or at least, a no until you have a design system in place, and then you start making iterations of this to get to the final form. Basically you wouldn't do this until you finalize all your design decisions, and then it would be the last stage before coding
Layout as in deciding how structure, categorize and place your sections on the website. You want to make sure that each category of sub page has an according layout and that your layouts are consistent on pages with different content structures. You make rules for the layout that are easy to follow. For example, these are layouts:
oh that's definitely a No then
unless you are specifically focused on large team / large site projects, thats a lot of over engineering
In my experience, often enough it comes down to needing at least that many different colors and tones. At some point you need a gray tone. So you decide for a gray, name it
--darkgray and go on. Then, anytime later, your working on something where you require a darker gray, so you update your darkgray, but then you realize that the previous gray would work well for something different. And at some point you have --lightgray, --gray and maybe need a third gray which is lighter than --gray but darker than --lightgray and then you realize you should've decided for a palette of grays from the very beginning on
I dont really understand your opinion here. I mean, if you have no layout, how do you know how to even start with your html structure? How do you know where to put you navigation and other sections? Sure, header obv goes to the top, footer to the bottom, but thats also not always the case...are you designing corporate style websites? If so, there are only a few base 'layouts' that dictate 99% of what you see. They have minor variations and styles added to make them seem unique, but if you look only at the wireframe/scaffolding, they are usually one of those base designs. So, there isn't really a need for this, at this stage. I would put it together with components and full design examples at the end of the design phase when you are ready to create something to show to your clients or stakeholders
so you have 3 parts in design: 1. Discovery, 2 Definition, 3. Implementation
Discovery would encompass your first item (finding tone), and a lot of other things where you basically determine the scope of the project, and what pre-existing assets / colors / etc already exist from the client, and what the client wants and expects you to achieve for them (super critical).
If what they propose is possible, and within whatever budgetary restrictions exist, and you feel confident you can deliver something close to what they are expecting, then you at this point stop and make an agreement. If you are a freelancer, you set your price and get a contract in writing
If you are working for a company, you very carefully explain in writing exactly what you will do, and how long it will take, and then proceed if you get them to tell you to in writing
Definition is where you take the existing assets, and add all the additional assets you will want. So colors, fonts, border styles, theme, graphics, icons, and any other design elements you will need to complete the project. So 3 and 4 in your list, and all the other stuff I mentioned in this paragraph
when you have all that data, you create a style guide that is as brief as possible but covers all this information. Then you take that back to your client or manager, and go through the entire process again, of getting them to say 'yes' and them directing you to proceed on that path in writing
Only after doing that, then you can start doing design implementation, laying out headers and footers, and components, and general page layouts
At this point, you will have a good feel for the project, the client, or the stakeholder, and you can adjust how much babysitting you need to force them to do.
If you are all getting on and they seem to have bought in, you can do nearly the whole thing and present it at once, or if they are difficult (usually the case), frequently trying to add to yoru scope (usually the case), frequently changing their mind on what they think they actually want (usually the case), you can slow walk them through the process getting them to agree in writing at each step
In my experience in many areas including as a product designer, a visual artist, and a developer, this is the only way to get through a project without tons of backtracking or replicating work, or having unhappy clients because their expectations weren't managed
Thanks, that was very helpful
@ghostmonkey Have you also seen alternative processes of design creation? I am in a situation where we only get 3 - 4 example pages (xd/figma files), only for the desktop view and no more information. Just these few images, nothing else.
I am not sure how to handle this.
that's pretty common really, you just have to get used to it
basically, if they have given you only the desktop design, you just need to look at it, and imagine cutting it in half or down to a single column in each section
and if you can see pretty easily how it would do that, you are all good
but if they have made some craziness, then you will have to identify the parts that won't easily translate to responsive design *(like say 100 column tables for example), and then either come up with a solution to present, or task them with providing you that solution
but, if they have given you at least one page, you should be able to do a lot of the definition phase, since the fonts and colors and such will still remain consistent regardless of the layout
So you mean I can just do the definition phase myself then?
you always want to get as much info from the client, but some clients just wont' give you a lot to go on. You will often hear them say something like: "I'm not a designer" 'I don't know what I want, but I will know it when I see it', or "just make something cool". Just be aware, people like this will suddenly have very strong opinions about everything you show them once you start doing the work.
so in that case, it's unlikely you can change their mindset, so it's better to just charge them a lot more / add a lot more time to the project scope to cover that overhead
Yeah the problem is I am working on inhouse software and the designer is a coworker