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
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.
Thursday, April 28, 2016
Mock Ups
Questions:
Presenter
1. What is the goal/purpose of your Non-Profit?
1. What is the goal/purpose of your Non-Profit?
To further innovations to battle mosquitoes in a non-invasive, non harmful way.
2. What was the 'style' / 'essence' you were going for in your project?
2. What was the 'style' / 'essence' you were going for in your project?
Clean, modern, appealing to many demographics.
3. Were you inspired by a particular website or item? If so, quickly show.
3. Were you inspired by a particular website or item? If so, quickly show.
None.
Audience
1. Which mockup works the best?
Audience
1. Which mockup works the best?
The first.
2. Are there elements that work in one mockup that you'd like to see applied in another mockup?
2. Are there elements that work in one mockup that you'd like to see applied in another mockup?
The large top header image with the overlaid text, as well as the bold use of red.
3. Which mockup conveys the message of the project the best?
3. Which mockup conveys the message of the project the best?
The first.
Tuesday, April 26, 2016
Project 1: Preliminary Sketch Critique
Presenter
1. What is your Non-profit?
Kite is a non-profit research group that aims to improve global health through a one-for-one project where for every mosquito-repelling patch that they sell, they donate one to a community in need.
2. What elements were important?
I think that the background on why the region needed these patches was important, and that Kite's humanitarian efforts should have been more prominent rather than the research. I thought that links to buy/invest/donate should have been more visible.
3. What is the general 'feel' or 'look' you want?
I think that the design of the patch has a lot of potential and could be marketed as being trendy, which coudl draw more attention and catch on more. A minimalist, clean design would go along well with pops of color that correspond to the colors available for the patches.
Audience
1. Does the layout make sense?
The layout makes sense because all the information is located on one screen and is easily accessible.
2. Are elements easy to navigate and locate?
It's easier to navigate than the original site because it's more understandable and less distracting.
1. What is your Non-profit?
Kite is a non-profit research group that aims to improve global health through a one-for-one project where for every mosquito-repelling patch that they sell, they donate one to a community in need.
2. What elements were important?
I think that the background on why the region needed these patches was important, and that Kite's humanitarian efforts should have been more prominent rather than the research. I thought that links to buy/invest/donate should have been more visible.
3. What is the general 'feel' or 'look' you want?
I think that the design of the patch has a lot of potential and could be marketed as being trendy, which coudl draw more attention and catch on more. A minimalist, clean design would go along well with pops of color that correspond to the colors available for the patches.
Audience
1. Does the layout make sense?
The layout makes sense because all the information is located on one screen and is easily accessible.
2. Are elements easy to navigate and locate?
It's easier to navigate than the original site because it's more understandable and less distracting.
Blog Post: Typography
Find three websites that you believe has good typography. What about the typography works for you? How does it relate to the theme or purpose of the website?
1. http://www.loveandlemons.com/
Love and Lemons uses a courier-like body font to add a vintage character feel to their blog posts, as well as a custom watercolor texture font on their main banner. It works very well of the theme and purpose of the website, which is homey-feeling cooking blog.
2. http://www.topwithcinnamon.com
This food blog uses sans-serif font to create a minimalist body and a hand-painted banner font to add style and color. The hand painted font contrasts nicely with the thin, minimalist font used of the rest of the blog.
3. http://iamafoodblog.com
This blog has a trendy feel, which is helped by its use of all-lowercase serif-type font as a header/banner. Its body font is mostly simple and with serifs, but also uses interesting, sometimes hand-drawn, fonts on top of images as titles. This adds visual interest and is paired well with the plainness of the simple serif main body font.
1. http://www.loveandlemons.com/
Love and Lemons uses a courier-like body font to add a vintage character feel to their blog posts, as well as a custom watercolor texture font on their main banner. It works very well of the theme and purpose of the website, which is homey-feeling cooking blog.
2. http://www.topwithcinnamon.com
This food blog uses sans-serif font to create a minimalist body and a hand-painted banner font to add style and color. The hand painted font contrasts nicely with the thin, minimalist font used of the rest of the blog.
3. http://iamafoodblog.com
This blog has a trendy feel, which is helped by its use of all-lowercase serif-type font as a header/banner. Its body font is mostly simple and with serifs, but also uses interesting, sometimes hand-drawn, fonts on top of images as titles. This adds visual interest and is paired well with the plainness of the simple serif main body font.
Thursday, April 21, 2016
Wednesday, April 13, 2016
Lab: Internet Cats
Blog Questions
Three websites that store information:
1. Facebook. Facebook saves my search history, my contact information, and information of my activities on Facebook as well as apps I connect it to. It uses this information to recommend me friends, pages that others who like the same pages as I do have also liked, as well s for ad placement. It also saves my login information so that I can easily log in.
2. Google. Google saves my recent searches, as well as what kind of websites I visit and uses this information to tailor its search results for me based on my preferences. It alsop has ad placement based on what I look at,
3. Amazon. Amazon saves information such as credit card information, address, email, username, password. It stores these for easy access when I order things on their website. It also saves information on things I have viewed and orders I have made, and so it makes recommendations based on this information and also has ad placement tailored to my assumed interests.
Lab 2
Blog Question
Core77: once again, Core 77 has excellent website design that uses imagery well. I think their top navigation imagery with headlining article uses imagery very well to draw attention to the main articles they are featuring.
Tangerine: This jewelry website uses imagery well by using one huge image to greet you on the homepage, which I think if effective because it shows their product instantly in great detail to visitors.
Olive Garden: Olive Garden uses close-up images of food on each part of their website, with other important info layered on top of the imagery. I think this is good design because it's good marketing for their deals and gets to the point.
Core77: once again, Core 77 has excellent website design that uses imagery well. I think their top navigation imagery with headlining article uses imagery very well to draw attention to the main articles they are featuring.
Tangerine: This jewelry website uses imagery well by using one huge image to greet you on the homepage, which I think if effective because it shows their product instantly in great detail to visitors.
Olive Garden: Olive Garden uses close-up images of food on each part of their website, with other important info layered on top of the imagery. I think this is good design because it's good marketing for their deals and gets to the point.
Tuesday, April 5, 2016
Blog Questions
Question 1: Websites I use
The three most common websites I use daily are Facebook, Gmail, and SmartSite.
I use Facebook as a distraction as well as a tool to stay updated and aware of events and news. I use it to stay in touch with friends but mainly to look at dumb memes, videos of dogs, and news articles from questionable sources. Facebook is supposedly a social network but has become more of a newsfeed of many irrelevant, mildly amusing sources/pages/celebrities.
I constantly check my email to keep up with the daily barrage of emails that flow in constantly and to not miss anything important that comes from classes, organizations, and communities that I am a part of.
I use SmartSite to work on homework and other class related activities. Its purpose is to be an organizational tool for students and teachers to communicate.
Question 2: Competitor Websites
The competitors for Gmail include Yahoo mail, AOL, and the other various email services available. They are all pretty much identical in form/function, which is simple because the only necessary features are writing/sending emails and a system for organization. I have used many different services and they are all basically the same, but the reason I use Gmail as opposed to these different services is because Gmail connects to many of Google's other services such as Google Docs and Google Pro.
Question 3: Visually Great Websites
I enjoy looking at the online magazine Core77.com not only because of its great article but also because its format is appealing to scroll through. Its appeal lies in the variety of interesting images that are readily available to see the moment the website is opened, as well as its easily navigable site that takes no thought to explore. It also uses colors well and has a simple structure. Another site I enjoy is Dan Adelesic's portfolio and artist page, which is fun and unlike any other website I have seen. It is intentionally complex to reflect the artist's work and its use of colors and other graphic elements make it interesting. I also think that Twitter is well designed because its format is simple and intuitive to work while also minimal and accessible.
Subscribe to:
Comments (Atom)