V
Vanseo Design
vanseodesign.com · Personal blog · on HN since 2011
Web designer writing tutorials on CSS, color, SVG, and visual design principles for web developers.
What HN saysHN commenters point to its articles on design basics such as text alignment when giving design advice to other posters.
27HN people shared it
9linked it in comments
19stories submitted
42story points
5 years agolast shared
2011people per year2026
Most-shared posts
- 1Style Precedence in CSS: Specificity, Inheritance, and the Cascade3 people · 4 points · first shared 2012 · discussion on HN
- 2Flat Design Done Wrong2 people · 2 points · first shared 2013 · discussion on HN
- 3Why Luminance Is the Key Component of Color2 people · 1 points · first shared 2014 · discussion on HN
- 4What Designers Should Know About Visual Perception and Memory1 people · 18 points · first shared 2011 · 1 comments on HN
- 5How Does Auto Positioning Work In CSS? - Vanseo Design1 people · 3 points · first shared 2013 · discussion on HN
- 6What I'd tell my younger self about web design1 people · 2 points · first shared 2014 · discussion on HN
- 73 Types of Breakpoints In Responsive Designs1 people · 2 points · first shared 2013 · 3 comments on HN
- 8The SVG Canvas, Coordinate System, and Viewport1 people · 2 points · first shared 2015 · discussion on HN
- 9The Hamburger Icon Debate1 people · 1 points · first shared 2016 · discussion on HN
- 10Is Everyone a Designer?1 people · 1 points · first shared 2014 · discussion on HN
- 11Your Most Important Typographic Choices1 people · 1 points · first shared 2013 · discussion on HN
- 12Is It Time To Change Our CSS Practices?1 people · 1 points · first shared 2012 · discussion on HN
- 13The HTML5 Document Outline1 people · 1 points · first shared 2015 · discussion on HN
- 14Eight Things I Learned Working On A Book1 people · 1 points · first shared 2011 · discussion on HN
- 15Workflows In A Responsive World: From Waterfall To Agile1 people · 1 points · first shared 2012 · discussion on HN
What HN people wrote when they linked it
danso · 2013-02-25
Thanks for replying...the 13px size is the main issue...i don't have great vision but I don't think any recent design guide would argue at 13 px is suitable in today's design standards.
One other metric is letters per line...guidelines recommend roughly 70 to 80 characters, because as lines get wider, it's harder to track which line you were on when your eyes go from the end to the beginning of the next line. It looks like your site is at around 100 characters despite it not having an extremely wide article body size.
Anyway, just my rant...this post on typography I've found to be useful: http://www.vanseodesign.com/web-design/typographic-choices/
As for what kind of project makes a developer, well, that's definitely open for discussion. I have no idea, but was just looking for a litmus test beyond just learning or being interested in code.
duaneb · 2012-05-22
I would have tried to rotate both of those handles. You want to know a great user interface that is universally understood?
PUSH: http://www.vanseodesign.com/blog/wp-content/uploads/2010/08/door-push-…
PULL: http://www.artfactory.com/images/Door-Handle-HH199.jpg
The door handle sacrifices usability for aesthetics.
ollysb · 2011-03-06
I'd recommend not using centered alignment for the text. You might appreciate this article on alignment: http://www.vanseodesign.com/web-design/design-basics-alignment/
mikepoint3 · 2014-08-15
As a grahic / fine artist that has moved into webDev (JS, java, grails) there is no short cut or easy answer to be an all in one coder / designer. You need the basics of graphic design first: COLOR, DOMINANCE, LAYOUT
COLOR: a good color palette will take any project up a notch
http://www.colourlovers.com/
http://www.colormatters.com/color-and-design/basic-color-theory
DESIGN STRUCTURE: much the same way you create Classes that can be extended, you can do some in design. There are Dominate objects in your code that you use to create other object.
----dominant, subdominant, subordinate Design
http://www.vanseodesign.com/web-design/dominance/
Also, if you create a dominate visual design feature, repeat that element(color / pattern / shape) else where on the site, to build consistency
Also for Page Layout, rules in Photography can be a great help. Looks that the Rules of 3rds
http://en.wikipedia.org/wiki/Rule_of_thirds
The most important part of creating anything is inspiration. Pinterest is great for looking at designs, picking what works for you and what doesn't.
You have to understand that all of your early stuff will look like crap. Much the same way we've all said "Wow, that code I wrote 6 months ago is a pile of junk. I'm surprised it's still working."
Alos, buy a sketch book and put it next to your bed. Draw before you go to sleep. Even if you just doodle.
Advanced Typography is not something I recommend right off the bat, as it can lean towards fine art at…
Raphmedia · 2015-03-24
I've got a bit of a lifehack about that.
The average use will look at a menu in a "F" pattern[1]. Try to imagine a big "F" over the menu, then pick something outside of it.
Try to stay clear of images too. If they require an image to sell you the product, there's a reason.
Avoid fancy descriptions and titles. Something called "Fried rice with chicken" will often be just as good and often in bigger quantity than "Le Coq au Vin du Chef". Foreign words and country of origin are a big red flag you are buying dreams and not quality + quantity food.
[1] http://www.vanseodesign.com/blog/wp-content/uploads/2011/02/writf-patt…
TL;DR: Pick the thing that looks good but "meh". Fancy restaurants have chefs that will make everything flavourful. The only reason it has a "meh" description is because the profit margin is lower.
avalaunch · 2013-09-10
I agree entirely with the OP. For a good color scheme, I suggest blue and white, with perhaps a touch of green. I imagine it's not a coincidence that these are also the colors used by escrow.com
For a little more information regarding color usage in web design:
http://www.vanseodesign.com/web-design/color-meaning/
manifoldgeo · 2022-04-20
There are a lot of answers here that suggest the colors have something to do with it. I think that is true, but no one has suggested what I think it is overall: the Gestalt Principles[0] in action.
The Gestalt Principles are from cognitive psychology, the part of psychology that deals, in part, with how we sense (eyes) and perceive (brain / mind) visual stimuli. Those principles are used a lot in interaction design, UX design, human-computer interaction, etc.
The specific Gestalt principle at work here is likely the "Figure / Ground" principle, also known as "background-foreground". Our brains are somewhat pre-wired to see things as either being in front or back of other things. There are some optical illusions that mess with our perception of foreground, e.g. Rubin's Vase[1].
The picture in question has the buildings in black, indicating they're silhouettes because the light source isn't hitting the walls directly. The blue of the background suggests some light coming from the night sky, illuminating things from the back. The brightly colored signs would provide their own light in the real-world context, and they have a high luminance value[2], i.e. high perceived value of lightness, as if giving off their own light.
To sum it up, it looks 3d because our brains have evolved in a three-dimensional world and have built-in functionality that helps us "fill in the blanks" in situations with incomplete information.
References:
[0]:…
uptown · 2012-12-24
Read this: http://www.vanseodesign.com/css/tables/
sgentle · 2011-09-05
This is really cool - I wish there was something like this happening near me.
I know it's impolite to say this, but I hope you understand it's coming from a good place: your website is awful. That may not seem important but a first impression like that nearly made me skip this post entirely when the only cost involved was reading it.
My suggestions:
1. Make the website look prettier. If you google for "free css templates" there's a site that has hundreds of them with the only requirement that you link back. They come with pre-made HTML that you just chop around as you see fit. Just looking a little different from the bland defaults stands for a lot.
2. Reorganise your visual hierarchy[1]. Your main page makes my eyes bounce all around the place because the different elements are fighting with each other for attention. MATHS JAM! SIGN UP! LOG IN! NEWS! - it can't all be important at once. If you look at something like the Business of Software front page[2], the order of importance is clearly name > when & where > price > register button > description. Different priorities are okay, but it's important to understand visual priority is a ratio, not a sum - adding 10 to everything leaves the values unchanged.
3. Multimedia = social proof. Back to the Business of Software page, there's a video halfway down that gives you a description of the conference. Why do that when it's already written out in more efficient text that you don't have to click anything to read? It's because…