8 ms·

A Web Design Crash Course: From Developer to Developer

224 points by aspit 8y ago

nickthemagicman 8y ago
Does not exists.
- firemancoder 8y ago
  Yep 404 to me too. Slashdotted perhaps?
- aspit 8y ago
  Here's a crosspost if the original isn't working! https://dev.to/aspittel/a-web-design-crash-course-from-one-non-designer-to-another-2o2m https://dev.to/aspittel/a-web-design-crash-course-from-one-n...
otterpro 8y ago
> 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 text used here is not contrasty enough for my eyes, at least on my monitor, and I find myself straining to read. My favorite blog design is https://paulstamatiou.com/ https://paulstamatiou.com/. It has just the right balance in contrast, and the text's spacing is perfect. I can read comfortably. I wish I could explain how it is more readable, but it just feels right. EDIT: It's probably just my personal preference. I do notice #333333 (gray) is probably the lightest gray that's acceptable for me. The blog is using #4a4a4a, which feels a little too light. Also, I find HN to be very readable (which uses absolute black text), and I'd rather have a black text with light background than a gray text on a white background.
- aspit 8y ago
  Here's more on that! http://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/ http://uxmovement.com/content/why-you-should-never-use-pure-...
  - megous 8y ago
    > White has 100% color brightness and black has 0% color brightness. There's no 100% black. People should stop with this nonsense. My monitor's black is pretty greyish by default. It gives nice illusion of blackness because it's also very bright with the whites, so contrast is high, but try comparing a black screen and turned off monitor screen. It's grey as hell. There's no standard screen. If people's eyes are offended by high contrast, they have a contrast knob on their monitor or video card. I really don't appretiate all those designers' concern for my eyes. It's really not called for. If I want less contrast I can move the virtual knobs on my monitor, and I'll get it set globally. Now the concerned designers just caused a double decrease in contrast on their websites compared to normal readable websites wich use #000 for body text, which is now much harder to correct compared to moving a stupid knob.
- scns 8y ago
  jxnblk.com/grays Just read it yesterday. Can recommend his other stuff too.
- notriddle 8y ago
  > Also, I find HN to be very readable (which uses absolute black text) On a background that is not absolute white. It's a matter of contrast, not black vs gray text specifically.
- systoll 8y ago
  It's an interaction between user preferences, equipment, configuration, and environment, and we don't really have the information to cut through all that. An HDR monitor displaying ~1000 nits on black in the dark room is great for film, but no-one would want to read text like that. On the other end of the scale, if you're out in the sun, trying to eek out as much time out of your iPhone as possible, you've probably set the brightness so that you can deal with black on white, but reducing it further would be unwanted. You can't know what your users are actually seeing, and even if you could, there's a layer of personal opinion on top of all that. IMO, the only reasonable assumption you can make is that most people have their devices set up so that they're happy with the OS itself -- and every mainstream OS [but especially iOS] uses a ton of #000 on #FFF.
ghostbrainalpha 8y ago
The link has changed. This is the correct URL. https://zen-of-programming.com/design https://zen-of-programming.com/design
Theodores 8y ago
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 for all the bits that change. Then media queries and vanilla javascript can be used to adapt to viewports and cater for interaction. There is not much too it unless you are writing a replacement for Excel in javascript for the web. But then you are writing an application and not designing a website of content. Then there is the truth about design. A lot of 'design' has been artistic flourish that does not need to be there. We kind of know where the search box goes and what icon it has, there is no need for that to be 'designed' by someone that can't code. This is particularly the case when the 'design' places the search box in the footer with an eyeglasses icon just because the 'designer' thought that they could add their artistic flourish in such a way. (This did happen circa 2010). The convention based UX that has won out over 'artistic flourishes' means that there is less to 'design'. Choosing fonts and colours is also a bit of a luxury, an existing brand will already have these things. If you were designing for Ford you have a good idea of what colour blue the headings and buttons will be coloured. Equally, if you are creating a site for just yourself then you can experiment with these things as you build out the content. Anyway, this 'web design crash course' hinted at some of the CSS goodness we have today, e.g. the use of CSS variables, but I am wanting more, a wholesale forgetting of the hacks and cruft with a simple way to do stuff effectively and in a maintainable way with the new CSS shiny.
- debaserab2 8y ago
  > 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
  - RobertRoberts 8y ago
    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.
string 8y ago
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 genericstarup.io, then maybe that's fine, but it's kind of like building a website by exclusively copy pasting tutorial snippets that you don't understand. I also disagree quite strongly with the rules laid out in this particular article, but that's another issue...
- neivin 8y ago
  As someone with no design background whatsoever, what rules do you disagree with and why?
  - string 8y ago
    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.
    - Benjammer 8y ago
      >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.
Yhippa 8y ago
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 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.
jordigh 8y ago
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/ 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/setup/ http://swcarpentry.github.io/python-novice-inflammation/setu...
- news_to_me 8y ago
  > 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/ http://learnui.design/blog/)
  - fabricexpert 8y ago
    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.
sequence7 8y ago
How come the title of the submission doesn't match the title of the post, is that intentional? Title of the actual linked article is 'A Web Design Crash Course: From one non-designer to another' which makes a lot more sense to me.
swah 8y ago
Another similar resource: https://twitter.com/i/moments/879086180909764608 https://twitter.com/i/moments/879086180909764608
SOLVM 8y ago
Great question. As with all this stuff it takes time. As I know that I can't cover this fully in a post I'd just like to suggest a couple tools to aid you in this process. For a design application, use Figma. LevelUpTuts has a great series on learning Figma. Then use CodePen as a scratch pad for the css/html programming part. You can even copy and hack other people's code to learn how they do it. I'd strongly suggest watching CSSGrid.io for learning css layout. CSS is a mix between layout and style. My biggest advice is to start by trying to code stuff that other's have already designed. I would recommend going to dribbble.com and searching for "websites" or "ui." This will give you a ton of designs that you can challenge yourself to make. Thus, the design work is done, you just need to practice the coding part. As a result, you will learn what looks good and how to make it. For example, try to make this with html and css. https://dribbble.com/shots/2982612-About-Eisley https://dribbble.com/shots/2982612-About-Eisley https://dribbble.com/shots/4566630-Article-preview https://dribbble.com/shots/4566630-Article-preview https://dribbble.com/shots/3585571-Creative-Design-Agency-Website/attachments/800517 https://dribbble.com/shots/3585571-Creative-Design-Agency-We... Good luck!

224 points by aspit 8y ago

nickthemagicman 8y ago

Does not exists.

firemancoder 8y ago
Yep 404 to me too. Slashdotted perhaps?
aspit 8y ago
Here's a crosspost if the original isn't working! https://dev.to/aspittel/a-web-design-crash-course-from-one-non-designer-to-another-2o2m https://dev.to/aspittel/a-web-design-crash-course-from-one-n...

otterpro 8y ago

> 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 text used here is not contrasty enough for my eyes, at least on my monitor, and I find myself straining to read. My favorite blog design is https://paulstamatiou.com/ https://paulstamatiou.com/. It has just the right balance in contrast, and the text's spacing is perfect. I can read comfortably. I wish I could explain how it is more readable, but it just feels right. EDIT: It's probably just my personal preference. I do notice #333333 (gray) is probably the lightest gray that's acceptable for me. The blog is using #4a4a4a, which feels a little too light. Also, I find HN to be very readable (which uses absolute black text), and I'd rather have a black text with light background than a gray text on a white background.

aspit 8y ago
Here's more on that! http://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/ http://uxmovement.com/content/why-you-should-never-use-pure-...
- megous 8y ago
  > White has 100% color brightness and black has 0% color brightness. There's no 100% black. People should stop with this nonsense. My monitor's black is pretty greyish by default. It gives nice illusion of blackness because it's also very bright with the whites, so contrast is high, but try comparing a black screen and turned off monitor screen. It's grey as hell. There's no standard screen. If people's eyes are offended by high contrast, they have a contrast knob on their monitor or video card. I really don't appretiate all those designers' concern for my eyes. It's really not called for. If I want less contrast I can move the virtual knobs on my monitor, and I'll get it set globally. Now the concerned designers just caused a double decrease in contrast on their websites compared to normal readable websites wich use #000 for body text, which is now much harder to correct compared to moving a stupid knob.
