Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Rashid Saadman Karim
Rashid Saadman Karim
6,073 Points
Posted by Rashid Saadman Karim
Rashid Saadman Karim
6,073 Points

First time portfolio(need constructive criticism)

After completing the "Smells Like Bakin' " project, I did a simple portfolio project using the knowledge I acquired.I have got a domain under my name and have hosted it here: http://rashidsaadman.com/

I know its not even perfect and maybe in many ways unprofessional.It will be really helpful for me if you guys out there can point me to what I should change in the website and what I can do to improve it. Started learning about flat and responsive design as I speak,so you can give me some tips on that also which I can incorporate here.

5 Answers

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Hello,

I like the Navigation's look and the hover style. Logo a little rough around edges in chrome. Love the colors. But there needs to be some kind of container to give a little more breathing room around the sides. Break up the text more so not too daunting to look at. Also the heading Font is too much for my liking. Good start.

Thanks Adam adamsackfield.co.uk

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Hover effects would be nice on the social icons too

Rashid Saadman Karim
Rashid Saadman Karim
6,073 Points
Rashid Saadman Karim
Rashid Saadman Karim
6,073 Points

Hi Adam, thanks for the suggestions. I think you are referring to the space between the sentences and the body container I guess as they are sticking with each other. Also hope to give some letter spacing. I will change the heading font into something more standard. About the hover effect,I totally forgot about it!Well,give one soon.

Thanks again.I liked your website by the way with the Darth Vader mask at the top. I was looking for the death star but couldn't find it :)

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

Hi Rashid:

Here are some things that stick out to me at first glance. The yellow is really bright, a little hard on the eyes. You might want to think about softening it just a little. Also, be considerate of white text on a light color, as there is little contrast, and it is difficult to read.

I would add some padding to the right and left of the body copy, so the text doesn't hit right to the edge. You also might considering toning down the black on the background from #000 (all the way black) to something less extreme such as #222 or #333. Most websites abstain from going all the way to #000, as that's really extreme.

Rashid Saadman Karim
Rashid Saadman Karim
6,073 Points
Rashid Saadman Karim
Rashid Saadman Karim
6,073 Points

Hello, I was thinking about the yellow color and it is a little bright I guess. I will change the color or soften it up and have more space between the sections so its not cluttered together. Thanks for the hint about the black color background. Will surely use that knowledge on this portfolio website as well as my next projects. :)

Gino Sciretta
Gino Sciretta
2,051 Points
Gino Sciretta
Gino Sciretta
2,051 Points

My recommendations would be plain and simple. I have no problem with using extreme colors. Some use it, and us em well.

My recommendations would be the following:

  • Padding and Margin are your friends. Having breathing space is a good thing, so make sure you use them, especially around the edges of your website.
  • Pick fonts that are actually readable, The title fonts are not readable, especially bolded.
  • Dont mix too many different fonts.(right now you have Lato, Lobster and Times new roman... for the little content you have)
  • Dont use font color that is barely readable on its own background. White on yellow is extremely difficult to read...
  • Whenever you add screenshots or pictures, ensure those pictures or the images depicted inside the picture are properly contained. Your second screenshot you can see a banner which was very weirdly mis-shaped.
Rashid Saadman Karim
Rashid Saadman Karim
6,073 Points
Rashid Saadman Karim
Rashid Saadman Karim
6,073 Points

Thanks Gino, I will keep these in mind. Seems using only one font will be best for my site. Also will fix the issue with the contrast.

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Hi Rashid, I made a screencast with my thoughts. There are some things that can be improved but I think it is a great start for one of your first sites after joining Treehouse.

Rashid Saadman Karim
Rashid Saadman Karim
6,073 Points
Rashid Saadman Karim
Rashid Saadman Karim
6,073 Points

Amazing screencast Tom, thanks a lot for making this :). About the container width you mentioned in the end, I am using a 1250px fixed width and made the website using the grid system. Should I try to make it responsive and work towards that or use a 960px grid system for now. The latter will mean I will need to re- calculate the width of all the divisions. Thanks again :)

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

I would go for making it responsive as that will be a valuable skill to learn (though changing it to work on a 960px grid would be quicker).

There is a build a responsive website course which takes the "Smells Like Bakin" site and goes through making it responsive. After following that I'm sure you could apply the same ideas to your own site (perhaps following along making the changes as you progress through the course).

The main concern is that if the site is fixed with then 1250px may not display well for some users with smaller screens. Desktop browsers would display it at the 1250px size with horizontal sidebars if it doesn't fit in the window/screen. Modern tablets/phones will generally show a zoomed out version of the whole site (unless you have a responsive site or have instructed them to do otherwise).

If you are not particularly familiar with HTML and CSS you may want to do the Deep Dives for those beforehand going on to the responsive course.

Rashid Saadman Karim
Rashid Saadman Karim
6,073 Points
Rashid Saadman Karim
Rashid Saadman Karim
6,073 Points

I will go for the HTML and CSS deep dives first. Then I guess I can ease my way into responsive web design.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points
  • Just say no to lobster.
  • Use a contrast checker
  • You might want to lighten your yellow
  • Work on your typography
  • Better hierarchy
  • tool tips for better user journeys
  • Move your email address to your contact section
  • larger screen shots in a light box

You might be interested in the design fundamental course here on Treehouse.

You also might want to check out the design school for developers by Tuts Plus which has some good stuff on typography, hierarchy & color.

Rashid Saadman Karim
Rashid Saadman Karim
6,073 Points
Rashid Saadman Karim
Rashid Saadman Karim
6,073 Points

Hello, thanks for the tips. I will also look into the design tutorials you mentioned which seems to be quite helpful. Hope to use those ideas in my upcoming projects. :)