Typography & Web Design critisism

doiks14 · 11 Sep 2010 at 14:02

I am trying to make a website to add to my portfolio and to store my knowledge in for my own reference (not to mention for other people too.)

The website will basically be done in a modified Wordpress for CMS for quick development's sake and It's perfect for the job.

Anyways, here's the template that I have so far, I know It's still very much incomplete.
http://justanotherwebsitetest.atspace.com/index.html

I am not a very skilled web designer and especially rubbish in typography, but that probably goes without saying as I normally develop scripts and write code (I'm a Software Development Student). This is why I need a bit of advice from people who might want to use the website themselves

The goal of the website is have an appealing looking website and all the contents of the website easily readable and of course, very useful contents, but haven't got to that stage yet

Thanks in advance.

edit: Oh, and ignore the search button and text box, they're not done yet

CliffyBiro · 11 Sep 2010 at 14:16

The first thing that I noticed was that the text in the nav isn't centred vertically.

Just looking through the rest now.

mr.sly · 11 Sep 2010 at 14:19

First thing I noticed was the 1px letter-spacing, makes it look like all the letters are separate from each other.

doiks14 · 11 Sep 2010 at 14:32

skippi90 said:
The first thing that I noticed was that the text in the nav isn't centred vertically.

Just looking through the rest now.

Fixed.

mr.sly said:
First thing I noticed was the 1px letter-spacing, makes it look like all the letters are separate from each other.

Was just trying to consider the people who have high-res small monitors like 1080p 22'' who look at their screen from 3+ feet away.

Can anyone with this type of monitor still see it fine?

mr.sly · 11 Sep 2010 at 14:56

If you want to factor those users in, it would be better to increase the font size rather than the letter-spacing.

doiks14 · 11 Sep 2010 at 17:14

vaultingSlinky said:
Read some of the numerous resources on typography/design blogs, someone on here pointed me in the direction of establishing vertical rhythm which can have quite a visual impact.

You need to use a bit more whitespace between elements as it looks a bit cramped, I assume learning a grid system (google 960gs) helps with that (I have never used it though).

Your choice of giving the articles round edges seems rather percuilar given that the rest of the site is pretty 'blocky'. I think it would look better with rectangles rather than rounded rectangles!

Great input :eek:

I've read up on both vertical rythm and 960gs and it seems like they do a great job looking by the examples they show.

I will try and make a quick re-design tonight and update you tommorow hopefully, If I have the time.

I've never heard of any of these concepts in my life, but both concepts look very interesting, I just have to give them a try

As for the rounded edges, I just thought they're the one's that need to get your eyes attention, not sure if it does the job though, so I'll give both rounded corners and rectangular corners along with my redesign as well.

Thanks for the excellent input

doiks14 · 12 Sep 2010 at 00:05

Did a quick modification to it now.
http://justanotherwebsitetest.atspace.com/blocky/index.html

Xelene · 12 Sep 2010 at 12:07

Get rid of that slashdot colour. I'd suggest going heavier on the black & white & limiting the grey. Those gradiants and rounded corners look dated.

Pick a strong, bright colour and use it sparingly to pick out focal points.

Something like orange or blue

V4NT0M · 12 Sep 2010 at 13:12

I like the colour, I also like the general look, nice and simple, the only thing I'm not hot on is the rounded corners on the articles. It would make more sense to me for that part to be square too.

lemonade · 12 Sep 2010 at 14:33

i liked the rounded rectangle, thought it broke up the generally square shape of the site.

doiks14 · 12 Sep 2010 at 16:24

vaultingSlinky said:
Your nav is broken (forum displays below the other nav items) and put some space between your post-leftbg-container...?

Code:

margin: 0 0 15px 0;

http://justanotherwebsitetest.atspace.com/blocky-nav-fixed/
fixed, thanks for pointing that out.

People seem to have mixed feelings about the rounded corners, but I think I like it now as it is.

V4NT0M · 12 Sep 2010 at 22:09

I see you have changed to square corners at least for now, looks much better imo.

doiks14 · 13 Sep 2010 at 00:46

Skyfall said:
I see you have changed to square corners at least for now, looks much better imo.

I think so too, and because It's silver in colour, its still the one's that catches your eyes attention when you scroll down so I guess I've achieved what I wanted with them

Not to mention I think the typography improvement using vaultingSlinky's suggestion about reading up on vertical rhythm has improved the contents readability a lot more

doiks14 · 13 Sep 2010 at 02:33

vaultingSlinky said:
It seems webkit doesn't like your CSS in the same way firefox does...

I'll look into that tommorow. Looks as if the margin just got completely ignored.

edit: Just checked it out quickly, seems like it was showing it correctly, I made a mistake in CSS so cookie for you for spotting

Fixed now.

Sp00n · 13 Sep 2010 at 09:22

The 2nd site without the rounded corners looks much better and I prefer the gaps to it being bunched up.