Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

A Web Design Crash Course: From Developer to Developer

zen-of-programming.com

Post reply on HN
Print view View original

21–30 of 48 posts

Re: A Web Design Crash Course: From Developer to Developer

#21

Post by tiborsaas »

jordigh wrote: post #14

I have a question about web design from a complete idiot: how do you do it? I mean, really, from scratch, how is it done? I have heard that people used to design in a graphics program (Photoshop, Gimp) what the website should look like and then tried to translate that to CSS, html, and js, or maybe just to React these days. Is that how it's done? Right now when I want something to look a particular way, I go into a C…

How I do it:

0) Start with the content. Always design around the content and the target audience in mind

1) Starting on pen and paper, I sketch 5-10 layouts in a short amount if time then I try to evaluate them based on gut feelings. This is also a good time to experiment with alternatives, new ideas. Google "webdesign patterns" if you need solutions for a given problem

2) Sketch a black and white HTML+CSS version then try to add the appropriate paddings and margins.

3) I look for inspirations in web design galleries, pinterest, dribble, whatever I can find.

4) Pick a good font for display + text, good typography is key

5) Try to make something that approaches the websites you like, grab a color palette from http://coolors.co, images from https://unsplash.com

6) Iterate

This list is incredibly leaky, but more or less this is the process if I have to design something from scratch.

Re: A Web Design Crash Course: From Developer to Developer

#23

Post by news_to_me »

fabricexpert wrote: post #20
news_to_me wrote: post #16

Earlier quoted context omitted.

> Right now when I want something to look a particular way, I go into a CSS file, guess... This is what I used to do, before I started really getting into web design. Then I discovered Sketch, which really changed the way I think about it. When you design with CSS, you're also constantly struggling with responsiveness, HTML structure, and a bunch of little things that are sort of irrelevant to how it looks . Sketch (…

The problem with this approach is that you get nice screenshots that look great, but the implementation doesn't always match up. Sometimes that last 5-10% of the design that was so easy in Sketch is a complete pain to implement correctly, and it gets skipped. You end up with a half-baked implementation that doesn't look quite right.

That's fair, but if you're also a developer I think it's pretty easy to keep a "how hard would this be to implement?" in the back of your head. And of course, design/development is a process.

I'd argue that getting most of those development details mostly out of your head is well worth the creative freedom it affords.

Re: A Web Design Crash Course: From Developer to Developer

#24

Post by lokelow »

string wrote: post #10

As an actual person employed as a designer and developer, I find articles listing arbitrary design rules very strange indeed. This is like someone enforcing you to use a coding style before you've even learnt the basics of programming. All these rules will do is ensure you create a website that looks mostly like one designed by the person who has written the article. If you want to create a landing page for genericst…

As a back end developer that’s been slowly getting into web development, I find the article helpful because it informs me of some design decisions I should be thinking about. By no means do I expect the author’s opinion to always be correct, especially since the design should always be driven by the content and intended audience. But it helps to know I should think about serif vs sans serif, etc. and how it may impact the final product.

Re: A Web Design Crash Course: From Developer to Developer

#25

Post by aldoushuxley001 »

tiborsaas wrote: post #21
jordigh wrote: post #14

I have a question about web design from a complete idiot: how do you do it? I mean, really, from scratch, how is it done? I have heard that people used to design in a graphics program (Photoshop, Gimp) what the website should look like and then tried to translate that to CSS, html, and js, or maybe just to React these days. Is that how it's done? Right now when I want something to look a particular way, I go into a C…

How I do it: 0) Start with the content. Always design around the content and the target audience in mind 1) Starting on pen and paper, I sketch 5-10 layouts in a short amount if time then I try to evaluate them based on gut feelings. This is also a good time to experiment with alternatives, new ideas. Google "webdesign patterns" if you need solutions for a given problem 2) Sketch a black and white HTML+CSS version th…

Any recommendation of picking a good font for display? System fonts won't be sufficient you think? I guess there's not enough font-weights with system fonts

Re: A Web Design Crash Course: From Developer to Developer

#26

Post by d3sandoval »

aldoushuxley001 wrote: post #25
tiborsaas wrote: post #21

Earlier quoted context omitted.

How I do it: 0) Start with the content. Always design around the content and the target audience in mind 1) Starting on pen and paper, I sketch 5-10 layouts in a short amount if time then I try to evaluate them based on gut feelings. This is also a good time to experiment with alternatives, new ideas. Google "webdesign patterns" if you need solutions for a given problem 2) Sketch a black and white HTML+CSS version th…

