Grow your CSS skills. Land your dream job.

opinion on simple design

  • # December 23, 2012 at 11:05 am

    @Wahmaster, hey mate, looking good from where you started but there are several things I am not fan of.

    1. That font type looks terrible in chrome,looks like it’s almost bolded and smudged all over. In IE10 and FF somewhat better, but the paragraph text still looks bold to me.

    2. Text shadow is maybe ok on a huge headings but in your case, in article heading and footer it just doesn’t look good. It takes away cleanliness and diminishes somewhat readability.

    3. Your section could use more L&R padding to increase white space between edges of the section and text to something like between 20 to 24px.

    4. Fonts. What’s wrong with just using standard web safe fonts like Verdana, Geneva, Tahoma, for your article headings and footers without text shadow, and Arial, sans-serif for article p content and set p and all h’s to font-weight 500. Just because there are all kinds of fancy fonts out there, very few of them translate to good UX or decent readability in all browsers and devices.

    Here’s what I kind of imagine I’d do just looking at your page

    html {
    font-size:100%;
    overflow-y:scroll;
    background-image: url(‘you-image.png’);
    background-attachment: fixed;
    }
    body {
    color: #333;
    font-family: sans-serif;
    font-style:normal;
    font-weight:normal;
    line-height: 1.8;
    }
    p, h1, h2, h3, h4, h5, h6 {
    font-weight:500;
    other necessary
    }
    p {
    font-size:1em;
    other necessary
    }
    article > header, article > footer {
    font-family:Verdana, Geneva, Tahoma, sans-serif
    }

    Edit: We have a tendency to overdo things and I am guilty of it myself at times. And that’s all stems from this: “The simplicity is most of the time the hardest to find” no matter what we engage in.

    # December 23, 2012 at 1:16 pm

    I’m not too keen on the inner shadow and outer shadow on the same elements. This is contradictory. Is it meant to be indented or above the page?

    Not really a fan of Myriad for web. Georgia would work well here. Have a look at font squirrel or google web fonts for a good selection of beautiful free typefaces.

    Also your padding is inconsistent. Look at the header for example, there is more padding on the left than on the right, almost no padding at the top. The left-aligned body text does not line up with the heading text.

    Just a few points there

    # December 26, 2012 at 2:49 pm

    @jurotek I do have to admit that the font I was playing with looked horrible in blocks of text though I kind of like it in the “logo”. I did not care for as much line height and font size as you recommend but I am starting to agree that a sans-serif font is better in this case. My guess is that a nice serif font would work better in a “classy” design for overall feel.

    My thinking on fonts is that they are a lot more powerful then I ever really imagined as a developer, which makes me think that using things like google fonts or other externally loaded fonts can be a very good thing when used correctly.

    As for the L/R padding in the section area I increased the padding screen for sizes above 768px to 2em but left it alone in the smaller sizes because I felt there was too much white space in the smaller screen sizes.

    @croydon86 I almost like the mixed inner/outer shadows. the overall feel that I am going for is above the page with the headers having the feel of a different material. I am just venturing out in design land and some of my initial thoughts may be a bit colorful/scary.

    I did even up the padding in the header and between the article header and the content.

    Thanks!

    # December 26, 2012 at 3:18 pm

    Majority of Google’s web fonts render poorly. There are better alternatives when it comes to quality if you’re willing to invest in them.

    # December 26, 2012 at 3:42 pm

    I think that it is nice but a bit 70’s and maybe remove the text that says you are here

    # December 26, 2012 at 3:47 pm

    Hey friend,

    It is quite the nice site. It has the functionality and beautiful content choices, as well as nice touches here and there. But, as most have said around here, it looks a little…well…boring and old.

    [Joshua Hibbert's website](http://joshnh.com) may be of inspiration to you. You can observe the very few [solid] colors he’s used and how plain it is, yet very very beautiful. :)

    Red

    # December 28, 2012 at 5:37 am

    Wow, thanks, @knittingfrenzy18!

    # December 28, 2012 at 4:27 pm

    Thanks @knittingfrenzy18

    I am already thinking about a new design using what I have learned from some of the great advice that has been given here!

    The next version should be less boring.

    @Htmlmaniac, I want to keep the breadcrumbs for SEO, but the static text can be changed and the whole thing hidden on the home page. That should do the trick.

    THANKS!!

    # December 29, 2012 at 12:13 am

    I agree with @htmlmainiac. I wouldn’t worry about the breadcrumbs for SEO.

Viewing 9 posts - 31 through 39 (of 39 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".