How do you create websites in terms of design?

Question

Layouts and prototypes

How I do it myself:
1 Browse websites with design materials
2 Save materials that I like
3 Start prototyping each block of the site on paper
4 Produce a single prototype on paper
5 Open Photoshop and start creating a layout.
6 Selecting fonts and choosing colors
7 "Done"
I'm not happy with this myself. What works well on paper looks very bad when finished.
I would like to know from other people who do this, what is your approach to business?

Answer 1

Design and prototyping must precede the discovery of Photoshop.
You can prototype both on paper and with the help of software.
Without setting goals, you will not be able to choose the right path. A prototype is a goal setting.
You must understand that the main thing is not beautiful, but convenient. Promo sites are an exception, but convenience should be present there too.
If you start working immediately with Photoshop, then you will redo the same elements 10 times, swapping them, etc. And you will spend much more time on the layout than if you had a prototype of the future layout on hand.

Answer 2

I take, I make a model - when there is inspiration.
And then I just run in the right moments.
I don't understand you: why photoshop? Really. There is not enough flexibility in FS. What is unattainable with the help of Flash is easy in HTML.
In addition, I immediately do what I want, and as a result, I immediately see that it will probably be inconvenient or ugly.
And in general, forget about the order of prototyping. Even a font (I'm not kidding) or a phrase (most often absurd) can inspire.

Answer 3

5, 1, 2, 6, 7.
I don't like it on paper just because there is a desire for the best.

Answer 4

1. and 2. similarly.
3. I draw the structure of the site in order to understand the amount of work, the number of page templates, I figure out which elements to use on the site pages.
4. I am preparing the concept of the site. Approximate design of the "Main" and "Typical internal" pages, that is, I arrange the elements, content, color scheme, fonts, headings, based on the brief filled in by the customer and the approved structure. I do this already on Webflow (mostly) or adobe muse, or in pindengo or something else like that, so that you can see how the elements interact with the user and with each other.
5. I make a live prototype of each page based on the data obtained at step 4, so it’s easier to prototype, since it’s already clear where, what and how to place, and the customer sees a “Live” layout with headings, photos and colors that you can poke at, usually satisfied. But this is not quite a prototype.
6. I "comb" and "finish" everything that I did in paragraph 5., I bring everything to the final version.
At the moment, the optimal scheme for me.
Photoshop and analogues in my work I use only for cutting content for the site.
For me, it's just a waste of time - first draw on "paper" in Photoshop and then typeset. Indeed, what is drawn well may not have the desired effect in the final digital version. Therefore, for myself, I decided - only interactive layout tools. And then it’s better for layout designers if you need to reverse layout and programmers feel good. And the customer as a result spends less money and nerves, as he sees the work directly in an interactive form.