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

Code Academy Homework

CSS Zen Garden

Websites With Typography:

1. Behance.net

This site is a place where artists display and publish their artworks. There are many good typographies and this makes behance a community for visual artists to learn from each other.

2. slack.com

The simple message yet stands out at the middle spices up the website. The color contrast also makes it work well and blends in.

3. michellephan.com

This site uses typography to emphasize on youthfulness and modern design. Typography helps the website appear more interesting with fun colors and playful interactive elements.

Internet Cats Questions

Websites That Store Information:

1. ebay.com

Ebay collects personal information such as nam, phone number, email or credit card numbers to create private accounts and processes online transactions. The information is used to help users purchase products from the site. 

2. surveymonkey.com

This site sends out surveys and collects data from others to help them make decisions based on the information provided by the site. This site also stores data and let users manage statistical results from the data.

3. youtube.com

Youtube stores information of individuals to help them build their own profile and channel. Youtube often asks for your name, your pictures, date of birth, email address, etc.

Artisan Lab II

1. robinmastromarino.com
This is simply a portfolio of a design student. I love the way he puts his own picture on the front page. It is black and white and goes with the website color theme and also acts as an emphasis for the main page. The idea is very bold and creative - literally putting a image of himself on the front page to sell himself.

2. vogue.com
Images place an important role in everyday life. They attract people much more than words do. Vogue - a fashion magazine uses images to convey the sense of style and theme of current fashion trends. Fashion is about images and it's nearly impossible to write about fashion without demonstrations. Images help enhance the design and more importantly the message of the website.

3. https://lunarway.com
The image does two things on this website. First, it acts as a nice dim background to help emphasize the green main message of the website. This is effective because the lines are bright green while the image is dimmed. Second, the image is a guy looking at his phone smiling. This helps promote the idea that the front page is trying to emphasize: mobile banking like never before.
The image on this website is very multi-functional.

Artisan Lab I

Question 1: Websites You Use

1. smartsite.ucdavis.edu
This website belongs to my school to provide educational purposes for students. It is a place where students connect to their classes virtually. They can access important documents, upload or submit assignments, and communicate with their professors, TAs and other students. This website is a tool for education.

2. facebook.com
Facebook is a social media website where I can create my own profile, update and socialize with friends and family. It is a tool to help me as an individual to connect with others. It is also a way of updating news around the world by subscribing to news, magazine pages such as CNN, BBC or Vogue. Overall, it is an important site because it helps me connect with the world virtually.

3. etsy.com
This is an online shopping site that allows users to buy and sell unique handmade products. I am a seller on easy and I sell handmade camera straps to help pay for my tuitions. It is a useful website if you have handmade products and want to sell them without having to open a real shop. It is also a nice community where buyers can find unique and customized products from small-scaled private family-owned shops.

Question 2: Competitor Websites

The biggest competitor of Etsy is Ebay.com. Ebay is one of the largest and most well-known market for online shopping between people around the world. However, Ebay is slightly different. It only allows users to sell and buy products that are produced by big manufacturers. In other words, they do not allow handmade products that do not have trademarks or official brands. Although anything can be sold on Etsy, Etsy focuses more on handmade products so this site fits my needs more. I am able to target the right group of audience by selling Etsy. Other than that, these two websites overall provide similar features.

Question 3: Visually Great Websites

1. http://lamoulade.com

This is a website of a studio in London. The design is so interactive that makes users feel good surfing on their website. The combination of good illustrations, modern and stylish fonts with nice images and bright colors visually attracts users. The website also has cute sounds when users move the mouse to certain areas of the page. La Moulade uses yellow and white as the theme colors, which is very simple yet effective. There isn't much typography on this website. They only play a little with their logo: unique font with a flower next to the studio name.

2. http://squarefactor.com
This website attracts people with large images that take up the whole page and videos with abstract moving artworks/animation. They also include videos to demonstrate the content of the website. The theme colors are black, white and orange-brown. There are lots of typography throughout the web with different styles to demonstrate different groups/organization.

3. http://trumpdonald.org
This is my favorite recent discovery. This website has a very cool feature: using a trumpet to make fun of Donald Trump. The trumpet moves along with the mouse and if the user holds down the mouse, the trumpet will blow away Trump's hair and his face expression is hilarious. This interactive feature makes this website fun. It uses basic colors for the web title: red, blue and white. The site is straightforward and simple but very fun to play around with. There is no typography on this website.