Blog Post Questions

Advanced CSS in Use

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.

Tumblr Critique

1. What did you learn from about web development / interaction development from this project?

Tumblr is a simple way to be creative and write your own personal webpage. This project helped me practice more on CSS and planning/arranging elements within a website. I also learned to play with transparency which can make a huge difference in a website.

2. If could redo this project, what actions about how you developed your project would you change? Would you spend more time in the mockup planning stages, would you spend more time tinkering with CSS code, etc.

I would spend more time with my CSS code. I would like to readjust my fonts and titles to emphasize important elements so that the Tumblr page does not look boring. 

Tumblr Wireframe / Mockup Critique

Presenter

What is your Tumblr content going to be.
I webpage with things that I like: design, photography, news etc. 

What is your plan to build out your mockup?
It should be simple with one column but also interesting and unique.

Audience

Does the style of the mockup match the theme of the blog?
Yes. It looks fun and simple. 

What advice would you give to help the student develop his / her template?
Don't forget to include time, dates, and like/share because that's very Tumblr. Without those details it would not be Tumblr anymore. 

Non-Profit Critique

Presenter

1. What is the goal/purpose of your Non-Profit

The goal was to create a friendly shopping site featuring American Red Cross apparels and accessories to raise budget. 

2. Did you achieve the goal / design that you wanted?
Yes, I created a shopping site that conveys the main idea but also markets their products to attract the audience.

3. What did you learn about designing for web development from this project?
CSS is very useful in designing web. A change in front of color can make the website completely different and also inspires me. 

Designing a pretty website isn't enough. It is important to think about the audience's perspectives. What do they see, what do they want and expect, or do they feel comfortable surfing my website. I find it helpful to place myself as an audience: are there certain things that annoy me when viewing a website? Etc. 

Audience

1. Is the site a functional working website?
Yes. All the elements I intended to include in my website fully function. 

2. What elements worked the best? What elements could be improved upon?
The links work like how I wanted them to. When the mouse moves to the link, the words become slightly darker and this small detail gives users a pleasant feeling because it makes the website interactive and responsive. 
I would want to work on the color theme of my website and add some elements to create a main emphasis on the page.

Non-Profit: Mockup Critique

Presenter

1. What is the goal/purpose of your Non-Profit
The goal is to sell American Red Cross products to raise money for the organization.

2. What was the 'style' / 'essence' you were going for in your project.
The style is simple, straightforward, modern and user friendly.

3. Were you inspired by a particular website or item?
I was not inspired by any particular websites, but the layout idea come from many websites that I have seen in the past.

Audience

1. Which mockup works the best
My third mockup was the best and well-organized.

2. Are there elements that work in one mockup that you'd like to see applied in another mockup?
More details, for example, My Shopping Account, My cart, Order Status, FAQ, etc. 


3. Which mockup conveys the message of the project the best?
The third mockup. 

Non-Profit Project: Preliminary Sketch Critique

Presenter

1. What is your Non-profit?
My website is about the non-profit organization - American Red Cross.

2. What elements were important?
- Letting the audience know that this is a shopping website that helps people in need. The organization raises money from selling American Red Cross products and help people in need.
- The web should be interactive, formal but also easy to use.
- It should feature bestselling products to attract buyers.

3. What is the general 'feel' or 'look' you want?
- Using pastel colors to create a simple, light-hearted feel.
- Using pictures from the organization about helping others to emphasize to main message: friendly, cheerful. 

Audience

1. Does the layout make sense?
The layout and navigation are simple and easy to navigate users. I layout the most important elements first - emphasizing that the organization puts helping people first. It is their most important goal.
The second element is featuring their best products.
The last element is to update the audience with what the organization has been doing recently -  featuring news/their blog.
2. Are elements easy to navigate and locate.
The navigation is clear and in order. They are emphasized using color and are centered. 

Tumblr Blog Link

chloebitesize.tumblr.com