Thursday, May 26, 2016
Friday, May 20, 2016
May 19th Blog Post
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.
1.Nike
When you hover over the social media icons they transition into solid colors. When you hover over nav phrases, a menu pops up below it. This makes the blog more interesting and interactive.
2.UC Davis
The UC Davis website has color changing link elements as well as a link button at the top right which lengthens as you hover over it, and some other elements which grow and change color when hovering. These elements help navigate the site by alerting the user when they are hovering over a link.
3.Red Dot Award
Red Dot uses a lot of color hover effects in its layout to draw attention when hovering over links. In addition to functional purposes, this also adds more color to the layout when navigating the site.
Do they help the design? Are they two distracting? Do the motion effects work with the style of the website?
Yes to all of them, they are enough to be effective but not too much to be distracting to the content.
Please include a link to each of three websites
There are links in the titles of the websites I described above.
Responsive Websites
Find three responsive websites and discuss / take screenshots of how the website is responsive. Describe how the design changes, include how many times the design changes and how dramatic does the design change.
1. http://robinmastromarino.com
The side menu block, which pops open a menu when clicked, moves when the screen is stretched in or out. The text does the same, which makes the website more navigable and interesting to interact with.
2. http://vanderlanth.io
This design utilizes sliding panels over text when hovered over and menus that pop up when clicked, as well as text that responds to the size/width of the screen to best display information for the user.
3. http://parcourscanada.com
The top nav bar has multiple interactive buttons which, when pressed, pop up additional options, and other interactive elements which help condense the large amount of information which is available on the site, and makes it easier to use.
Please include a link to each of three websites
The links are included in the previous question along with the description.
Final Project Inspiration
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.
1. http://plantsonpink.tumblr.com - I like the botanical theme and color palette of this blog and would like to take some aesthetic inspiration from it.
2. http://www.therapeuticskincoach.com/#intro-1 - cool responsive elements when you scroll that pull up multiple blocks in interesting way. I also like the responsive top bar.
3. http://www.mademoisellerobot.com - the photos respond to the width of the screen very nicely, and I like the layout overall with the nav bar.
Describe how you might incorporate these into your final project
I'll take color inspiration from the various botanical elements of the websites that I mentioned above, as well as responsive elements for buttons and the way information is displayed on them.
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.
1.Nike
When you hover over the social media icons they transition into solid colors. When you hover over nav phrases, a menu pops up below it. This makes the blog more interesting and interactive.
2.UC Davis
The UC Davis website has color changing link elements as well as a link button at the top right which lengthens as you hover over it, and some other elements which grow and change color when hovering. These elements help navigate the site by alerting the user when they are hovering over a link.
3.Red Dot Award
Red Dot uses a lot of color hover effects in its layout to draw attention when hovering over links. In addition to functional purposes, this also adds more color to the layout when navigating the site.
Do they help the design? Are they two distracting? Do the motion effects work with the style of the website?
Yes to all of them, they are enough to be effective but not too much to be distracting to the content.
Please include a link to each of three websites
There are links in the titles of the websites I described above.
Responsive Websites
Find three responsive websites and discuss / take screenshots of how the website is responsive. Describe how the design changes, include how many times the design changes and how dramatic does the design change.
1. http://robinmastromarino.com
The side menu block, which pops open a menu when clicked, moves when the screen is stretched in or out. The text does the same, which makes the website more navigable and interesting to interact with.
2. http://vanderlanth.io
This design utilizes sliding panels over text when hovered over and menus that pop up when clicked, as well as text that responds to the size/width of the screen to best display information for the user.
3. http://parcourscanada.com
The top nav bar has multiple interactive buttons which, when pressed, pop up additional options, and other interactive elements which help condense the large amount of information which is available on the site, and makes it easier to use.
Please include a link to each of three websites
The links are included in the previous question along with the description.
Final Project Inspiration
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.
1. http://plantsonpink.tumblr.com - I like the botanical theme and color palette of this blog and would like to take some aesthetic inspiration from it.
2. http://www.therapeuticskincoach.com/#intro-1 - cool responsive elements when you scroll that pull up multiple blocks in interesting way. I also like the responsive top bar.
3. http://www.mademoisellerobot.com - the photos respond to the width of the screen very nicely, and I like the layout overall with the nav bar.
Describe how you might incorporate these into your final project
I'll take color inspiration from the various botanical elements of the websites that I mentioned above, as well as responsive elements for buttons and the way information is displayed on them.
Thursday, May 19, 2016
Tuesday, May 10, 2016
Thursday, May 5, 2016
Critique Post
Presenter
1. What is the goal/purpose of your Non-Profit?
Kite patch aims to use innovative technology in the war against mosquito-borne diseases.
2. Did you achieve the goal / design that you wanted?
Yes.
3. What did you learn about designing for web development from this project?
I learned that it is a lot more difficult than I thought, and that it is very helpful to plan and grid the blogs in advance.
Audience
1. Is the site a functional working website?
Yes.
2. What elements worked the best? What elements could be improved upon?
The homepage banner is eye catching and quickly presents the mission of the organization. However, is would be nic eif the contact page had the same background as the ourstory page.
1. What is the goal/purpose of your Non-Profit?
Kite patch aims to use innovative technology in the war against mosquito-borne diseases.
2. Did you achieve the goal / design that you wanted?
Yes.
3. What did you learn about designing for web development from this project?
I learned that it is a lot more difficult than I thought, and that it is very helpful to plan and grid the blogs in advance.
Audience
1. Is the site a functional working website?
Yes.
2. What elements worked the best? What elements could be improved upon?
The homepage banner is eye catching and quickly presents the mission of the organization. However, is would be nic eif the contact page had the same background as the ourstory page.
Subscribe to:
Comments (Atom)