Closed

GUI Facelift for existing website

This project was awarded to dcalvosa for $500 USD.

Get free quotes for a project like this
Employer working
Awarded to:
Skills Required
Project Budget
$250-$750 USD
Total Bids
9
Project Description

This project is for the development of a new design for an existing website, ThisCity.com.

I have already begun working on a new layout for the website, but I would like for YOU to suggest some new styling ideas such as colors, box styles, and font sizes/colors to use with the new layout.

TO SUMMARIZE
- I have made some 'rough copy' layouts for a new design. Your job is to take my ideas and make a 100% complete and professional design from them
- Your job is to develop 3 new boxstyle/header/color schemes for [url removed, login to view]
- You will make 2 pages using the new schemes
- After I select the style that I like the most, we will talk about actual implementation into our live website.

I have included some more detail about the project below. The main tasks are #1-5, all other information is just some of my comments about the task. My extra notes might be 'too much information' to be including in this posting, but I wanted to include it anyway. the main thing is for you to be aware of tasks 1-5.

1. Propose a set color tablet and font CSS scheme for the website. Our site now is almost all white, and while I do want to maintain the ‘plain’ styling like Google and Facebook employ, our site needs a little bit more color to balance things out.

a. The font sizes/colors in the screenshots are borrowed largely from Facebook. Of course I don’t want to copy them completely, but I like how they are making effective use of space on the page by using small fonts and also a lot of grey’s instead of straight black. We need to come up with a color scheme of our own.

b. My screenshots use the Century font, which I do like, but don’t think is a web standard font. In your design ideas, you would specify the specific font size, style and color used in each part of the website, including line spacing information.

2. Show me a few different ‘box styles’ we could use to hold content on the pages. The boxes with the rounded corners and straight shade don’t do it for me.

3. Develop a new header design for the website.

a. I have a few different working versions for the header of the new site that I am considering. You can see that our current live site has a different header design than I have used in my screenshots. There are a few different versions in the screenshots. I am fond of the new one that I have used in many of my screenshots (with the main nav menu at the very top of the page), however I think it needs to be improved upon. I took that concept (menu at the very top) from Google’s website. There are a few important elements to keep in mind

i. The new header should use as little height on the page as possible to make room for more content to be visible when a page is loaded.

ii. As I mentioned I do like having the main nav elements at the very top of the page, however this makes it difficult for there to be sub-menu items. As you can see from my screenshots, some sections do have sub-menu sections and they are just kindof ‘floating’ there on the page and not placed well. Hopefully you can come up with a design that allows for top of page navigation and also sub-menu items.

4. Take my ‘Homepage’ screenshot and turn it into a real working version. Your version won’t use database driven information, it will just be a sample page with all of the decided upon font colors/sizes/styles and all the content done up in html/js and looking exactly how it would look on a live site.

a. I want to use the same ‘mouse over’ ability that FB and many other sites use on their content. When you mouse over a piece of content in say, the News Feed on facebook, you see a little ‘options’ icon appear that lets you access options for that content. For now the only thing that I would want to appear with our mouseover is the ‘AddThis’ widget, but in the future this mouse over access to menu options will give users the ability to do more with the information, like add it calendar, comment, etc.

5. Take my Events screenshots and also turn it into a working version, also using the mouse over functionality.

a. You will see in my screenshot that I have a menu that users can access to filter the results on the page. Users would be able to click a tab/button that says something to the effect of ‘Refine Results’ which will make the menu appear on the screen. The menu will slide into view much like the content loads on this website ([url removed, login to view]) when you click sign up now.

On some pages there will also be a 'Show Results on Map' tab/button that the user could click to reveal a map with points showing each result. So basically, this needs to be designed so that there can be more than one 'expandable' area, such as the 'refine results' and 'show results on map' buttons.

b. For each 'refine results' filter option, there should be some kind of icon or change that reflects whether the option has been chosen or not. (like a checkmark or something) so that they can deselect it when needed.


TO SUMMARIZE
- I have made some 'rough copy' layouts for a new design. Your job is to take my ideas and make a 100% complete and professional design from them
- Your job is to develop 3 new boxstyle/header/color schemes for [url removed, login to view]
- You will make 2 static pages using the new schemes
- After I select the style that I like the most, we will talk about actual implementation into our live website.

I have attached the 3 files you will need for this project. I also have layouts for almost all the other pages on the site. If you would like to see them, just ask.

You will not be making these pages with Database driven information. you are only going to make static pages as samples. Once I select the styling that I like the most, then we can talk about implementation into the live website.

To bid on this project.
- You MUST show a portfolio with some good designs that you have done
- You MUST be able to begin immediately.

GOOD LUCK

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online