
A Web Design Crash Course: From Developer to Developer - aspit
https://zen-of-programming.com/design
======
jordigh
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/setu...](http://swcarpentry.github.io/python-novice-
inflammation/setup/)

~~~
tiborsaas
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](http://coolors.co), images from
[https://unsplash.com](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.

~~~
aldoushuxley001
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

~~~
d3sandoval
I highly recommend checking out this recent article from a list apart:
[https://alistapart.com/article/flexible-
typesetting](https://alistapart.com/article/flexible-typesetting)

As well as this continually-updated website: [https://betterwebtype.com/web-
typography-resources](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

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

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

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

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

~~~
vosper
> Look at the websites of almost any well designed news outlet

Is it possible that some of this is news-site-specific, due to their heritage
as print media, and an online design aesthetic that references (or harkens
back to) that?

~~~
string
Yes definitely, this is what I understood by the cultural effect httpsterio
was referring to. I still stand by my statement though, I've had far too many
meetings discussing this exact topic.

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

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

~~~
RobertRoberts
Negotiations and communication can help resolve these kinds of problems. (in
my experience)

The core motivator to start the discussion can be simply profit margin. I've
hit points where it's not profitable, and therefore gets cut from our
offerings. But if someone wants to pay extra, we can accommodate.

Is it possible that by changing the requirements/costs of the product you
would lose the account/business?

The way I started this discussion is with the phrase "web standards", and
these are cheaper to build towards. So "non-standard" systems cost extra to
support now. But this also meant I could lower my costs on some other work, so
it wasn't smoke and mirrors, it was legitimately easier and less time
consuming. (also, makes everyone happier to work on standards instead of
spending most of our time with hacks and debugging because reasons)

------
SOLVM
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-
We...](https://dribbble.com/shots/3585571-Creative-Design-Agency-
Website/attachments/800517)

Good luck!

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

------
otterpro
> 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
Here's more on that! [http://uxmovement.com/content/why-you-should-never-use-
pure-...](http://uxmovement.com/content/why-you-should-never-use-pure-black-
for-text-or-backgrounds/)

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

------
sequence7
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
Another similar resource:
[https://twitter.com/i/moments/879086180909764608](https://twitter.com/i/moments/879086180909764608)

------
ghostbrainalpha
The link has changed. This is the correct URL.

[https://zen-of-programming.com/design](https://zen-of-programming.com/design)

------
nickthemagicman
Does not exists.

~~~
aspit
Here's a crosspost if the original isn't working!
[https://dev.to/aspittel/a-web-design-crash-course-from-
one-n...](https://dev.to/aspittel/a-web-design-crash-course-from-one-non-
designer-to-another-2o2m)

