Write 1 positive compliment and 2 critical questions/comments, according to the rules/setup you just re-read.

(+) Clean, easy to navigate

(-) Only 2 images in slide show. Need at least 3 to feel like a slide show. Transitions too quickly between the images. Gets old quickly and becomes a distraction. Should always provide a way to turn the slide-show off.

(-) Home page could use some variety. Images of artwork on the bottom are quick links to those pieces but having them seems a bit unnecessary since they could easily be included in the slide show. Or if they are meant to be featured pieces, then adding a label above that section called “Featured Work” would help identify the section and give it some meaning or reason.

(-) The blog link should open in a separate tab or page instead of in the same window. When you click on the logo, in the blog, you expect to return to the homepage of her website, but instead the logo links the blog.

(-) Shop link, also takes you offsite. Whenever possible, mask links to 3^rd party sites with your website instead of using a subdomain.

kristy gamill site critique (click to download PDF)

Take aways from Chat

Is there enough time in a “live” chat format to get enough good info if you are the designer? Yes. With so many people participating, a lot good info can be obtained. Also, it makes it easier to identify areas that need attention if many people bring up the same points.

Was there anything said that would have hurt your feelings if you had been the designer? No

How would you deal with the comments that were made if you were the designer? Even though I may not agree with every comment, I would take everything said into consideration. It is always to separate yourself from your work. My rule of thumb is if I have to over explain a design, then clearly it not communicating the way it should and deserves to be reexamined.

What did you find interesting/important in the Podcast? 

When I’m not a student or running the Creative Department where I work, I teach graphic design to university students and online. I’m quite familiar with critiques and feedback since that comes with the territory. In spite of this experience, I did find the podcast interview with Adam Conner and Aaron Irizarry very interesting and did learn a some things that I hadn’t considered before:

• There is a difference between critique, feedback and a design review. Feedback is a gut reaction. Critique is more specific and is a dialogue. It focuses on how a design is or isn’t achieving certain goals to help the designer understand the impact of design decision. Design review is about signoff and approval.
• There 2 sides to a critique- giving and receiving
• Giving critiques is about trying to understand what the designer was trying to do, how they tried to do it, and if it’s working or maybe if they have more to do to get there.
• Receiving critique is about understanding the impact of the design decisions that a designer has made so far, and where they should focus efforts going forward.
• Different types of critiques:

o   Standalone (informal/ impromptu)-getting input from peers to see if the design is headed in the right direction.

o   Collaborative

• To have a good critiquing session, it is important to establish clear goals
• After a critique the designer should continue to work on the design giving consideration to the information obtained from the critique
• Good idea to review goals and objectives before starting a critique session

Do you think suggestions should be allowed? Personally, I think suggestions should be allowed only if the person suggesting gives a specific reason for it:

Suggestion: Changing the background color of a Spa Website from light gray to light green

Reason:  Consider trying a light green background in lieu of gray. While gray is neutral and stable, the color green is often associated with the feeling of freshness and renewal, communicating the spa experience to the intended audience).

 What rules should we agree to abide by in our critiques?

• Be constructive
• Be specific
•  Be respectful and professional at all times
• Do not be defensive
• Do not take the critique personally
• Be prepared to explain your design decisions work.
• Be prepared to explain your concept

List the questions that you think we should use when we do a Look and Feel Critique.

•  What is the focal point of the design?
• Does the design style seem appropriate for the stated goal or purpose?
• Does the concept match the content and intended audience?
• Is the site effective in engaging the audience?
• Is the website’s interface and navigation intuitive and effective?
• Does the site use hierarchy to organize content?
• Does the typographical choices reinforce the design theme and aesthetics?
• Does the typography feel appropriate in tone?
• Details: Is the use of these particular graphic elements consistent with the goals of the project? Why? Why not?
• Problem areas: What things in this solution are not as effective as they could be? Why do you think that?
• Appeal: Is this an effective and appealing design for the context it will live in? Why? Why not?

