Please give me comments about these layouts! :)
Showing posts with label WebDesign II. Show all posts
Showing posts with label WebDesign II. Show all posts
Wednesday, July 9, 2008
Wednesday, June 18, 2008
Mobil Website Interface
Another interface for Mobil, to build the trust image for Mobil, I try to make the website interface resembled a research folder. Mobil user in Malaysia mostly are mature audience where they choose Mobil because they trust that Mobil have the best quality oils. I use research folder to make audience understand the Mobil keep doing research to give the best to their customer.
Please give me comments to make it better! ;)
Please give me comments to make it better! ;)
Tuesday, June 3, 2008
Websites With Good Typography
1. Switch On
The thing that I like about this website is their clever use of icon in their typography. Even though the letter changed into another object, we still be able to know what the word they want to say here. Simple yet clean and clear, the typography make it easier for user to read. To emphasize/differentiate few parts they either use another color or make the fonts become bold.
2. TAVI
The typography of this simple website catch my attention because of their use of color and different weight in their typography. The different color giving "levels" to each words, make it easy for user to "categorize" the word. The color use also not boring, with pink as the highlight of the usual boring black gray.
3. Simplify Your Work - Microsoft Office
I think in this website the fonts really reflect the theme of simplicity, using handwritten style fonts. The color use of typography also nice, showing clearly the levels. The fonts that they choose even though it's a handwritten style still easy to read.
4. Lectures on Architecture
Nice simple use of typography, especially on the top of the page. Nice, interesting color combination and nice choice in fonts.
5. International Street and Open Air Theatres Festival
This interesting website that only have words inside really play well with typography. Even though all the content are words without images, user still feel curious to browse around the website. The play with typography also very nice, they differentiate the colors, fonts, and size to different "levels" to make us easy to see and differentiate each word's function.
The thing that I like about this website is their clever use of icon in their typography. Even though the letter changed into another object, we still be able to know what the word they want to say here. Simple yet clean and clear, the typography make it easier for user to read. To emphasize/differentiate few parts they either use another color or make the fonts become bold.2. TAVI
The typography of this simple website catch my attention because of their use of color and different weight in their typography. The different color giving "levels" to each words, make it easy for user to "categorize" the word. The color use also not boring, with pink as the highlight of the usual boring black gray.
3. Simplify Your Work - Microsoft Office
I think in this website the fonts really reflect the theme of simplicity, using handwritten style fonts. The color use of typography also nice, showing clearly the levels. The fonts that they choose even though it's a handwritten style still easy to read.
4. Lectures on Architecture
Nice simple use of typography, especially on the top of the page. Nice, interesting color combination and nice choice in fonts.5. International Street and Open Air Theatres Festival
This interesting website that only have words inside really play well with typography. Even though all the content are words without images, user still feel curious to browse around the website. The play with typography also very nice, they differentiate the colors, fonts, and size to different "levels" to make us easy to see and differentiate each word's function.
Executive Summary - Mobil
Considering Mobil's purpose to give information not only for customer but also to distributor and business in their website, I'll make the shortcut more visible for each audience (motorists, distributors, businesses). For now the shortcut is very not noticeable, to make it more noticeable I'll use icons and buttons to represent the categories.
There's some misleading information in the current website that make user become confuse, I'll remove those unimportant and confusing part to make user's experience in the website become better and easier.
For the appearance, there will be more interactive flash navigation to make the website become fresher and it'll add curiosity of the audience. The website also will given more solid border/container, current website looks disintegrate and individual-ish.
There's some misleading information in the current website that make user become confuse, I'll remove those unimportant and confusing part to make user's experience in the website become better and easier.
For the appearance, there will be more interactive flash navigation to make the website become fresher and it'll add curiosity of the audience. The website also will given more solid border/container, current website looks disintegrate and individual-ish.
Wednesday, May 28, 2008
Competitor Analysis
Well, so for Web Design 2 project I will redesign the website for Mobil. First I will find out about their competitor and analyze their advantage and disadvantage. The three competitors are Petronas, Shell, and Caltex.
1. Petronas
Petronas is a local oil company in Malaysia. The target audience are families and they shows support to families by being a sponsor for family education. They also stabilize their image as a leading local oil company that care about local audience.
The advantage of Petronas is their status as a local oil company that owned by government. Automatically they get more advantages than other oil company in Malaysia. Beside that they also will be trusted more by locals.
The disadvantage is their product range, Mobil have more product range than Petronas.
For the website, Petronas website using simple 2 framed website. Even though the navigation is quite clear, but the title for each navigation link is quite confusing, for example the "People" page. I think the title can make user confuse, what is the "people" here means? The content for that page actually about career opportunity in Petronas. Their sitemap instead of guiding people in viewing their website, they make user even more confuse by using thumbnails without any description on it. The link list also very brief and don't give user any information about the actual site map. The design is still acceptable, but needs more work on user-friendliness.
2. Shell
1. Petronas
Petronas is a local oil company in Malaysia. The target audience are families and they shows support to families by being a sponsor for family education. They also stabilize their image as a leading local oil company that care about local audience.
The advantage of Petronas is their status as a local oil company that owned by government. Automatically they get more advantages than other oil company in Malaysia. Beside that they also will be trusted more by locals.
The disadvantage is their product range, Mobil have more product range than Petronas.
For the website, Petronas website using simple 2 framed website. Even though the navigation is quite clear, but the title for each navigation link is quite confusing, for example the "People" page. I think the title can make user confuse, what is the "people" here means? The content for that page actually about career opportunity in Petronas. Their sitemap instead of guiding people in viewing their website, they make user even more confuse by using thumbnails without any description on it. The link list also very brief and don't give user any information about the actual site map. The design is still acceptable, but needs more work on user-friendliness.
2. Shell
Shell is the United States-based affiliate of Royal Dutch Shell, a multinational oil company of Anglo Dutch origins, which is amongst the largest oil companies in the world.
Their target audience are younger people like teenager to working adult. We can see how they try to attract more younger costumer by having an online game about Shell oil in their website.
The advantage of Shell company is they have more petrol station than Mobil in Malaysia, their petrol station are easier to find or accessed. They also have campaign about environmental friendly oil that attract many people especially environmentalist.
The disadvantage is Shell has less product range compared to Mobil. While mobil has many types of lubricant, shell only has few types of it.
Shell website using simple 2 part where the left is for navigation and right for content. Their website also quite consistent, with same header, footer, and navigation for each page. Overall the design is simple and nice enough, but the website still feels boring even though there's online game as highlight.
3. Caltex
Caltex is a petroleum brand name of Chevron Corporation, used in more than 60 countries in the Asia Pacific region, the Middle East, and southern Africa.
The target audience for Caltex are more to adult and working adult. They potray more formal and professional but still friendly service in their website.
The advantage are the bonus that costumer receive when they buy fuel from Caltex. It will make costumer keep going to Caltex for fuels.
The disadvantage is that Caltex less renowed that Mobil.
Their target audience are younger people like teenager to working adult. We can see how they try to attract more younger costumer by having an online game about Shell oil in their website.
The advantage of Shell company is they have more petrol station than Mobil in Malaysia, their petrol station are easier to find or accessed. They also have campaign about environmental friendly oil that attract many people especially environmentalist.
The disadvantage is Shell has less product range compared to Mobil. While mobil has many types of lubricant, shell only has few types of it.
Shell website using simple 2 part where the left is for navigation and right for content. Their website also quite consistent, with same header, footer, and navigation for each page. Overall the design is simple and nice enough, but the website still feels boring even though there's online game as highlight.
3. Caltex
Caltex is a petroleum brand name of Chevron Corporation, used in more than 60 countries in the Asia Pacific region, the Middle East, and southern Africa.
The target audience for Caltex are more to adult and working adult. They potray more formal and professional but still friendly service in their website.
The advantage are the bonus that costumer receive when they buy fuel from Caltex. It will make costumer keep going to Caltex for fuels.
The disadvantage is that Caltex less renowed that Mobil.
Tuesday, May 20, 2008
Corporate Website Analysis - Miss Selfridge
Miss Selfridge
http://www.missselfridge.com/
Product Sale Page
Product info page
http://www.missselfridge.com/
Main Page
Product Sale Page
Product info page
Miss Selfridge is a UK clothing/fashion brand that usually has feminine design. In this website user not only can see products information but also can purchase those products from this website. Because this website purpose mainly for online shopping, the information given in this website also more related for user to purchase the products like delivery charge, log in to account, payment method, etc.
The structure of this page is simple and easy to navigate, mainly consist of header and footer that always the same in every page and content page where the left side always be the navigation and the right side as the content area. The thing that I notice in the navigation area is how the links will expand if we click on certain area that has more sub pages.
After
There also option to find/buy products by size so the customer don't need to waste their time if actually for certain products there's no suitable size. All categories also clearly indicate the content of the page, so it's easy to find specific product that customer want. Beside that there also search engine of customer need to find certain kind of products that they want.
The product page basically consist of thumbnails of the products where if customer interested they can view more picture and information of the products.
The structure of this page is simple and easy to navigate, mainly consist of header and footer that always the same in every page and content page where the left side always be the navigation and the right side as the content area. The thing that I notice in the navigation area is how the links will expand if we click on certain area that has more sub pages.
Before
After
There also option to find/buy products by size so the customer don't need to waste their time if actually for certain products there's no suitable size. All categories also clearly indicate the content of the page, so it's easy to find specific product that customer want. Beside that there also search engine of customer need to find certain kind of products that they want.The product page basically consist of thumbnails of the products where if customer interested they can view more picture and information of the products.
Grid System
Corporate Website Analysis - Philips
PHILIPS
http://www.philips.com.my/
Sub Page of Television - Flat TV/LCD Page
http://www.philips.com.my/
PHILIPS' Main Page
Television Page
Sub Page of Television - Flat TV/LCD Page
PHILIPS is a company that sells electronic stuff like television, audio products, lighting and many other electric products. In this website they give lots of information to customer about their products. Even though they have wide range of products, it's still easy for user to search for the products that they want because they already categorized all information into their own categories. There also search engine to make it even easier. Not only that, there also the company information about their history, company profile, design, research, etc for other user that want find other information beside the products.
For the structure this website have the same main structure for all website, there always the same header and footer, only a bit difference in content area that mainly divided into two parts. In main page the content area divided into two parts, in right side we can see list of products categories while in left side there's image links that featuring their featured products.
In the product area (eq. television) in the content area the right side consist of more sub-pages links for television categories, while in the left side there's a bit information about their feature products that if we click will bring us to more specific page and the most recent products that PHILIPS produced.
In more specific page like in flat TV page, user can easily find the TV they want by using the left side navigation to put specific criteria of products that they want. I think it's so effective so user don't need to see all products information one by one but just directly put specifically the product criteria that they want.
Overall the website quite clean and easy to navigate, there's some image links for featured products so user will more interested in clicking those image links.
For the structure this website have the same main structure for all website, there always the same header and footer, only a bit difference in content area that mainly divided into two parts. In main page the content area divided into two parts, in right side we can see list of products categories while in left side there's image links that featuring their featured products.
In the product area (eq. television) in the content area the right side consist of more sub-pages links for television categories, while in the left side there's a bit information about their feature products that if we click will bring us to more specific page and the most recent products that PHILIPS produced.
In more specific page like in flat TV page, user can easily find the TV they want by using the left side navigation to put specific criteria of products that they want. I think it's so effective so user don't need to see all products information one by one but just directly put specifically the product criteria that they want.
Overall the website quite clean and easy to navigate, there's some image links for featured products so user will more interested in clicking those image links.
Grid System
Corporate Website Analysis - UNICEF
UNICEF
http://www.unicef.org/
What We Do section
Sub page from What We Do
http://www.unicef.org/
Main Page of UNICEF.org
What We Do section
Sub page from What We Do
UNICEF website got so many information, to manage those informations they categorized information depends on the topic and then later elaborate more in more specific area. Mainly the website structure is consist of header, content that divided into 4, and footer. In all pages they never change the header and footer, only the content are that change.
This website also maintain the corporate color, blue and white with yellow as highlight. With such a big information in website, it will be hard for user to find the information that they want, so in this website they solve the problem by providing search engine. Also because UNICEF is a very famous non-profit international organization, they also provide many different languages for this website.
This website also maintain the corporate color, blue and white with yellow as highlight. With such a big information in website, it will be hard for user to find the information that they want, so in this website they solve the problem by providing search engine. Also because UNICEF is a very famous non-profit international organization, they also provide many different languages for this website.
Website's Grid System
Subscribe to:
Posts (Atom)
