How do you design a website?

Question

User interface

Hello dear designers!
I would like to ask you to tell a little about how you develop the design of the site from the moment you receive an agreement with the customer. There was an interesting post about layout, where the pros talked about how sites are typeset step by step. I would like to hear something similar about design. How do you create and agree with the customer TK (in case of its absence), where do you start, what tools do you use, what principles do you follow.
I am asking this question because in practice I have come across the realization that I do not have any system when developing a design, which suffers from productivity and work efficiency.
I would be very grateful if you share your experience.

Answer 1

1. At the first meeting, it is usually possible to find out only the area of ​​\u200b\u200bactivity and the vague outlines of how the customer imagines the result. Usually the customer shows a couple of sites from his industry that he likes. Together with him, we can make a couple of sketches on paper and make a list of “what should be on the site”.
2. The minimum sufficient result is to do better than competitors. Therefore, the second point is to study sites from this industry, take screenshots, remember good decisions to repeat, and bad decisions to avoid. At this stage, you usually learn a lot about the industry and there are a lot of questions for the customer that simply could not come to mind at the first meeting.
3. Next, you need to find out the answers to the questions from paragraph 2, and then you can estimate the time and cost.
4. I start drawing wireframes. In a graphics editor (I have Sketch) I create a new document, mark up a modular grid in it and start throwing content there.
At this stage, I only have a white background, black text in the default font (Open Sans) and 2-3 shades of gray for the buttons, rulers and boxes. No design, but a modular grid is strictly observed. I use only real content (given by the client) or fictional content (texts from other sites that could fit this site, or I come up with the text myself), but in no case “lorem ipsum” and not abstract text about anything. Since I am making a specific site on a given topic, and not a template, it is important that the texts are to the point, and the “fish” will interfere here: if there is nothing to write, you need to design, given that there is very little text; if there is a lot of text, it is necessary to split it into subheadings, dilute it with sidebars and illustrations. Part of the fictitious text will then be rewritten into a real one, using facts about the client, the rest will be removed as unnecessary.
5. I fill in the drawn pages in invision , put links between the pages, put comments on how it should work. Where the content is invented, a note that the text needs to be rewritten in the same vein. Where someone else's illustration is used, the comment "replace with a real one", etc. Wireframes are ready.
6. The customer sees a more formalized version, he gets specific comments, edits on texts and facts. One or two more iterations and wireframes turn into an agreed TOR - a clickable prototype with real content.
7. I start painting wireframes. The first page is about the company. It usually has several paragraphs of text, a couple of headings. First fonts: I choose the main font, size, line spacing. I choose Font-family only from free fonts, otherwise it may result in additional costs for the customer .
8. Based on the About page, I create a separate page with typography and complete all other text styles: headings, body text, lead-text, small-text, table text, lists, quotes and reviews, sidebars, link states in the text , - everything that was found in wireframes. Later, the states of buttons, input fields, tabs and other interface elements will be added to this page. I create dynamic styles from the elements of this page, which I then apply to all other parts of the wireframe.
In addition, on the page with typography, I mark the distances (margins) between elements: between headings and text, between sections of content. This helps not only the coder, but also me. A spacing cheat sheet helps to adhere to a common style on all pages, and the layout designer does not have to rack his brains later: is this a designer's mistake or an exception needs to be registered. An example of such a page
9. Applying styles to wireframes. I specify the vertical distances between the elements and the arrangement on the modular grid. I bring the layers and groups in order. If some element is repeated two or more times, I make a symbol out of it.
10. I draw all other elements. The wireframes smoothly transition into the final design.
11. If there are a lot of icons in the project, then I make a combined page for icons, and I insert the icons themselves as symbols on all other pages.
12. I fill in invision, I wait for comments from the customer, I make changes.
13. If there are no more edits, I create slices for exporting pictures, icons, etc. Again I put things in order in layers and groups. Invision automatically exports all slices to the assets folder. I export resources to usually @1x, @2X and svg.
14. If the coder is on Windows, I upload the source to https://zeplin.io/ - there you can see the font settings, sizes and distances between elements through the browser.
--
All this is an ideal algorithm. In practice, some steps are missing, some are reversed or run in parallel. Since I often typeset my designs myself, I don’t put things in order in the layers, I do export as I type, and sometimes I don’t finish the design at all - when the idea is fully formed in my head, it’s faster to typeset and finalize in the browser than to draw and typeset.

Answer 2

TK is outdated and unnecessary crap.
1. In communication with the customer, take notes in any form.
2. Using the tool for creating Wirefames ( one , two ), create a concept for all pages of the site. The more details the better.
3. Coordinate this concept with the customer (if desired, it can be signed as an annex to the contract)
4. Create a couple of color schemes, coordinate. You can even throw the same frame in the right colors.
5. Actually draw the design itself strictly in frames.

Answer 3

Start with an interview with the customer. More on the situation.

Answer 4

There is no general formula for success :) Try, learn, break more firewood, so that it would be easier in the future :)