scns 8y ago
jxnblk.com/grays Just read it yesterday. Can recommend his other stuff too.
notriddle 8y ago
> Also, I find HN to be very readable (which uses absolute black text) On a background that is not absolute white. It's a matter of contrast, not black vs gray text specifically.
systoll 8y ago
It's an interaction between user preferences, equipment, configuration, and environment, and we don't really have the information to cut through all that. An HDR monitor displaying ~1000 nits on black in the dark room is great for film, but no-one would want to read text like that. On the other end of the scale, if you're out in the sun, trying to eek out as much time out of your iPhone as possible, you've probably set the brightness so that you can deal with black on white, but reducing it further would be unwanted. You can't know what your users are actually seeing, and even if you could, there's a layer of personal opinion on top of all that. IMO, the only reasonable assumption you can make is that most people have their devices set up so that they're happy with the OS itself -- and every mainstream OS [but especially iOS] uses a ton of #000 on #FFF.

ghostbrainalpha 8y ago

The link has changed. This is the correct URL. https://zen-of-programming.com/design https://zen-of-programming.com/design

Theodores 8y ago

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 for all the bits that change. Then media queries and vanilla javascript can be used to adapt to viewports and cater for interaction. There is not much too it unless you are writing a replacement for Excel in javascript for the web. But then you are writing an application and not designing a website of content. Then there is the truth about design. A lot of 'design' has been artistic flourish that does not need to be there. We kind of know where the search box goes and what icon it has, there is no need for that to be 'designed' by someone that can't code. This is particularly the case when the 'design' places the search box in the footer with an eyeglasses icon just because the 'designer' thought that they could add their artistic flourish in such a way. (This did happen circa 2010). The convention based UX that has won out over 'artistic flourishes' means that there is less to 'design'. Choosing fonts and colours is also a bit of a luxury, an existing brand will already have these things. If you were designing for Ford you have a good idea of what colour blue the headings and buttons will be coloured. Equally, if you are creating a site for just yourself then you can experiment with these things as you build out the content. Anyway, this 'web design crash course' hinted at some of the CSS goodness we have today, e.g. the use of CSS variables, but I am wanting more, a wholesale forgetting of the hacks and cruft with a simple way to do stuff effectively and in a maintainable way with the new CSS shiny.

debaserab2 8y ago
> 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
- RobertRoberts 8y ago
  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.

string 8y ago

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 genericstarup.io, then maybe that's fine, but it's kind of like building a website by exclusively copy pasting tutorial snippets that you don't understand. I also disagree quite strongly with the rules laid out in this particular article, but that's another issue...

neivin 8y ago
As someone with no design background whatsoever, what rules do you disagree with and why?
- string 8y ago
  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.
  - Benjammer 8y ago
    >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.

Yhippa 8y ago

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

jordigh 8y ago

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/ 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/setup/ http://swcarpentry.github.io/python-novice-inflammation/setu...

news_to_me 8y ago
> 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/ http://learnui.design/blog/)
- fabricexpert 8y ago
  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.

sequence7 8y ago

How come the title of the submission doesn't match the title of the post, is that intentional? Title of the actual linked article is 'A Web Design Crash Course: From one non-designer to another' which makes a lot more sense to me.

swah 8y ago

Another similar resource: https://twitter.com/i/moments/879086180909764608 https://twitter.com/i/moments/879086180909764608

SOLVM 8y ago

Great question. As with all this stuff it takes time. As I know that I can't cover this fully in a post I'd just like to suggest a couple tools to aid you in this process. For a design application, use Figma. LevelUpTuts has a great series on learning Figma. Then use CodePen as a scratch pad for the css/html programming part. You can even copy and hack other people's code to learn how they do it. I'd strongly suggest watching CSSGrid.io for learning css layout. CSS is a mix between layout and style. My biggest advice is to start by trying to code stuff that other's have already designed. I would recommend going to dribbble.com and searching for "websites" or "ui." This will give you a ton of designs that you can challenge yourself to make. Thus, the design work is done, you just need to practice the coding part. As a result, you will learn what looks good and how to make it. For example, try to make this with html and css. https://dribbble.com/shots/2982612-About-Eisley https://dribbble.com/shots/2982612-About-Eisley https://dribbble.com/shots/4566630-Article-preview https://dribbble.com/shots/4566630-Article-preview https://dribbble.com/shots/3585571-Creative-Design-Agency-Website/attachments/800517 https://dribbble.com/shots/3585571-Creative-Design-Agency-We... Good luck!