
Show HN: Web Design in 4 minutes - bbx
http://jgthms.com/web-design-in-4-minutes/
======
primigenus
This is a pretty nice demo of the process of turning a basic page into a
"design" (in the sense that applying positioning, spacing, contrast, and
things like typography is visual design - I might call it layout instead).

However, if you run Chrome's Accessibility Audit
([https://chrome.google.com/webstore/detail/accessibility-
deve...](https://chrome.google.com/webstore/detail/accessibility-
developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en)) on this page, you get
warnings about low contrast for 100+ elements and a link to
[https://github.com/GoogleChrome/accessibility-developer-
tool...](https://github.com/GoogleChrome/accessibility-developer-
tools/wiki/Audit-Rules#ax_color_01).

So although you claim black text is harsh on the eyes and gray is more
comfortable, it in fact is not - it just makes it harder to read. The very
first time you load the page and see black Times New Roman on a white
background is actually a better user experience for a larger number of people,
purely from the point of view of legibility.

Try having someone with less than stellar eyesight look at this page. Or
someone who's trying to read it on a smartphone outside in sunlight or with
the brightness of their screen set at less than maximum. Design isn't about
what looks nice, it's about what works well - pages that a portion of your
audience cannot read don't work well.

~~~
rtcoms
I will just post this link here :
[http://contrastrebellion.com/](http://contrastrebellion.com/) .

So that more people can spread word about how low contrast/less readable text
hinder accessiblity.

~~~
Osiris
Interesting. I have on gripe with that page is that the examples of bad
contrast say "NO CONTRAST" while the good examples say "HIGH CONTRAST". The
bad examples should be more accurately labeled "LOW CONTRAST".

~~~
Retr0spectrum
The definition of contrast is "a striking difference".

\- "No contrast" means that there is no striking difference.

\- "High contrast" means that the difference is highly striking.

I agree that "low contrast" also makes sense, but I still think "no contrast"
is a better fit.

~~~
suchow
Yours is _a_ definition of contrast, but not the one used in design or vision
science [1, 2], where contrast is defined as a difference in luminance or
color between regions of an image that makes objects and textures visible. If
an image has no contrast, it is a solid patch. If an image has low contrast,
the brightest or most colorful regions are not too different from the other
regions, as if seen through a dense fog. If an image has high contrast, the
brightest or most colorful regions are quite different from the other regions.

1\.
[https://en.wikipedia.org/wiki/Contrast_(vision)](https://en.wikipedia.org/wiki/Contrast_\(vision\))

2\. [https://www.smashingmagazine.com/2014/09/design-
principles-c...](https://www.smashingmagazine.com/2014/09/design-principles-
connecting-and-separating-elements-through-contrast-and-similarity/)

------
K0nserv
Lovely! Definitely like the style here and the focus on content first. Like
other people have said it's similar to Motherfucking Website[1], and a Better
Motherfucking Website[2]. I'll need to start including this when I link to
those two.

For my website[3] I'm really trying to keep weight on the wire down too so I
am opting to skip the custom font and header image. It's quite nice to have
10-15kb pages in the age of the web obesity crises[4]. A header image and a
custom font does have a big effect on how personal the content ends up though.

[1] - [http://motherfuckingwebsite.com/](http://motherfuckingwebsite.com/)

[2] -
[http://bettermotherfuckingwebsite.com/](http://bettermotherfuckingwebsite.com/)

[3] - [https://hugotunius.se](https://hugotunius.se)

[4] -
[http://idlewords.com/talks/website_obesity.htm](http://idlewords.com/talks/website_obesity.htm)

~~~
exolymph
You left out Best Motherfucking Website!
[https://bestmotherfucking.website/](https://bestmotherfucking.website/) (It's
my favorite.)

Also I really like your personal site. The design is beautiful.

~~~
K0nserv
Wasn't aware of that one, glad to see new ones keep cropping up. Thanks for
the kind words

------
kylemathews
I've been working on a related project — Typography.js that vastly simplifies
web design. It ships with 30 pre-built designs and I'm working on tools to
make it really simple to create custom typography themes in-browser.

CSS is a very low-level language for expressing design intent. It's great if
you want to set the background color but if you say: "I'd like to add white
space to my typography" — it could take dozens of recalculations + css changes
to test your idea.

Typography.js's goal is to create the most elegant/powerful API possible for
defining your site's typography and remove a lot of the tedium/difficulty
around experimenting with your design.

Would love feedback / help!

[https://github.com/kyleamathews/typography.js](https://github.com/kyleamathews/typography.js)
[http://kyleamathews.github.io/typography.js/](http://kyleamathews.github.io/typography.js/)

~~~
dengar007
This is incredible!

~~~
kylemathews
Thanks! Just a note, the design tools on the website are only 1/2 baked. Still
need to add support for manipulating remaining options + way to export your
designs.

That being said, the core engine is quite solid and the themes are ready to be
used.

------
virtualized
> Black text on a white background can be harsh on the eyes. Opting for a
> softer shade of black for body text makes the page more comfortable to read.

No, it doesn't. The low contrast text is definitely harder to read in direct
comparison with black. This is the point where I suspected that the page might
be a parody of modern web design. Unfortunately it seems to be serious.

The syntax highlighting is similarly awful and the grey background makes it
even worse.

~~~
Tloewald
Yeah I found this assertion pretty troubling too. The "black" on most displays
is already "soft" since even black pixels are leaking light. I've never read a
page in a book and thought "you know, this ink is too black, it's straining my
eyes".

~~~
NoGravitas
I've never thought the ink in a book was too black, but once in a while, I do
think the paper is too white. Usually actual paper is a lot more friendly than
#FFFFFF, though.

~~~
Tloewald
You should be able to turn down the brightness of a display to comfortable
viewing levels.

------
Cbeck527
Reminds me of a Motherfucking Website[1], and a Better Motherfucking
Website[2]

[1] - [http://motherfuckingwebsite.com/](http://motherfuckingwebsite.com/)

[2] -
[http://bettermotherfuckingwebsite.com/](http://bettermotherfuckingwebsite.com/)

~~~
exolymph
Don't forget Best Motherfucking Website!
[https://bestmotherfucking.website/](https://bestmotherfucking.website/) (It's
my favorite.)

------
tracker1
Please, do not specify "Arial" or "Helvetica" in your font-family... just use
"sans-serif" by itself... Just use sans-serif as your main fallback font after
specific web-font. This will use the browser default (often Arial in windows,
Helvetica on OSX) which is usually the best looking Helvetica-like font, or
the user's preference.

Yes, sometimes it's a different font, but usually a better looking default.
Helvetica looks hideous on windows, which is why it's often "Helvetica Neue",
Arial, sans-serif... that said, just use sans-serif unless you want a specific
font (with webfont option).

/rant

\-- edit to be less inflammatory.

~~~
Nadya
_> Gah... Do NOT specify "Arial" or "Helvetica" in your font-family... just
use "sans-serif" by itself... In windows this will be an Arial font, and in
OSX "Helvetica" and on other platforms the closest default alternative_

You aren't wrong - but this isn't exactly true. It will be the _browser
default font_ which the user can change themselves [0]. Which is even better!
For the small group that don't force their font choices by default yet change
their default font settings, it is better to use serif/sans-serif instead of
specifying a font family to respect the user's choices.

I force my font choices to be used _everywhere_ , so any CSS that specifies a
font-family is just mild bloat on the CSS file in the end. I understand people
like to take into consideration the font choices for their design, but it
really should be in the user's hands without having to jump through hoops.

[0] [http://i.imgur.com/HSocAdt.png](http://i.imgur.com/HSocAdt.png)

------
qznc
My litmus test for web design typography is mixing fonts. For coding-related
things especially mixing fixed-width with normal fonts. This page clearly
fails [0]. Not even the baseline aligns due to 2px bottom padding. Usually
only the x-height mismatches, which means "<code>x</code>" (fixed-width) does
not have same height as "x" in normal font (serif or sans-serif).

Here is a good example from my website [1]. Note how "use" and "mu" have the
same height. It is not perfect, but matching cap height as well is maybe
impossible without buying fonts.

[0] [https://imgur.com/a/Qs6dJ](https://imgur.com/a/Qs6dJ) [1]
[https://imgur.com/a/ij1uI](https://imgur.com/a/ij1uI)

------
drchiu
Sort of reminds me of what Bob Ross from the Joy of Painting does in a couple
of strokes... :)

------
achairapart
Good work!

This is when you design in the browser with the medium in mind.

Problem is when someone gives you a PSD made by someone who badly ripped off
someone else website with no idea about what the box model actually is, asking
you to make a 1:1 replica in the browser.

Oh, and of course it should work on mobile too!

------
int_handler
> Long lines of text can be hard to parse, and thus hard to read. Setting a
> limit of characters per line greatly enhances the readability and appeal of
> a wall of text.

I agree with this 100%.

What I don't understand is why many developers argue that this principle does
not apply to code and that we shouldn't have line length limits "because it's
not 1970 and we have large monitors." If long lines of prose is difficult to
parse, then long lines of code are even more cumbersome to parse, especially
when you are either 1) slowed down by having to scroll horizontally all the
time or 2) distracted by the awkward naive line wrapping done by the editor.

------
Procrastes
Interestingly, I can't reach the site because our corporate security software
(Sophos) categorizes this site as "Weapons." I suppose, in a sense, good
design can be a secret weapon... :/

------
webscalist
Can't go back. Usability points: -1

Why not make it into multiple web pages?

~~~
random28345
On the plus side, they didn't break the scrolling.

------
mattherman
Love it. One typo I noticed in the image section, "Graphics and icons can be
used either as ornaments to support your content, or _take actively part in
the message_ you want to convey".

------
cel1ne
A good framework to help you build response, accessible design with proven
typography: [http://tachyons.io/](http://tachyons.io/)

------
mknocker
Clear, quick and simple. It would be interesting to have such elegant
introduction for other topics. Well done !

------
TheAceOfHearts
I've wondered this for a while: does actually ever actually use those share
buttons at the end? I don't think I've ever seen anyone using em.

The way I see it... You can just share the URL. And if you're the type of
person that frequently shares content, presumably you'd use a browser plugin
of some sort, just so you can get a consistent experience across sites.

~~~
mjrbrennan
I think there's no harm in adding them, some people may use them even if they
are just a reminder to share. I think they should be kept fairly simple
though, no JS etc.

~~~
GrinningFool
I'd agree - except for the tracking behaviors that come with the most common
solutions - copy paste a line of js, or enable a plugin that has the same js,
etc.

Simple self hosted share links that were just links would be reasonable, but
it seems not many take that route.

------
juanuys
I've been trying to find some opinions on the "first rule", i.e. "Centering".

Phones and tablets are already a book-like viewport. Desktop browsers are a
different matter, for these presumed reasons:

\- most monitors in 2016 have lots of pixels along the X axis

\- most browsers are maximised or run in full-screen mode

Joe Designer also has lots of pixels and/or a maximised browser, hence
squashes content into a column.

Some do it wrong, which means some websites end up looking like a thin column
of text on your cinema display.

What I'm getting at is this: I run my desktop browsers already in a book-like
viewport (using Spectacle.app on Mac and XMonad on Arch Linux, or a simple
resize-with-trackpad when I don't) so I'm a few keystrokes away from having to
parse long lines of text. I don't really like it when website authors choose
my viewport width on my behalf.

Choosing your own typefaces and colours - fine. Layout? Not so much. What do
others think?

------
aban
Beautiful. Personally, I would've probably stopped at the "Custom font" step
(I don't really like header images and the share buttons) to keep it simple,
but hey that's just me.

Nice work!

------
johnm1019
Love this! Step by step explanation of how to do something which literally
shows rather than tells.

------
willemwijnans
Like the simplicity of this, also nice work on Marksheet.io!

------
SmellTheGlove
For a web noob like me, I thought this was pretty awesome. I'm trying to build
myself a website now, in 2016, when the last time I legitimately did it was
1999. This actually helped quite a bit with the way I think about it. Sure I'm
using a Bootstrap template, but this made me think about why things are the
way they are by default, and why I might want to consider some changes.

------
baliex
"What is the first thing you need to work on?" – Apparently the first thing is
to enable Javascript... not quite what I had in mind.

------
konschubert
The back button is broken. Also, not sure if changing the fragment identifier
is the right abstraction.

~~~
tantalor
While clever, there's a few problems with the navigation on this site.

1\. The back button doesn't undo the changes. Abstractly, clicking on a link
performs some navigation which the back button is supposed to reverse. That
doesn't work here.

2\. Fragment links don't work. [http://jgthms.com/web-design-
in-4-minutes/#centering](http://jgthms.com/web-design-in-4-minutes/#centering)
should take me to the 3rd step. Instead it just dumps me on the first step.

------
abglassman
His longer tutorial [http://marksheet.io](http://marksheet.io) is great, and
his CSS framework, [http://bulma.io](http://bulma.io), is also really handy.

~~~
soared
bulma.io looks similar to bulimia. But yes, great resources!

------
jyotiska
I have created a static site generator "minni" that powers my blog at -
[http://jyotiska.github.io/blog/](http://jyotiska.github.io/blog/). It is
super simple, has less than 10 CSS declarations and no JavaScript. I don't
really expect anyone else to use it since it was created according to my own
design preferences. Here is the link in case any one wants to take a peek -
[https://github.com/jyotiska/minni](https://github.com/jyotiska/minni)

~~~
qznc
Me too. Here is a snapshot:
[https://gist.github.com/qznc/6fbdc37ad33e6853911a](https://gist.github.com/qznc/6fbdc37ad33e6853911a)

I made my own due to some very unusual choices. For example, publishing a post
is done by adding a line to a collection file. Posts not in there are
considered drafts.

------
qwertyuiop924
MFW and BMFW did this better. Why? because most of the stuff this added over
BMFW is actively user hostile. Besides, I just want my freaking content to
look good, with minimal page load.

Don't add any unecessary weight. If your content (not SPA, not "web 2.0,"
CONTENT, the stuff that actually makes up most of the web) takes longer to
load than HN, you're doing it wrong. Thankfully, this site seems to understand
that.

As for colors, just leave them the user's default, set black on white, or use
Solarized or another high-contrast theme.

------
pitchups
Wonderful! For a moment at the start though, I wondered how such a poorly
designed page, could teach anything about web design. Then I clicked the first
link... :)

~~~
GrinningFool
By way of contrast, I first looked and thought holy crap, someone made a
clean, readable site!

------
Frank2312
FYI, in IE 11, only the header gets centered and not the whole body.

I'm not sure if this was intended or just a bug with IE though.

Nice intro to web design. I love the simple presentation.

~~~
addedlovely
Needs to add width: 100% to the max-width statement. Annoying nuance.

------
noisem4ker
>Providing space [...] around [...] your content can increase the appeal of
your page.

Just like black bars when the aspect ratio of a movie doesn't match that of my
monitor increase the appeal of said movie. I find margins on mobile pages a
complete waste of horizontal space. My device screen is only 6cm wide and
already surrounded by plenty of space in my field of vision. Why make it even
narrower?

------
DLA
Impressive work to say the least. Can't wait for the etcd integration. Bravo
for nice build instructions on you github page - if only more projects did
that. Love the choice of SQL and JS, and the native HTTP interface. And, for a
beta, the documentation and architecture information is solid as well. High
quality work. Keep going! And THANK YOU for releasing this to the world.

------
daveheq
"Times" font isn't "unstyled", it's styled to a newspaper, which I've found o
be easy to read in a newspaper and hard to read on a website, I don't know
why, but it has nothing to do with one being "styled" and another not; in
fact, serif is more "styled" because of the serifs.

~~~
mbrock
I think Times New Roman, if you just fix the line height and page width, can
be beautiful, legible, and familiar.

Random example: Frank Chimero's site renders with Times New Roman body text on
my Mac, since I don't have Minion Pro or Calluna which are prioritized before
Times in the stylesheet, and it looks lovely.

[http://www.frankchimero.com/writing/the-webs-
grain/](http://www.frankchimero.com/writing/the-webs-grain/)

------
TheMagicHorsey
That was beautiful. Thanks for sharing.

I wish there was a similar simple demo showing how to style mobile apps.

------
atoko
I'm a big fan of Bulma, and used it to get started on a project
[http://pokestop.help](http://pokestop.help)

Thanks for the write up, with CSS I never know where to start, this helps to
think about it.

------
reimertz
Ha, such a smart way of introducing web design for a novice. Nice work homie!

------
rralian
This is really well done, kudos! It actually feels a little like I'm learning
by doing here as the design firms up in place as I proceed. Very cool idea!

------
chm
Hi OP! These were the best spent 4 minutes of my day :) At first I was
confused but you really presented it well.

------
chejazi
Love it except when I came back here to upvote the navigation was totally
broken!

------
asp_net
Not perfect in every detail, but absolutely lovely. Well done!

------
skaplun
really great story telling.

Changing font color mid way was a mistake, it's breaking too many discreet
conventions, sfart with the grey and it will be much easier for the user.

------
tugberkk
This is very good, thanks and congrats.

------
muhammadusman
This is great! thank you for sharing!

------
dwenzek
Thanks. Nice, simple and useful !

------
gabrielcsapo
Very cool, nice job Jeremy!

------
JustSomeNobody
Nice.

But, wait! Where's all the javascript? Don't you need React?

------
daxro
Neat! Thanks!

------
Capira
Awesome Job!

------
ajroas
Awesome... nicely done.

------
rsyntax
Very well done! kudos

------
vanglen
nicely!

------
vegabook
Very nice, but I have to disagree on two points:

First using grey blocks for code, while widespread, in my opinion is a visual
interruption to reading flow. Indentation is preferable (and using the
courier/monospaced font).

Second sans-serif. I understand the history - serifs are delicate and look
clunky on <200 dpi screens. But as we move to widespread retina displays,
isn't the old lesson of typography, namely that serifs help legibility and
convey an image of "seriousness", about to make a comeback? Some will argue
about the legibility point, but even from a styling standpoint, aren't we
getting just a little bit tired of helvetica and its brethren everywhere?

------
cloudjacker
Web design in 1 minute:

Bootstrap template #581

Stripe

...

profit.

------
SonicSoul
um, nice but the title is misleading. It took me only 1 minutes. 40 seconds of
Times New Roman related profanities followed by 20 seconds of clicks :)

------
bttf
Cute.

------
ChicagoBoy11
Brilliant

