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

Design colors

Hello, what do you thiink about the colors and the design? the background etc? any ideas how could i change the colors so it looks nice?

http://scr.hu/2icp/dittd

5 Answers

Wayne Priestley
Wayne Priestley
19,579 Points

Those colours look a lot better than before Aurelian.

Here is a website to help you choose the right colours that go together.

color template

John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

Thumbs up for the link.. never seen that site Wayne, but its just made my bookmarks bar.

Thanks :P

Wayne, thank you for the site. I never clicked the link until now. In my bookmarks for good!

John Steer-Fowler
PLUS
John Steer-Fowler
Courses Plus Student 11,734 Points

Hey Aurelian Spodarec

A few simple adjustments that might help slightly.

  • Firstly, try making the white header section full-width and see if it looks any better. Experiment a bit more with the header.
  • I would also drop the side-nav (Search a Car) down a few pixels to align with the bottom of the white header. Once this is done, drop the logo down a few pixels to compensate.
  • Maybe add a horizontal nav bar under the header and above the side-nav? Or add a few more elements to the side-nav
  • Change the color of the side-nav from grey to something like very pale green to match your other primary colors.

Other members will hopefully comment to help. Please keep me updated on how the site looks after changes :D

Keep up the good work

Aurelian Spodarec, it looks like a wireframe mockup still. Find a color scheme as suggested above by Wayne Priestley. Follow John Steer-Fowler's advice.

I think if you spaced things out more it would look better. Everything looks too cramped. Check out some of the wonderful type at Google Fonts. Again, once you get a color scheme you like it will be easier to see your vision and provide some better critiques.

That being said, keep up the good work and see what you can come up with. We will be here watching.

Cheers,

Jonny

Thank you , i make changes but it will take a while , probabily tomorrow . When im finished i post the changes :)

Well , not quite changed the colors because im unsure how they match really :/ but i changed the writing to orange and did some adjustments to it . and another well sort of probem is :p

http://scr.hu/2icp/66j1u

John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

Hey Aurelian Spodarec

I like the addition of a horizontal nav bar, although it could do with some more styling. Google horizontal nav bars and look at some images for inspiration.

The site layout is much better now, its finally got a good structure to it.

With regards to the Search feature, perhaps have a look at the Wordpress course in the Treehouse library. You may be able to build your design and have Wordpress run the cms/backend. I know Wordpress have some good plugins you could use for your search capability.

Other than that, it's looking a lot better.

Keep up the good work

Oh wow! :D i actualy never though to do that ! I never thought to search it in google images for this kind of stuff . Well i have just a knowledge HTML and CSS and some basics of JS and PHP but very little . Im not sure what you mean by use plungs for search capability but is im right , to ad back end ? like PHP JS with wordpress? if yes my plan is to build a website , with alot of differet things that later one , when i will go throw courses and learn more , i can apply it to my project so i can learn how everything works .

Eg with JS to make nav bar appear at the top of the bar whtn the orginal nav is not isibile , PHP : To get a user post his writing , picture description et...

The things im doing now , its like a big resourse of informations that i can look back and learn with it so i try to mke the code as clean as i can but well , im not 100% sure how everything works with other things too. Like float and positions absoute or relative toghether in other items like when i had to remove left:50% if you remember

John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

Thats a really good way of learning Aurelian. The best way to learn is to practice what you have learned.

What I meant by Wordpress Plugins was a collection of addons (if you prefer) that can be used to easily add functionality to a Wordpress website without having to code it all yourself. There are lots of WP Plugins that would allow you to add search functionality without actually coding it. Of course, if you are using this website as a learning experience, then by all means you should attempt to actually code the things in PHP yourself.

Have a look at this website for a list of Wordpress Plugins if you are interested at all.

Well, im not really intrested in software made by someone really like dreamwever even if its good . What i mean by that is that my main goal is to , well be like Nick Pettit . Know how to code a website and know how to program on mobile and more. As im intrested to start fully stacked website when im 19 years old . Im 17 now , well from 6 May 1997 and my goal for now is to earn al about design and coding a website by the age od 19 and then start my fully own website . Allthought i want to make a website in around 9 months too and upgrade it and an earier one in around 3 motnhs if its posibile.

My mum is starting to leanr wordpress as i thought it would be a good idea for mum to do as i think its not really hard to make websites in wordpress talking about back end . I think.

Ill try to finish the website , and ill post tomorrow the code if im done and well i have a bit problems with it . Or ill just do it all over again to get better look at it and understand it more.

Bdw thank you for all your help , it means a lot for me because it helps me a lot , i feel now like your my private teacher xd

your really nice person and helpful

John Steer-Fowler
John Steer-Fowler
Courses Plus Student 11,734 Points

You're welcome Aurelian,

You're doing really well, keep up the good work.

Aurelian Spodarec, keep on keepin' man. Here are some design suggestions. I just got a new computer so I am downloading all of my software. Perhaps I can get a visual mockup for you sooner than later if you have a hard time visualizing what I am suggesting.

As started before I would;

  1. Make a decision on your color scheme, remember the 60/30/10 rule.
  2. Expand your heading section the full width of the page, this includes your 'Transport.com' logo all the way to your advertisement image.
  3. a - Remove the small image advertisement and allow it to expand the full width of the browser on desktop resolutions.
  4. b - Perhaps move the logo on top of the image?
  5. Make a color transition here, have the main content a different background color from the heading section.
  6. Remove the border on the vehicle listings. Add a solid background color. When the user highlights create a hover effect.

Is it just me but does the two search buttons not look right?

I want to whip something together for you! Again, please check out this website - https://www.google.com/fonts - if you need any help feel free to ask anytime.

With the right colors and typography, a design can look quite amazing with little graphics.

Before I forget, your logo is very cool. Do you have any Adobe products? I would try to create a vector illustration out of that car. If you do not have Illustrator you can look at a free software solution such as Gimp. Here is a list that you can check out though, http://www.onextrapixel.com/2011/03/15/10-best-alternatives-to-adobe-illustrator/

Again, apply the typography changes to the type section of your logo.

Looking forward to seeing what you come up with.