Any recommendation of picking a good font for display? System fonts won't be sufficient you think? I guess there's not enough font-weights with system fonts

I highly recommend checking out this recent article from a list apart: https://alistapart.com/article/flexible-typesetting

As well as this continually-updated website: https://betterwebtype.com/web-typography-resources

Both give good high-level overviews of readability in digital typesetting and help with choosing the right fonts for the job

Re: A Web Design Crash Course: From Developer to Developer

#27

Post by vec »

tiborsaas wrote: post #21
jordigh wrote: post #14

I have a question about web design from a complete idiot: how do you do it? I mean, really, from scratch, how is it done? I have heard that people used to design in a graphics program (Photoshop, Gimp) what the website should look like and then tried to translate that to CSS, html, and js, or maybe just to React these days. Is that how it's done? Right now when I want something to look a particular way, I go into a C…

How I do it: 0) Start with the content. Always design around the content and the target audience in mind 1) Starting on pen and paper, I sketch 5-10 layouts in a short amount if time then I try to evaluate them based on gut feelings. This is also a good time to experiment with alternatives, new ideas. Google "webdesign patterns" if you need solutions for a given problem 2) Sketch a black and white HTML+CSS version th…

> Starting on pen and paper

This is really the secret. Pencil, pen, whiteboard, crayon, whatever. Anything that lets you rattle off half a dozen super low detail sketches in under a minute will work. It doesn't need to be pretty either. Just as long as it's enough to give you a feel for interacting with the page as a whole.

Once you have a good solid idea for how you ultimately want it to come together then you can move to a computer to drill down into the individual details, but for getting from zero to concept there's no substitute for analog tools.

Re: A Web Design Crash Course: From Developer to Developer

#28

Post by scns »

otterpro wrote: post #5

> Black text on a white background can cause eye strain because of too much contrast. I use dark greys for my content. Then, there is still a lot of contrast, but not as much as there would be with black text. Is there such thing as having too much contrast, in the context of text relative to its background color? I still feel that this blog's text needs more contrast, not less. Perhaps it's only me, but the gray tex…

jxnblk.com/grays

Just read it yesterday. Can recommend his other stuff too.

Re: A Web Design Crash Course: From Developer to Developer

#29

Post by kowdermeister »

aldoushuxley001 wrote: post #25
tiborsaas wrote: post #21

Earlier quoted context omitted.

How I do it: 0) Start with the content. Always design around the content and the target audience in mind 1) Starting on pen and paper, I sketch 5-10 layouts in a short amount if time then I try to evaluate them based on gut feelings. This is also a good time to experiment with alternatives, new ideas. Google "webdesign patterns" if you need solutions for a given problem 2) Sketch a black and white HTML+CSS version th…

Any recommendation of picking a good font for display? System fonts won't be sufficient you think? I guess there's not enough font-weights with system fonts

> System fonts won't be sufficient you think?

They are great and battle tested of course, but a good font is something that makes a good design stand out. I feel it's a 'hidden' component that many people can't articulate that they like it in a design. It totally depends on the project though :)

more on this: https://practicaltypography.com/system-fonts.html

The Typewolf blog is great:

https://www.typewolf.com/google-fonts

https://www.typewolf.com/blog/google-fonts-combinations

https://practicaltypography.com/font-recommendations.html

Re: A Web Design Crash Course: From Developer to Developer

#30

Post by string »

httpsterio wrote: post #19
string wrote: post #13

Earlier quoted context omitted.

I've totally mixed the order (in a rush, about to leave the office) but for example... > Sans-serif fonts are used for body text Serifs are most commonly used for body (perhaps this is a mistake on the authors part?), but all manner of typefaces can be used for body text dependent on their design and legibility. > The line-height is 1.5-2.0 I've been building websites, designing books and drawing type for a number of…

Sans serif fonts are more used on body fonts, because they're more legible on screens. On paper, it's the opposite. Text size plays an important part here, because the serifs in serif fonts makes the letters stand out better on a smaller font size and the serifs "guide" you to the next words, making the paragraphs flow better together. With HD screens and proper font rendering, sans serif fonts are generally faster a…

That's strange to hear, in my experience serif fonts are most definitely used more for body text (referring to paragraphs of text) on sites where legibility is a primary concern. Look at the websites of almost any well designed news outlet (Bloomberg, NYT, Guardian, Reuters, etc). I say this as someone who previously worked for a type foundry that has worked with major organisations on corporate type projects and now works as a web (and occasional book) designer/developer.
Post reply on HN