My website design

[Artelus]

I put in a bunch of hours trying to create a minimalistic website that expresses me while still looking decent. Looking for some criticism or suggestions on what I can do to improve it.

Artel

I was going for a style that reminded me of how people made personal webpages back then, i.e., pre 2005. But without the clutter and lack of contrast.

[Jon Tore]

Looks nice and clean! Have you tried putting it centered though? The size is good, but maybe people feel they have to lean a bit to the left? That's my first thought

[EternalOne]

I agree with Jon, if possible move the content more into the centre

[wstein]

1) Pink on gray is hard for me to read. Better design is to have colors with different intensities for easier reading.
2) Pretty boring, even within the ‘minimalism’ mandate it needs some design elements. Simple borders and areas on the page to divide the sections would be nice. Google has minimalism on its home page.
3) ‘Home’ links on daughter pages should be closer to the top. Otherwise as the pages get bigger, navigation will be increasingly difficult.
4) If you are intending any kind of commercial purpose for this site, then it needs graphics.
5) ‘Favorites’ more properly belongs on a separate page with a link in the top section near ‘Contact’ link.

Some personal feedback: it looks more like a Word document than a ‘web design’.

[Artelus]

Originally Posted by wstein

1) Pink on gray is hard for me to read. Better design is to have colors with different intensities for easier reading.
2) Pretty boring, even within the ‘minimalism’ mandate it needs some design elements. Simple borders and areas on the page to divide the sections would be nice. Google has minimalism on its home page.
3) ‘Home’ links on daughter pages should be closer to the top. Otherwise as the pages get bigger, navigation will be increasingly difficult.
4) If you are intending any kind of commercial purpose for this site, then it needs graphics.
5) ‘Favorites’ more properly belongs on a separate page with a link in the top section near ‘Contact’ link.

Some personal feedback: it looks more like a Word document than a ‘web design’.

You didn't read the part about how this is a personal website, rather than a commercial one. I agree, the navigation is a bit iffy, but that's what the back browser button is for. I'm going to move the navigation links below the logo though.

Perhaps calling my website a "design" is a little off. How about website layout? or theme?

I increased the contrast ratio of the links and the background by changing the color to orange. I'm not going to add any images or borders though, since plain text is what I was going for when I started coding the layout.

I also centered the elements. You guys are right, it looks a lot better this way.

And finally, I added a border. That should make it look less "boring."

[awaqas1]

Hi Artel,

Good job on the design, it looks pretty good, and it present information in a solid way, there is no distracting content that lots of newbie website designers try to go for.

I designed a wordpress theme for myself a while back and one this i realized was that setting the background to black and the body to dark gray made is hard to read for longer periods of time; so if you are going to write longer posts i would suggest a lighter background with darker text. Its just easier on the eyes, however if you are going to write short post which don't take long to read I think your current design is a great.

[glow]

Hello Artel! That is a good attempt. I like the general feel of this design.

You wanted criticism & suggestions, so here are some...

• Your website lacks focus & clarity.
  
• It looks cluttered. You need to use space(a.k.a. white-space) more smartly. Consider space like you consider the content of your website. Think of it like an important part of your page, because it is.
  
• Headings look more like separators then headings. Better spacing can solve that problem. Decrease the margin below for all sub-headings.
  
• I see some bad Alignments. The list items will look better if they are aligned with the headings. You may also use list-markers. But use negative spacing push them out. It will look better.
  
• Make Heading's hierarchy more obvious. You need to differentiate h1 & h2 more. Increase the size of h1 headings.
  
• This mono-spaced font isn't very readable. Try using a different font.
  
• You can improve the position of menu items. Move it to the top may be & float menu items to the right of your logo.
  
• Improve the contrast between text color & the background color.

You can improve your design greatly just by adjusting the spaces. The design looks boring because the spaces haven't been used well.
These are some general suggestions. I hope this helps.

[awaqas1]

Originally Posted by glow

You wanted criticism & suggestions, so here are some...

Hi glow i like your precise style of criticism very well noted

would you be willing to provide some feedback on my design aswell if possible.

Sorry Artel for posting this under your thread

[glow]

Originally Posted by awaqas1

Hi glow i like your precise style of criticism very well noted

would you be willing to provide some feedback on my design aswell if possible.

Sorry Artel for posting this under your thread

Hello Waqas. Sure.

I like the general feel of your website too. I like your simple & clean approach. But a lot can be improved. I'll give you some very actionable suggestions. I haven't explained much why I've suggested certain alterations. If you feel you need more explanation for something, feel free to ask.

• You could do with some more space too! Push the entire design down significantly. Also throw in some more space below your logo. The pages looks very suffocated at the top. Give your page some room to breathe. It will become more inviting & easier on eyes.
  
• Decrease the bottom margin a little for all the subheadings in your blog posts. The sub-headings relation to the proceeding content will become more visible.
  
