Click Here
Thursday, June 9, 2016
Tumblr Critque
Presenter
What is your Tumblr content going to be ( be descriptive )?
It is going to be a minimalist, botanical-inspired photolog with fashion, interior, and other types of artistic photographs depicting mainly plants.
What is your plan to build out your mockup ( give a rough technical ideal )
I want it to be clean, mostly black and white with grey so there is more focus on the photos.
Audience
Does the style of the mockup match the theme of the blog?
Yes, modern and minimalist.
What advice would you give to help the student develop his / her template?
She recommended me to try it without the grey border.
What is your Tumblr content going to be ( be descriptive )?
It is going to be a minimalist, botanical-inspired photolog with fashion, interior, and other types of artistic photographs depicting mainly plants.
What is your plan to build out your mockup ( give a rough technical ideal )
I want it to be clean, mostly black and white with grey so there is more focus on the photos.
Audience
Does the style of the mockup match the theme of the blog?
Yes, modern and minimalist.
What advice would you give to help the student develop his / her template?
She recommended me to try it without the grey border.
User Testing
The testers all loved the colors used in the homepage, with all of then commenting on how they enjoyed the gradients. Seeing the UserTesting videos was pretty funny because the testers were all confused by the non functionality of the links. One user liked the way the squares zoomed out to indicate a link. None of them tested the breakpoints despite my request to do so, so that was unfortunate. My large first photo didn't really show up since their browser screens were not wide enough, so it just appeared to be a large blank space. That is one edit that I will make; I didn't realize that most people view their browser at that smaller size.
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
Subscribe to:
Comments (Atom)