List the resources/website links that you used to arrive at your list.

• Questions for a Website Critique
• The 4 essentials of a design critique

1. What is a breakpoint? A break point is the window/device size at which a fluid the page as it collapses no longer looks good.

   How can you find them? By resizing the window of the page either physically or using a tool like resizer.

   What do you use them for? When you identify these points you can then begin to adjust the CSS to resize fonts and distribute the page

2. What tools/resources have you found to help you with finding breakpoints? Resizer

3. What is that cool thing Chris did with adding text content only at certain screen sizes? He used the CSS pseudo element “content”.

   What code was used and what are a couple of situation that you can imagine where you could do something like that?
   @media all and (max-width: 1000px) and (mid-width: 700px) {
   content: “Text that will be displayed ”; }

   This can be used to display text or a graphic using CSS instead of having to change the HTML at different screen sizes.

4. How do media queries work? With media queries you can tell the browser what to do if the browser window is narrower or wider. 

5. Find an article on media queries that you find informative on best practices for media queries and be ready to share it. What did you find useful about the article? The article had great tips particularly about using Sass to keep track of break points.

• 7 Habits of Highly Effective Media Queries
• ish. 2.0

The article should answer one or more of these kinds of questions:

• Where do you place media queries? You can place them in separate style sheets based on the media size and then link the style sheet(s) to the HTML page OR you can add the media queries at the end of the main style sheet
•  How many media queries should you have? Keep it simple. Don’t go overboard. Focus on the main break points.
• How can you find breakpoints? Let content determine this.
• How do you know what needs to change at smaller sizes? If text is too small or layout looks bad at a smaller size, you know you need to make adjustments.
• What are innovative uses for media queries? Showing /Hiding the main menu
  Cool tricks? Adding content using the pseudo element “content”. Things you’d never have thought of using them for? Something called conditional loading.
• Post a link to a site you’ve worked on that uses media queries, if you’ve done one:
  • http://webdev.jacineariasweb.com/my_portfolio/brewhaha_coffeeshop/index.html
  • http://prosurfacesolutions-beta.jacineariasweb.com/index.html

April 29 — HTML5 Boilerplate Chat

What does the HTML5 Boilerplate do for you? Boilerplate helps designers to get started with the new standard by offering a professional front-end template that allows you to create a fast, robust and adaptable site with a set of HTML5-ready features and elements.

Why would you want to use a boilerplate? It’s a good starting point. It’s HTML 5 ready but perfect for cross browser sites that work in older browsers.

Go to the 2nd and 3rd links I listed. What features does the boilerplate offer?

• It features a lean mobile friendly HTML template, optimized Google Analytics snippet; placeholder touch-device icon; and docs covering dozens of extra tips and tricks.
• It includes a guide to the default HTML, CSS and JavaScript as well as Apache settings for optimum site performance and crossdomain.xml (an intro to making use of crossdomain requests).
• It also includes Normalize.css v1 — a modern, HTML5-ready alternative to CSS resets  and jquery and modernizer.

What is Modernizr for? It  is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser

What do you think about the sites shown in the showcase? Some are better than others. 

What is a site that you might like to emulate or draw inspiration from there? New Haven Modern Architecture stood out to me because the design is clean, uncomplicated, and is structured much like a building with strong lines. The blue background on the home page emulates the blue sky in the featured images. There is some slight animation transitions on the home page but it is not over the top. The smooth transitions are a feature of HTML5

HTML5 Bollerplate- New Haven Modern Architecture Website

 What are some good/interesting things about Initializr? It includes <div> classes for header, main and footer containers, HTML 5 tags for article, header, section, footer and aside (the side bar). Jquery scripts at the end.

What might you use the HTML5 Boilerplate for? Just to give it a shot and see how it compares with the 1140 grid which is what I’ve been using.

How might your use the HTML5 Boilerplate in designing for WordPress? Not really sure but I might look for templates that are built with Boilerplate to see how they are structured.