Where and how to learn web design as a programmer?

Question

HTML

Hello.

I can say that I am more or less a beginner programmer, I write in Ruby. And, although almost all of my activity is tied to a Ruby-on-Rails environment, I spend most of my time at work doing some kind of optimization, writing logic, i.e. I practically don’t deal with the front-end part (this is partly due to the specifics of the project).

But quite often I am visited by rather strange thoughts, and they concern the fact that I cannot become a full-fledged web programmer without the ability to make a site from scratch. And everything rests here on the almost complete lack of layout and web design skills (I can get a little confused in terminology and call things by other names, don't blame me). I'm not talking about some complex sites, Photoshop layouts, etc. Even the usual one-page for some project, riveted over the weekend to master the technology, makes me feel lost and completely hopeless.

At the same time, I cope quite well with the tasks of editing something, after all, I know html, css and js at some basic level, but to do it from scratch ... it’s just a tragedy.

I'm not even sure if this can be grafted in any way, I just see that some just novice programmers rivet pages with a rather interesting design, and it becomes a little uncomfortable. In addition, for example, such a direction as freelancing (sometimes you want to try at least out of curiosity) is practically crossed out by the inability to make a project from start to finish, and this often means some kind of minimal design.

If at least one person has read up to this point, maybe you will advise some lessons, screencasts, something else to learn how to make minimal page designs. Understand some concepts, patterns, principles. If it is still with a focus on people already familiar with the field, generally excellent.

As you may have understood, I don't need an html tutorial or anything like that. It's just that now there really are a lot of creative and interesting materials on various topics, suddenly something of them meets my requirements.

In general, thanks for the answers.

Answer 1

I’m not a designer at all, I’m just a freelance programmer and I had the same problem about five years ago
. I divided the “design” of the site into three phases for myself:
1 come up with something like a concept or a general picture of what will happen and where, what blocks, which pages
2 to detail the concept to page layouts - often comes to the programmer in the form of pictures
3 to figure out how it will be typeset and do it, that is, finish it up to the state as in the picture in paragraph 2
I can’t advise much about the first one - it’s like “solving a problem” - there are some algorithms, but they all boil down to decomposition: first, we formulate a general idea, for example, “bullshit store” or “blog about beauty”. Then we slowly determine what this idea can consist of - the store needs lists of goods that need to be seen, searched and sorted, goods need to be bought. Then we divide each of the components to elements that are understandable. We turn all this into some blocks on the page (s). Hanging out, throwing out something, adding something. The output is something called a sketch or sketch.
The second is purely the skill of working with images and tools for working with them. Plus fantasy and talent to "make it beautiful." I have no talent, my imagination is also lame in this regard, so I either make some kind of rectangles, or peep the details on other sites. I can work with images, but I don’t like this business, so I’m looking for sets of images, if necessary, but it’s better without them at all - minimalism is our everything
The third in general is called layout. For good, this should again be done by the designer, at least to understand how his design will look, but their hands and head are not sharpened in this direction, and as a rule they have to be redone. On the other hand, the layout is done in declarative languages, and an ordinary programmer also needs to turn his mind a little in order to think in ready-made blocks and their interaction. The skill of working in functional languages ​​or regexps helps a little here, yeah.
And there is a big difference between creating a layout from scratch and redoing or fixing it. I don't know why, but it's much more than the difference between starting code from scratch vs editing code. Maybe the fact is that there are a lot more options in layout, maybe my thinking is still turned by the hip.
How to learn? as always - to do, try and disassemble what is wrong and why. For starters, I did all sorts of garbage. Then I looked and redid it. And again and again. My home page had something like 20 options. And some of them I have converted. The latter has been holding on for a couple of years, but I already want to change something, but the concept of what and what to change has not yet been formulated.
I can't recommend books and courses because they don't work for me. Rarely do you come across a book that is worth the time spent on it. And courses ... in general, too. In general, I try to extract knowledge from what comes across - I saw the site - look at the code, but the “dishes” prepared for consumption are disappointing.

Answer 2

Twitter Bootstrap.

Answer 3

If you need a design (and with English ok), then check out these tutorials psd.tutsplus.com/category/tutorials/interface-tutorials/
There is how to create both buttons and pages.
Come up with a simple test project for yourself, draw it on paper (where is the logo, where is the menu, where is the content), redraw it in Photoshop / Gimp as best you can, make it up.

Answer 4

With the basics of design, Dmitry Kirsanov's book "Web Design" helped me to get used to it at the time.

Answer 5

Start with a basic project for yourself by looking at bemclub.in/ , chikuyonok.ru/2010/01/liquid-site-markup/ , habrahabr.ru/blogs/webdev/77179/ , vitaly.ya.ru/replies.xml? item_no=5778 etc.

Answer 6

I have a similar problem now. I also don't really need "how to do" instructions, but rather "what to do" knowledge.
Since what and how are almost inseparable, I proceeded as follows:

• I took the style from the html5 css tutorial ,
• inside there were many links, one of which was to a book on typography,
• the links from the bobuk blog on the corresponding tags seemed very interesting to me ,
• since this is not enough, I am again in search. :)

In general, of course, you can use ready-made solutions, like bootstrap, but this is a rather complex and complex solution. My goal is to get a completely flexible solution under my control.

Answer 7

I have the same problem, but I'm a front-end developer, working from ready-made design layouts. There is a small nuance here - since I know the whole “kitchen” of translating the drawn layout into an interactive layout, when drawing myself, I will involuntarily simplify some elements that are difficult to layout. The designer, on the other hand, does not know the layout and does not know the pitfalls, so he will not limit himself in visual fantasy!
Agree with the above example on psd.tutsplus.com, watch, study modern design trends, element libraries: creattica.com, smashingmagazine.com, "google: web-design inspiration"

Answer 8

Author, don't bother.
Firstly, there is an opinion that either technical (mathematics, programming) or humanitarian (including drawing, design) is closer to a person. There are exceptions, as usual, but they are few.
Secondly, the developed Western world is highly specialized. It is in the wild post-Soviet space that multi-armed shivas are valued

Answer 9

Tutorials on Codecademy .

Answer 10

Don't go crazy right now, within 70-80 bucks, it's quite possible to find sane designs on the same templatemonsters. There is a lot of slag there, but there are interesting things for you to cut and cut to. Believe me, in terms of labor costs, setting up all these little things is the most dreary of the frontend. And so I bought a template - cut it in Photoshop (if psd) and voila - the best designer in the village :)

Answer 11

You are an interesting person, you want everything, just like that and with fat and so that they do it for you, don’t ask stupid questions, just practice, I can also ask, I’m not an astronaut, how to become one?
Do it, but there will be problems ask questions here!

Answer 12

You can just buy a ready-made unique template for $ 20 , change it as you like, do whatever you want with it. (This is one of the options)

Answer 13

meanwhile in a parallel universe: https://news.ycombinator.com/item?id=8182084