• Don't use an About Page & an About link. Get that About description in the side bar for every page. It's a small paragraph, so it won't take much space. And on the top of it, you can put the heading "About me" or something similar. And find a way to group your values to this part too.
  
• Move the search box below the About description. And try to get it in one line. On my browser, it spans to two lines.
  
• The Date text below every blog post title is very hard to read. Choose another color for that piece of text. Perhaps a darker shade of blue, or gray.
  
• Your logo needs to be bigger. It almost the same size as your blog post title. In the Hierarchy of your page, it is the most important element of your webpage. Make it bigger!
  
• You need more space above & below your footer text.
  
• Use more paragraphs! A wall of text doesn't look very inviting.
  
• In your "latest posts" section, the longer post title should continue directly under the first letter of the title. It should not wrap around list-marker. Let me know if this bit isn't clear.
  
• Add options to share your website, and individual blog posts on social networks
  
• In your logo, the logo text & the tagline are exactly same! A different & more descriptive slogan will make more sense. Something like, "Grow & be More present while living your life." I got that from a sentence in your "About" page, but I'm sure you can come up with a better tagline.
  

These are some very simple suggestions that are more like corrections. I can't tell you if your design works like it should, or if it is exactly what you need without some research. I'm just giving you suggestions that will greatly improve your current design.

I hope this helps! Feel free to ask for clarifications.

[awaqas1]

Originally Posted by glow

I'm just giving you suggestions that will greatly improve your current design.

I agree with you 100%, its amazing what someone else can pick up with a fresh look, I did not even think about 80% of what you said because I was to preoccupied with thinking how elegantly I have worked the color and text.

I am really grateful for your feedback, and your willingness to connect as stated in your signature really shows through your genuine feedback

Thank you, with a big warm hug

[glow]

Originally Posted by awaqas1

I agree with you 100%, its amazing what someone else can pick up with a fresh look, I did not even think about 80% of what you said because I was to preoccupied with thinking how elegantly I have worked the color and text.

I am really grateful for your feedback, and your willingness to connect as stated in your signature really shows through your genuine feedback

Thank you, with a big warm hug

You are welcome!

Well, I am an interface & web designer so that helps when I critique a website!

I think there are two basic things that you are missing...

Try to think of your website in terms of user-expectations and design it around that. You'll come up with more ideas for improvements yourself using that paradigm. It's not about putting everything you have together as a single website.

And never underestimate blank spaces in your design. In fact, they are generally more important then the colors you choose. A space is absence of elements of your webpage. It's nothing. But it can do all sorts of stuff. Tell which elements are related, which are not, break the flow, indicate a pause, make something stand out, make something blend in, create balance & harmony, etc.

[Artelus]

It looks cluttered. You need to use space(a.k.a. white-space) more smartly. Consider space like you consider the content of your website. Think of it like an important part of your page, because it is.

I increased the line height slightly. I don't know if that's what you meant

I see some bad Alignments. The list items will look better if they are aligned with the headings. You may also use list-markers. But use negative spacing push them out. It will look better.

Can you elaborate on what you mean by this?

Improve the contrast between text color & the background color.

Increase or decrease it? I thought the contrast was pretty high enough since it's almost white on black.

[awaqas1]

Originally Posted by glow

You are welcome!

Well, I am an interface & web designer so that helps when I critique a website!

Try to think of your website in terms of user-expectations and design it around that.

And never underestimate blank spaces in your design.

Thanks for the intro :P

thinking in terms of user-expectations is a good paradigm change.

I also learned about negative space when i was learning some drawing and I see how the white spaces relate to the overall composition of the page, very useful tips.

Thanks, I think many people can develop their designs based on these 2 principles.

[glow]

Originally Posted by Artelus

I increased the line height slightly. I don't know if that's what you meant

No, I didn't mean that. Although line-height is part of it too. I mean that try to use space instead of relying on default values. You can start by decreasing bottom margin for all your sub-headings. Set it to zero. It will make an enormous difference on the feel of your page. Headings will feel connected to your content, and the page will appear clearer & more structured.
You can also add a little space after each group of definition lists.

Can you elaborate on what you mean by this?

What I mean is that don't indent definition list item for Bloggers, youtuber, etc. And you can use list-markers, but push them out so that text aligns with headings.

Increase or decrease it? I thought the contrast was pretty high enough since it's almost white on black.

It isn't. It's grey on darker grey.

Feel free to ask if anything's still unclear.

[glow]

Originally Posted by awaqas1

Thanks for the intro :P

thinking in terms of user-expectations is a good paradigm change.

I also learned about negative space when i was learning some drawing and I see how the white spaces relate to the overall composition of the page, very useful tips.

Thanks, I think many people can develop their designs based on these 2 principles.

Yeah, negative space is aka white-space.