Remember my bear cafe assignment? This is the final product! Took me an afternoon heehheeh. Most of the time was spent on finding nice visuals and coming up with the content. It was fun :D I am thinking of moving my blog to wordpress.
Saturday, December 31, 2016
Friday, December 30, 2016
Discussion: Different Navigation Styles
Can anyone find creatively organized web sites which are still easy to navigate? What makes these sites work? What makes a site hard to navigate?
A site that is hard to navigate will be
1. a typical university website, in which the programme list is a sub-menu of "for prospective students" tab. It is hard to find the information one needs when there are too much information in a single drop down list.
2. broken hyperlink
3. fail to load
Websites that are easy to navigate:
Chick-Fil-A is a very happening website. There is a feature that suggests Your nearest branch on the top, and its menu can be accessed by 1. scrolling down the homepage or 2. clicking on the menu button.This is a weird feature that I cannot understand now, maybe when I study more about UX it will be clearer to me.
Anyway, the navigation bar only has three tabs, with the middle one offering a pictorial drop down menu showing what each is about. On the first glance I was expecting the articles to change as I hover from "Food" to "Lifestyle", but it didn't. Maybe it's just me.
Lastly, this is the cutest social media link I have seen so far.
Microsoft.com is organised into three main platforms - store, product and support. Taking on an individualised approach, each tab directs user to a webpage of a completely different layout/ style. It is quite overwhelming and made me realised that I like coherent styles.
Adobe has a simple homepage with a uniquely graphical drop down menu. The information about Adobe is included in the menu instead of footer. The site is clearly organised based on the visitors' needs, I guess they know their customers very well.
Eone is a watch brand. I think there's a trend among user-friendly websites: Mostly three tabs on the main navigation bar and only one big and nice visual on the homepage. It gets a bit boring after seeing all the same layouts.
The Art of Manliness has a creative drop-down menu that
1. gives examples of the content within those fields. It acts as a good summary or preview especially when a large amount of information is expected. This style will be useful for sites with a big archive of articles.
The Internet Archive uses icons instead of text in its navigation bar.
A site that is hard to navigate will be
1. a typical university website, in which the programme list is a sub-menu of "for prospective students" tab. It is hard to find the information one needs when there are too much information in a single drop down list.
2. broken hyperlink
3. fail to load
Websites that are easy to navigate:
Chick-Fil-A is a very happening website. There is a feature that suggests Your nearest branch on the top, and its menu can be accessed by 1. scrolling down the homepage or 2. clicking on the menu button.
Microsoft.com is organised into three main platforms - store, product and support. Taking on an individualised approach, each tab directs user to a webpage of a completely different layout/ style. It is quite overwhelming and made me realised that I like coherent styles.
Adobe has a simple homepage with a uniquely graphical drop down menu. The information about Adobe is included in the menu instead of footer. The site is clearly organised based on the visitors' needs, I guess they know their customers very well.
Eone is a watch brand. I think there's a trend among user-friendly websites: Mostly three tabs on the main navigation bar and only one big and nice visual on the homepage. It gets a bit boring after seeing all the same layouts.
Elle's biggest standout is the
1.menu that stays at the top of your screen as you scroll up and down, and a
2.hidden side bar that functions like a catalogue/ content page. The way its sub menu overlaps the parent one saves a lot of screen space and makes it easy to click.
The Art of Manliness has a creative drop-down menu that
1. gives examples of the content within those fields. It acts as a good summary or preview especially when a large amount of information is expected. This style will be useful for sites with a big archive of articles.
The Internet Archive uses icons instead of text in its navigation bar.
Saturday, December 17, 2016
Assignment 2: Create a Mood Board
Provide an organized 1 page PDF presentation with description of your website idea, the main url or domain name, a color scheme and examples of the type of media you will use. In your description explain why you chose the font and color scheme. Make sure that your fonts and easy to read, heading sizes vary and everything has a consistent look. Colors should be consistent and aesthetically pleasing. Included media examples should enhance the purpose of the website.
Choose a top level domain name and a second level domain name (it doesn't have to be available) that works with the concept of your site. For example www.arts.codes, the top level domain is codes and the second level domain is arts.
Choose a top level domain name and a second level domain name (it doesn't have to be available) that works with the concept of your site. For example www.arts.codes, the top level domain is codes and the second level domain is arts.
Homework: what is top, second level domain?
Assignment 1: Finding Inspirations
Instruction: For each URL, provide a one paragraph synopsis with a justification for why you chose it as an inspiring example. Note, these don't have to be built in Wordpress, but you can see examples of sites built entirely on WordPress in the provided link: http://www.creativebloq.com/web-design/wordpress-tutorials-designers-1012990
Beautiful is a Singapore-based design studio set up by award-winning creative director, Roy Poh. Powered by WordPress, this site is easy to navigate with the homepage showcasing their work in big visual neatly aligned in rows of three. Every entry is linked by a unique thumbnail, which also shows the details when a pointer is moused over.
Interesting Interview with Roy Poh: http://theartistandhismodel.com/2013/01/conversation-with-roy-poh-of-beautiful/
Worry Free Labs is a web agency based in New York that markets itself for its expertise in building remarkable mobile experiences. This webpage has a colourful theme coupled with fancy text animation (like a ppt slide). A large emphasis is placed on its people through featuring portraits of their employees. This is effective in creating a personal touch and even increased credibility to let the visitors feel connected with the agency.
Homework: check out vertical scrolling, mouseover
Tuesday, January 5, 2016
Adapting to The Needs of A Wheelchair User: Maison à Bordeaux
Brief
Lemoine house is located in Floirac on a hill 5 km from Bordeaux, France. This house, designed for a couple and their three children, reflects the physical needs of a wheelchair user and at the same time, it was a home for the whole family: a solution that combines two parallel lives.
Concept
While some architects attempted to avoid the problem through a strict, horizontal arrangement of rooms, the architect Koolhaas conceived the project as three houses on top of one another. A very large lift, open on all sides, travels between the three levels. Like a vertically mobile "room", it moves alongside a three-story wall of shelves that hold books, files, artworks, and wine within the client's easy access.
Interior
The Lemoine home essentially consists of three houses piled on top of one another. One has been excavated on the hill (basement); the second is open to the outside and enclosed with glass and curtains; a third encapsulates the private sleeping quarters and bathrooms with a concrete wall, punctuated with small portholes.
![]() |
| outside |
![]() |
| inside |
![]() |
| Model of The Glass House |
![]() | ||
| Model of Maison à Bordeaux |
Reference
http://oma.eu/projects/maison-a-bordeaux
http://www.moma.org/collection/artists/6956
http://www.living-architectures.com/Koolhaas_houselife.php
https://vimeo.com/21876246
http://www.nybooks.com/daily/2010/02/18/house-life-in-a-koolhaas/
https://en.wikiarquitectura.com/index.php/House_in_Bordeaux
http://architecture.about.com/od/housestyleworkshop/tp/Maison-agrave-Bordeaux-Rem-Koolhaas-in-High-Tech-Gear.htm
http://storiesofhouses.blogspot.sg/2005/06/maison-bordeaux-by-rem-koolhaas.html
http://www.e-architect.co.uk/bordeaux/maison-a-bordeaux
https://www.behance.net/gallery/The-Bordeux-House-Precedent-Study/3480175
http://www.domusweb.it/en/architecture/2013/03/25/maison-a-bordeaux-a-textile-revisitation.html
https://www.flickr.com/photos/arqhisakashi/3991935200?ytcheck=1
https://www.flickr.com/photos/arqhisakashi/23872535026/in/photostream/
Subscribe to:
Comments (Atom)








