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

Elle Kasser
Elle Kasser
4,605 Points
Posted by Elle Kasser
Elle Kasser
4,605 Points

How to decide/choose sizes of page elements, pictures?

I'm making my first webpage and I feel the pressure just crushing me..

How do I decide on the sizes of the images etc to make it all look nice and coherent?

For now my plan is to just take the pictures I'm going to use and resize them in PS.

Should I just check out the picture sizes of other websites to see if I can find what I need?

Are there any simple guidelines to follow when deciding?

2 Answers

Leanne Thng
Leanne Thng
13,824 Points

Using inspiration is a really good idea. I love http://www.siteinspire.com and you could use a site that inspires you as a base.

Also worth noting that it can be useful to sketch out your ideas on paper or if you use photoshop/illustrator you could start getting a feel for the layout and design in that before diving into styling it in code. It can make it easier to see bigger picture and also the components you need to build.

Charles Smith
Charles Smith
7,575 Points
Charles Smith
Charles Smith
7,575 Points

Alright, deep breath :)

First, one big thing that's currently a good practice is responsive, mobile first design. If you don't know what this is, it's basically the idea that the page scales to fit the device you're on.

If you're follow responsive design, you're probably going to have your images sized dynamically by CSS. Take your imgs and put them in a div, and then give then in the CSS style it something like "img { width: 100% }". Or smaller if you want.

Now, for sizes and what looks good. If you're just starting off I would follow the old "good artists copy, great artists steal" quote. Find a similar site and take the basic design elements from that.

If none of that made sense, you might want to watch the How to build a website course from Nick Pettit. It's fairly simple, and the project includes building a simple gallery.

Elle Kasser
Elle Kasser
4,605 Points
Elle Kasser
Elle Kasser
4,605 Points

Thank you for your answer! I've completed the how to make a website course and css basics as well. I tried modifying the picture sizes with css (max-width), that did not work (I used large images, thinking I could make them smaller with css).

I'm referring to the 'css basics' workspace, checking things out and will open up the 'how to build a website' one as well.

I think the hardest part is seeing the big picture and what fits with what (design-wise), that's what stresses me out. I want to deliver something that looks professional, but am worried about failing.. :)