A Web Design Crash Course: From Developer to Developer • Hacker News Board

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

#11

Post by neivin » Tue, Aug 21, 2018, 5:01 PM UTC

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 someone with no design background whatsoever, what rules do you disagree with and why?

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

#12

Post by Yhippa » Tue, Aug 21, 2018, 5:11 PM UTC

This is just my opinion but I find sans-serif harder to read for long pieces as opposed to serif. Lots of mix of fonts on this page. I have to run most of sites through outline.com to normalize readability.

Of all the MF websites my favorite is this one: http://bettermotherfuckingwebsite.com. It's got good readability like Ali alluded to while loading very fast. Very few colors so that you can focus on what matters most. I feel that unless changing fonts, colors, and sizes adds something legitimate to a user's understanding of the content, skip it.

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

#13

Post by string » Tue, Aug 21, 2018, 5:15 PM UTC

neivin wrote: post #11

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 someone with no design background whatsoever, what rules do you disagree with and why?

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 years. I've never used leading/line-height that large.

> body text isn't pure black on white

This is a huge myth imo.

> (backgrounds) Use a pattern or simple image

99% of the time use neither.

> A text shadow is used to make headings readable

I'd recommend this as a last resort generally, adjust the background first.

> Blocks of text are un-justified

Justified text can be fine in many circumstances.

> body text is 16-18px and is scalable

Totally dependent on the design of the rest of the page.

> There's padding between paragraphs

From a pure CSS standpoint, this should really be margins, not padding.

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

#14

Post by jordigh » Tue, Aug 21, 2018, 5:22 PM UTC

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 CSS file, guess at what a good value might be for a colour or a size or a font, reload the page in the browser, see how it looks, and iterate a few times. Sometimes I use the web browser's webdev tools to try to see the changes in these numbers a bit more live.

What is it that people actually do? How do you even begin to do something as crazy as CSS painting?

http://diana-adrianne.com/purecss-vignes/

I would love to see an intro to web design that starts like those intros to programming that begin with, this is how you install a text editor, this is how you use git, a programming language has variables and functions, and so forth, e.g.

http://swcarpentry.github.io/python-novice-inflammation/setu...

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

#15

Post by RobertRoberts » Tue, Aug 21, 2018, 5:27 PM UTC

debaserab2 wrote: post #9

Theodores wrote: post #8

I think that we still need some explaining to do when it comes to developer friendly website design. Truth is that, right now, in 2018, we can get rid of the hacks, libraries, polyfills and everything else needed to support old browsers. The old 'block layout' methods need to be forgotten and the new CSS grid method can be adopted by new developer/designers. Then this CSS grid needs to be specified with CSS variables…

> Truth is that, right now, in 2018, we can get rid of the hacks, libraries, polyfills and everything else needed to support old browsers Oh how I wish that was true

The way I have dealt with this issue for the past decade+ is to simply offer multiple tiered pricing for my clients.

By default, the lowest price is design that supports the most modern browsers. The older and more problematic the browser support required, the more it adds to the project cost.

This cuts out 99% of all the old browser support issues in my business. Very rarely does someone need more than "just ok" support for even IE 11 these days. And that isn't so bad even with css grid/flexbox.

Supporting old browsers isn't a technical problem, it's a time/cost problem.

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

#16

Post by news_to_me » Tue, Aug 21, 2018, 5:28 PM UTC

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…

> 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 (and similar apps) let you focus just on the look, which is great. Need a div with a background color? Stick a rect right there. It really helped me get into the flow of "designing" instead of "building".

(Also, this design blog really helped me get started, coming from a web developer's perspective: http://learnui.design/blog/)

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

#17

Post by Benjammer » Tue, Aug 21, 2018, 5:30 PM UTC

string wrote: post #13

neivin wrote: post #11

Earlier quoted context omitted.

As someone with no design background whatsoever, what rules do you disagree with and why?

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…

>padding between

I feel like this is a pretty terrible basic mistake to make in a web design article... Thinking of padding as something _between_ elements, as opposed to the space between an element's content and it's border seems like a really basic design 101 mistake.

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

#18

Post by debaserab2 » Tue, Aug 21, 2018, 5:36 PM UTC

RobertRoberts wrote: post #15

debaserab2 wrote: post #9

Earlier quoted context omitted.

> Truth is that, right now, in 2018, we can get rid of the hacks, libraries, polyfills and everything else needed to support old browsers Oh how I wish that was true

The way I have dealt with this issue for the past decade+ is to simply offer multiple tiered pricing for my clients. By default, the lowest price is design that supports the most modern browsers. The older and more problematic the browser support required, the more it adds to the project cost. This cuts out 99% of all the old browser support issues in my business. Very rarely does someone need more than "just ok" sup…

Yeah, it just depends on your audience. It's still a problem in B2B situations. Most notably when a customer's IT is contracted. Unfortunately for me it's not a matter of price tiering, it's about producing a product that has been working for customers in outdated browsers that continue to expect it to work that have signed annual+ contracts.

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

#19

Post by httpsterio » Tue, Aug 21, 2018, 5:53 PM UTC

string wrote: post #13

neivin wrote: post #11

Earlier quoted context omitted.

As someone with no design background whatsoever, what rules do you disagree with and why?

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 and easier to read. These are just some of my observations when doing A/B testing on a few products of ours and there's definitely also a cultural effect at play here. But the poster above isn't definitely in the wrong.

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

#20

Post by fabricexpert » Tue, Aug 21, 2018, 5:53 PM UTC

news_to_me wrote: post #16

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…

> 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.