Client: The City of Los Angeles Project: Website Redesign |
|||
|
Designer delivers new Creative Brief, estimate and schedule |
Monday,05/03 |
||
|
Designer and Client meet to conduct User Profiling session |
Wednesday,05/05 |
||
|
Designer finalizes and delivers User Profile document |
Thursday, 05/06 |
||
|
Designer delivers draft navigation as Sitemap document |
Week of 05/06 |
||
|
Tuesday 05/13 |
||
|
Designer begins site look and feel |
Thursday, 05/06 |
||
|
Design direction presentation |
Wednesday, 05/20 |
||
|
Designer delivers revisions to look and feel, if required |
Friday, 05/28 |
||
|
Once Client signs off on design look and feel, Designer completes page designs (10 to 15 pages estimated) |
05/13– 05/27 |
||
|
Client delivers final content |
Thursday, 05/20 |
||
|
Designer begins final production of all graphics files |
Week of 05/20 |
||
|
Designer begin technical production: Designer to create HTML, image folder and CSS files for posting to development site. |
Week of 06/03 |
||
|
Beta testing |
Monday, 06/07 |
||
|
Site launches |
Thursday, 06/10 |
||
schedule
client survey
General Information
- City of Los Angeles
Current Site
- The current site is too complicated to use for regular visitors. There are too many information on the main page. There are too many banners on the main page also.
- One successful thing about the current site is the main navigation on top.
- 3 shortcomings on current site = color, banners, make it simple and easy.
- The only important thing to maintain from current site is the logo.
Reasons for Redesign
- It is an outdated site in which people can get confused easily. An update is needed to make it simple and easy to navigate and find info.
- Primary objective would be to decrease customer service inquiries (over the phone or in person) by making it simple and easy to find info (forms, directions, etc.). Secondary objective would be to upgrade the brand of Los Angeles City by having a creative and inviting look online so more people out of state will want to visit Los Angeles.
Audience / Desired Action
- A typical website visitor would be a Los Angeles resident who may be looking to report a street-lighting problem. A visitor could be of any age or occupation.
- A typical website visitor would be looking to find information.
Perception
- The website should be friendly. It is different from perception of current image.
- Most other big cities do have a cleaner design compared to L.A. website. They are easier and simpler to use. There were some cities that had similar looking websites as L.A. But most were better.
- http://www.cityofchicago.org/city/en.html Well-organized. Nice homepage picture. Nice use of gradient.
- http://www.miamigov.com/home/pages/ The website has minimal texts on main website.
- http://www.cityofboston.gov/ Overall, the colors match very well. Although there seems to be a lot of information, but they are well-organized and easy-on-the-eyes.
Contents
- The site will use the current, existing content from the current site.
Technology
- The target platform would be both Mac and PC. The target browser would be both FireFox and Internet Explorer.
- There is no need for JavaScript, Flash or DHTML because the site must be user-friendly.
Marketing
- Most people will be searching for the website on search engines, using terms like ‘Los Angeles City’.
- We can tell people who are visiting Los Angeles City offices to use the website.
create a navigational menu
create a navigational menu using the list <li> tags and create a CSS based drop down menu.
“Sephora” website redesign(midterm)
Homepage_add an image in the skincare consultation section
Makeup page(sub page)_add an image in the beauty central section.
Sitemap
This is is sephora redesign. the audience is women from 20 to 40 years old. So I used a lot of pink to make it more feminine.
My focus was letting people know whats hot and most selling and skin consultation. I wanted to educate the viewers on the newest trends of make-ups and different ways.
Most other make up websites don’t have skin consultation so people who don’t know their skin types don’t know what to buy. So its very helpful. So people can read and buy new stuff.
Some classmates told me they liked my sub-page more than they liked the main page. They also told me the text and the images on main page are too small.
excercises
2-column with faux column
Create a page with a 3-column Liquid layout
3 column with faux column
moma’s subpages
explore(level1)
exhibitions(level2_sub-page)
The New Typography(level3_sub-sub page)
online article
online article about building a site using column and/or div structure.
Faux Absolute Positioning
Introducing the CSS3 Multi-Column Module
The CSS3 multi-column module
CSS Swag: Multi-Column Lists
fauxcolumns
