Find three websites that you believe use CSS motion effects such as CSS animations or CSS transitions as part of the design. This could be hover effects or animating an item. Describe what some of these effects are and how they affect the design of the website.
Lyft.com, Bloomingdales.com, Paypal.com
The colors change and a menu bar pops up when the mouse moves to certain tab. The changes make the website more fun, interactive and responsive.
The change makes it easier to navigate within the website and makes things more accessible.
Responsive Websites
https://access.roundarch.com/demo/stella-sport/
In this website the model walks as the mouse is moved across the page. She walks back and foruth following the mouse.
https://www.avon.com/
The price and details of the products will show on white background when the mouse moves to that product.
http://www.nau.com/
This website works similarly to the avon page. But as the mouse moves to certain products, the back view pictures of the models will show. This helps the audience see how those products look like from the back without opening the product page.
Final Project Inspiration
http://www.penjiapp.com/
I like how this website plays with transparency, using pictures underneath to convey the message and emphasize the white text. It also responds to different size of the browser. The font becomes smaller, the pictures are cropped, etc to maintain the design of the website.
Find three pieces of visual / design inspiration for your final website. They could be websites, artwork, poetry, scenes from a film, etc. Describe what you like about these pieces, try to be specific. Do you like the tone, the color choices, the 'feel' like minimal, busy, modern, sleek, modern.
https://sokoglam.com/
This website is very minimal but effective and easy to use. The color is very subtle to emphasize and pop up their advertisement/content of the website. This is very effective in creating shopping websites. Too much deatils can distract users from the main content.
http://www.canidae.com/?gclid=CjwKEAjwsr-6BRCLvrj785rbhTsSJADjUxakWBsP1RqNogSPWdimd0rrevbsdOWGJRdtCaAEp2sPWhoCCRTw_wcB
This website is also a very simple design with enlarged photos to emphasize on their stories about animals.
https://www.team-lab.net/
The format of this website is very interesting. Again, it is simple and effectively displays the artists's works. Instead of having lines of descriptions under each image, I like how the words only show on a black transparent background when users move the mouse to that image.
No comments:
Post a Comment