Grow your CSS skills. Land your dream job.

opinion on simple design

  • # December 14, 2012 at 12:47 pm

    Greetings,
    I am looking for feedback on a very simple design that I put together for my personal blog.

    Constructive criticism is needed to take my design skills to the next level!

    The site is here http://soule.me

    # December 14, 2012 at 1:02 pm

    If you want simple then drop the 90’s looking gradients and the textured background. Sidebar needs padding work.

    # December 14, 2012 at 1:30 pm

    Well he may have used a somewhat harsh tone but yes, I would tone down the gradients.

    I don’t have a problem with the bg.

    # December 14, 2012 at 1:31 pm

    It’s too busy now… Eliminate the gradients and radius, keep the box-shadow and background texture. It will look more modern and clean.

    # December 14, 2012 at 1:37 pm

    Agree that the sidebar needs a little bit of padding at the bottom. As for the background i believe a dark pattern might look a little better with the gradient and logo that you have put on the site.

    # December 14, 2012 at 1:43 pm

    Bummer, I guess I am stuck in the 90s in some ways.

    I will see what I can do about the gradients. So the headers plain white with a divider of some sort or a solid color?

    I already added some padding to the bottom of the sidebar widgets.

    Thanks!

    # December 14, 2012 at 1:46 pm

    Oh and it is also a “responsive” design.

    # December 14, 2012 at 2:46 pm

    I would change the color of the links to something more in keeping with you color palette…perhaps a darker blue and make them bold to make them stand out

    I’d also restrict the underline to the hover state only.

    # December 14, 2012 at 4:46 pm

    Few things come to my mind and what i would do.
    Remove that huge belt buckle surrounding Simple Geek and that grey background from top right nav. Let it just sit on the canvas. Remove radius and box shadow from article and add bottom shadow. I like that textured background.

    .shadow-bottom {
    -moz-box-shadow: 0 7px 6px -6px #222;
    -webkit-box-shadow: 0 7px 6px -6px #222;
    box-shadow: 0 7px 6px -6px #222;
    }

    # December 14, 2012 at 5:39 pm

    OK, I am starting to see the thinking here.

    I really need to make a better logo. In my defense I was starting to learn Gimp when I made that.

    I cleaned and tightened up the articles. Still need to decide on an article header/footer background color if any.

    I removed the background, border, and radius for the top nav. Cleaned up the links by removing the text-decoration except when hover, bolded the links and changed the color.

    I will kill off a lot of the white space in the pages header when I redo the logo…

    Still happy to get more feedback!

    Thanks!

    # December 14, 2012 at 9:18 pm

    That gray color in article header does not match at all the bluish background. Try this matching color instead #7192A8 with off white text.
    Increase left and right padding in your section to at least 20px.

    # December 15, 2012 at 8:18 am

    Looking better. When you redo the logo keep in mind “simple”. I would also redesign the nav buttons and make them a one solid color.
    Also, the drop shadow on the search box does not match the rest of the site.
    Keep working at it, you will get there.

    # December 15, 2012 at 9:27 am

    I didn’t see the site with the gradients everyone mentioned. What I see now I really like. Very nice background texture, and the soft blue color scheme is relaxing and professional looking.

    I agree with springlab, that when you redo the logo, keep it clean and simple. Ditto to his suggestion about the nav buttons. I find that the site looks soothing and very attractive, but the logo looks out of place, breaking the overall harmonious mood. As do the nav buttons, but to a lesser extent.

    # December 15, 2012 at 1:42 pm

    Thanks!
    I fixed up the search box. My thinking was to make it stand out just a bit with the original shading and corner radius.

    As far as the nav buttons. I wanted to do something a bit different, but it is obvious that they don’t really fit now with the changes. Which leaves the question of what to do? I could do a nav bar with sprites next to the button text with a very subtle gradient or no gradient. It seems that I went way overboard, or gradients are out of style for most anything but buttons.

    Logo definitely needs work. While I love the shiny plastic blue look, it does not fit anymore.

    # December 15, 2012 at 2:33 pm

    Try to add this 3 sided inset shadow (left, top, right) to your article-header and add to that element margin-bottom:-4px and see what it looks like

    .shadow-inset-left-top-right {
    -moz-box-shadow: inset 0 -4px 0 0 #fff, inset 0 0 6px #333;
    -webkit-box-shadow: inset 0 -4px 0 0 #fff, inset 0 0 6px #333;
    box-shadow: inset 0 -4px 0 0 #fff, inset 0 0 6px #333;
    }

    Edit: You might want to change #fff in first part of the inset shadow to hex of your header background

Viewing 15 posts - 1 through 15 (of 39 total)

You must be logged in to reply to this topic.

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