1

I am a web developer student, and I usually think too much on user experience when it comes to designing websites (colors, interaction, etc.). This concerns me a lot when it comes to the creative process of creating new concepts.

I recently got a school assignment with a client. The client is a bus company. The problem is that I am struggling a lot with the colors of the company to get a professional look to the website. The old website needed a total rebranding so here is one of the big difficulties, especially for a web developer.

This is their bus: Bus

This is an early prototype of the landing page (The slider picture isn’t correct cropped. Also the footer content isn’t correctly aligned.): Prototype Link to original website: teamtour.no

Therefore, my complex question is how can I accomplish a result that looks modern and professional? And how can I get the look of the brand/bus to the website?

Any ideas and suggestions will be highly appreciated...

Improve this question
6
  • 2
    modern and professional? – Rosenthal Sep 21 '14 at 2:33
  • 2
    How about a hero image layout. With something akin to this, but maybe quite much edited and not that exact picture. Possibly with bus in foreground. Mainly because their brand is sightseeing. So if you can arange a shooting in a scenic place... Maybe no rainbow. – joojaa Sep 21 '14 at 6:46
  • @jooja I think your comment is a good enough answer it's a suggestion that answers the question. – Jenna Sep 21 '14 at 9:13
  • 1
    The green is your main color, the blue is the highlight, ignore the rainbow and sun. Don't adapt bad design just because it's pre-existing. A "modern and professional layout" is up to you. – Lauren-Clear-Monica-Ipsum Sep 21 '14 at 12:53
  • 2
    Do your research and ask "Why?" a lot. Why are the buses green? Why do they have their current graphic profile? What needs and purposes does it fulfill? What was the idea behind the rainbow? Etc. etc. Then base your design on those reasons/answers instead of off the current design. And if those reasons suck, then make up better ones that the bus company might not have considered. For example: "the buses are largely green because they're eco-friendly". You shouldn't lie of course, just find things to highlight and use as selling points. – gburning Sep 21 '14 at 22:11
2

"Modern" is a relative term, whereas "Professional" is not.

Professional means:

  • to respect basic graphic design rules - symmetry, grid rules, color theory, and so on. Some of these rules are basically a given if you work with a grid-based framework and have a good eye for esthetics. For more details check out this great slideshow.

  • to have clean, error free, and bug free code. You can use the W3C Validator to check your code for syntax errors.

As for "modern", that is a relative term. If you should, however, want to "go with the flow", there are always trends you can follow. You can browse theme marketplaces, like Themeforest, read online magazines like Smashing Magazine or just google for results and see what is more relevant to your case.

Improve this answer
8
  • 1
    "Professional" is just as ambiguous as "modern" to me. – Scott Sep 21 '14 at 19:50
  • 1
    "Professional" to me means respecting standards and rules. While in coding it's pretty obvious what these standards are, in design, aside from composition and color rules, there are many variables, like personal taste, that make the term "professional" so ambiguous. – Peter Noble Sep 21 '14 at 19:59
  • Its not obvious what professionalism means in coding either. – joojaa Sep 21 '14 at 20:41
  • Who says professional means "respecting standards and rules"???? I know a ton of "professionals" who do neither. Does that not make them professionals? – Scott Sep 21 '14 at 21:09
  • 2
    @Scott "Professional" means "doesn't look like the neighbor's kid did it in MSPaint and pasted it into Word." – Lauren-Clear-Monica-Ipsum Sep 22 '14 at 22:25
0

kvambaam:

You can always go the easy route of taking their corporate colors, making pretty grid-based layout using flat design and calling it a day.

Or you can start from examining your client's needs:

  • Get access to their Google analytics data to see what browsers / devices are used to access their site
  • Confirm with client that these are relevant for next build
  • Check with client if the site needs to go beyond simple rebranding, such as increased functionality, integration with sales and reservations, etc.
  • Look into technology that supports relevant browsers and functionality - possibly open source framework like WordPress or Drupal
  • Once technology is identified, look for template solutions for that technology. For instance, if client is ok with WordPress and wants a responsive site, look for responsive WordPress templates that will work for you aesthetically
  • Get or purchase template solution, deploy it as test site and brand it without changing template's layout or functionality

Depending on the complexity of the site, your project might be going beyond designing interactive pages and actually in the realm of "skinning" web-based software, in which case the website is driven by business logic and technology requirements. I've seen many creatives put visuals first regardless of project's nature, resulting in stunning layouts that required a small fortune to execute as a custom build.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy