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.
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.
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.
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...
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.
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.
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.
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.
With respect, I very strongly disagree with @JoeShmoe's opinion. I'm using the same font for a preview of my blog comments on my new site. Georgia is undoubtedly one of the best typefaces ever made for the screen.
I definitely appreciate the thoughts. As for myself I have no hard rules yet on fonts ( I am still just a baby in the artistic side of things). The font types that I am using now are an experiment in mixing sans and serif fonts, with the serif fonts in the headers. There seems to be a lot of sometimes very emotional opinions on font selection which can make it harder to figure out what a target audience would feel good about fontwise.
For example, with some exceptions I don't see much of a difference in legibility between many fonts. But there are obviously people that notice these things, even to the point of what appears to be pain for fonts that bother them. Is this just a blind spot for me, and if so, how do I correct it?
I'm sure certain font-sizes could be subjective. Just like with any development project, you have to test. Well, the same goes with type.
Go here: Cantarell. This was specifically designed to be on a HTC mobile phone. Take a look at the $ and @ glyph symbols. Now go down and view the lowercase glyphs. They look horribly pixelated from bad hinting. That's a poor quality font.
Go here: Apres. This was specifically designed for the Palm Pre. Much higher quality and profound manual hinting.
OK, I see more fuzziness/pixelation on Cantarell in the smaller font sizes, but not so much with Apres. Spacing between letters "appears" to be more consistant and tighter in Apres, though I notice that letter combinations like "ox", "ew" are also different somehow, perhaps closer together by a pixel like they are tucked together just a tiny bit more.
@Wahmaster, hey mate, looking good from where you started but there are several things I am not fan of.
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.
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.
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.
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.
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.
@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.
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 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. :)
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.
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
If you want simple then drop the 90's looking gradients and the textured background. Sidebar needs padding work.
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.
It's too busy now... Eliminate the gradients and radius, keep the box-shadow and background texture. It will look more modern and clean.
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.
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!
Oh and it is also a "responsive" design.
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.
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.
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!
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.
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.
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.
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.
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
Edit: You might want to change #fff in first part of the inset shadow to hex of your header background
Thanks!
I created a mixin with your shadow as a default but able to over-ride it.
Like this:
This is looking a lot better!
yeah, looks good
At this point I am wondering if I should move the search box up with the nav buttons. It could be part of the drop-down on smaller screens.
It would also make search easier to find on small screens instead of all the way at the bottom like it ends up now.
The text shadow on some of the Tag links is very dark and makes the text look fuzzy and hard to read.
Also, now that you have coloured the headers you might want to lighten up the blue.
Thanks!
I think this is much better. Now my brain is going a bunch of different directions thinking about whole new designs.
Site looks very nice, but IMHO serif fonts are not that great on the web, sans-serif's are much better (keep in mind, this is MY personal opinion ;))
With respect, I very strongly disagree with @JoeShmoe's opinion. I'm using the same font for a preview of my blog comments on my new site. Georgia is undoubtedly one of the best typefaces ever made for the screen.
I definitely appreciate the thoughts. As for myself I have no hard rules yet on fonts ( I am still just a baby in the artistic side of things). The font types that I am using now are an experiment in mixing sans and serif fonts, with the serif fonts in the headers. There seems to be a lot of sometimes very emotional opinions on font selection which can make it harder to figure out what a target audience would feel good about fontwise.
It depends how you use them on your site. What you should really focus on for your users is legibility.
OK, but is legibility subjective at some point?
For example, with some exceptions I don't see much of a difference in legibility between many fonts. But there are obviously people that notice these things, even to the point of what appears to be pain for fonts that bother them. Is this just a blind spot for me, and if so, how do I correct it?
I'm sure certain font-sizes could be subjective. Just like with any development project, you have to test. Well, the same goes with type.
Go here: Cantarell. This was specifically designed to be on a HTC mobile phone. Take a look at the
$and@glyph symbols. Now go down and view the lowercase glyphs. They look horribly pixelated from bad hinting. That's a poor quality font.Go here: Apres. This was specifically designed for the Palm Pre. Much higher quality and profound manual hinting.
OK, I see more fuzziness/pixelation on Cantarell in the smaller font sizes, but not so much with Apres. Spacing between letters "appears" to be more consistant and tighter in Apres, though I notice that letter combinations like "ox", "ew" are also different somehow, perhaps closer together by a pixel like they are tucked together just a tiny bit more.
The font-size is too small for me. I would try 16px as the base font. Make the line-height: 1.6. Tell me what you think?
Check out the link that Chris just posted as a 'Hot Link' about typography.
Your site is looking good...I believe some thoughts/ideas from the above 'Hot Link' will help you make it more beautiful!
Good Article, thanks! I may mess with fonts a bit, but for now I upped the font size.
People seem to under estimated the power of simplicity.But i must say just one word “OUTSTANDING”. Thanks for share this amazing article.
@Wahmaster, hey mate, looking good from where you started but there are several things I am not fan of.
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.
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.
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.
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
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.
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
@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!
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.
I think that it is nice but a bit 70's and maybe remove the text that says you are here
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 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
Wow, thanks, @knittingfrenzy18!
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!!
I agree with @htmlmainiac. I wouldn't worry about the breadcrumbs for SEO.