Week 14A

Today in class we created a logo for the english department. This was the logo that I created:

The rest of class we critiqued our websites. Some of the feedback that I got was:

• maybe add color to the seals
• have the seals flip - revealing either a tribute or something from that district
• add the bow and arrow back into the design
• make the section of "Select A Design" smaller

IIDC Conference Write-Up

I think that the conference went very well. I was part of the registration team and we had no problems at all on the day of the event. We had four people at the registration table to guarantee that no person would have to wait in a line to register. We had some people show up that did not register but we had enough open seats that all we had to do was write their name down and let them in.

I enjoyed listening to each of the speakers. I liked how Josh added humor into his talk and didn't keep it extremely serious. However, I would have liked to hear him talk more about projects that he really enjoyed instead of ones that he did not like - and work that he wasn't proud of.

I really liked how Justin responded when asked the question, "What trait should designers have other than the ability to design?" Justin responded by saying, "Be able to articulate why you are different and why you are the better person for the job." This answer is a great answer and I feel can really help me in the future when going on job interviews.

Aaron's speech was a little boring to me at times because he was talking a lot about coding terms - which I wasn't really familiar with. However, I really liked how he talked about how he becomes inspired and his process of finding inspiration. I thought his cardboard bed was fascinating.

The one thing that really stuck with me from Bobby's talk was the story of the plumber. It cost $200 to tighten a nut - $5 to actually tighten it - $195 to know which nut to tighten. He told us that he wants all of us to be the $200 nut tightener. I thought that was a really great analogy. That almost everybody can design something - but it takes knowledge to know how to design it correctly. I also really liked Bobby's panel answer when he said to never take/decline your first job because of the money. At that point, you don't know what you will want, so don't decline a job because you feel you aren't getting paid enough - at least it's a job.

Week 13 Outside of Class

This weekend I finished my Photoshop mock-up.

I really like how this idea turned out. I went with a two column grid in the body of the website because I wanted the focus to be on the seals and the content next to the seals. I did not want to add the "Select A Design" section beside in a sidebar because I felt it might become too cluttered.

This screenshot shows how links will look when hovered over. Links will change color and develop an underline in the hover state.

I also read Chapter 4 in Above the Fold. Here are my notes:

Chapter 4 - The Elements of Web Design

•  Creating a design system so that dissimilar types of content appear to work together is what graphic designers have been doing for centuries, and web design is no different
• Design is about more than simply organizing information, however; it's about making something distinctive and memorable

WEB DESIGN STYLE

• A design style is an attempt at connecting with a user's sensibilities and a basic need to relate to things
• The elements of a design style include color, texture, typography, and imagery use
• In all forms of design, a style comes primarily from two areas: the trends of the time - what's fashionable; and the technology that's available to create a piece of design

COLOR

• More than any other design element, color has the ability to guide, direct, and persuade a user
• Color can appeal to a user's emotions by setting a mood or a tone for a piece of design
• Color has three main properties: hue - which is commonly known as the color; value - which is the darkness or lightness; and saturation - which is the vibrancy of a color

TEXTURE

• Adding texture to a web design gives the user sense of a tactile experience and helps connect him or her to the content of the page

IMAGERY & ICONOGRAPHY

• For web designers, the use of images or iconography can mean replacing wordy descriptions with single images, making a layout easier for a user to quickly get information from
• Imagery should be deliberate and add either to the branding or the message of the page

SCALE

• Contrast of size or scale is one way designers can add a sense of drama to a design
• Scale is a relative design element, so in order to achieve a dynamic feeling of scale, small elements must be included in the layout for comparison's sake
• Large design elements that break out of borders or even bleed off the page also heighten the sense of scale

DEPTH & DIMENSION

• From overlapping design elements, to adding gradient color and shadows, to creating three-dimensional elements, adding depth to a web page can help add visual interest and draw a user into a design

ANIMATION

• Animation is a tool used by digital designers to layer information, create a sequence of information, or simply surprise and delight the user
• Web design best practices dictate that the designer should always give the user the ability to pause a large animation, or, if an animation is looping, to cycle for no more than three cycles

VARIABILITY

• The speed at which a web designer can apply changes, combined with the need to continually refresh the look of a site, gives web designers the ability to vary elements of a design based on things like sections of the site or specific events - or randomly
• The best way to keep a site fresh is by updating the content

Week 13B

Today we had in class work time to work on our Photoshop mock-ups. I was told to change my idea and go back to the sketching stage. The first thing that came to my mind I liked so much that I decided to go with it for my real website.

It's not a very detailed sketch just because I saw it very detailed in my head once I thought of it. Instead of using the mocking jay and bow symbols that I was using in my last idea, I decided to focus just on the districts for this idea. Each section would have a district seal next to it. My topic is still Hunger Games but instead of using symbols from specific books, I'm using the district seals, which are a part of all three books.

Week 13A

Today in class we talked about the conference and what each of us liked/learned from it. Then we had a mini critique of our Photoshop website mock-ups. My group told me to change my header and footer - which I completely agree with. Then the rest of class we had time to work. 

The header is still in progress. I like it better than my old header but still feel like it needs something else. 

Week 12 Outside of Class

This weekend I read Chapter 3 in Above The Fold. These are my notes.
Chapter 3 - Web Design Unity
ORGANIZATION AND HIERARCHY

• Visual hierarchy is the sequencing of elements within a design
• Almost every type of information can be broken down into three or four levels of importance - more than that makes contrasting the difference between the levels difficult
• To create hierarchy, a designer must first create a system
• A system is created by logically grouping the elements of a design, either through meaning or function, and forming visual relationships between them.
• An effective design system takes precedence over the individual elements so that the user perceives a cohesive unit

WHITE SPACE

• Deliberately constructed white space, not unconsidered or empty space, is often overlooked as an element of web design
• Space is essentially for creating relationships that form systems that lead to hierarchy
• The interplay between the objects of a design and the background is called the figure-ground relationship
• White space design elements include:
• Margins - area surrounding a design
• Gutters - space between columns of a grid
• Padding - area around an element contained by a border
• Line Spacing - or leading
• Paragraph spacing
• White space is also essential for making a layout scannable, a critical aspect to web design

THE GESTALT PRINCIPLES OF PERCEPTION

• "The whole is greater than the sum of the parts"
• These principles refer to the mind's ability to group elements based on one of the following relationships:
• Similarity - mind groups elements that have a unique visual relationship (2 rows of squares, 2 rows of circles)
• Proximity - grouping of elements that are close to one another
• Closure - grouping of elements that complete a larger unit (squares that form an incomplete square - we still see a square)
• Continuance - grouping of elements that complete a pattern or progression (squares form an incomplete line)

CONTAINMENT

• Borders, lines, and boxes can be helpful in defining the space and containing elements within sub-groups

GRIDS

• Grids not only organize the elements of a design, they organize the space within a design
• To create a fixed-width grid for the web, a designer must first determine the width of the design, which is determined by the target user's monitor resolution
• Most sites are still optimized for 1024 x 768 pixels, therefore most web grids are between 950 and 990 pixels wide - they are about 50 pixels less to account for scroll bars and other browser elements
• Once width has been determined, a designer decides how many columns are needed
• Generally, three is too limiting, however, too many columns can make recognizing relationships difficult
• The column width for a grid is determined by the overall width divided by the number of columns
• Finally, gutters (space between columns) are added, providing separation between the elements in each column
• Fixed-width (Floating centered; fixed left) - width of columns never change - they float either to the left or in the center
• Variable width - each column expands proportionately with the width of the browser frame
• Combination of Variable and Fixed width - as the browser window expands, only one column width expands with it - some expand, some don't

THE BASELINE GRID

• A baseline grid is a horizontal grid system that exactly aligns the baselines of all the text on a page, regardless of size or style
• A web designer starts by choosing a type size for the majority of the text on the page
• To create the appearance of a baseline grid, all other measurements, including the margin spacing, display type size, etc., should be multiples of the line height

MODULARITY

• For a web designer, modularity means creating reusable or modular design assets that fit within the established grid system and get reused throughout a site
• Modularity can also refer to the necessary design flexibility required in web design

Week 12B

Today in class we spent the beginning of class talking about the conference and doing a run-through. The rest of class we had in class work time. This is what I got done.

Week 12 Outside of Class

Outside of class I read www.photoshopetiquette.com. It was a nice quick read but had a lot of helpful tips in it. Tips in the categories of: Files, Layers, Images, Type, Effects, Practices, QA, and Exporting.

I also read Chapter 2 in Above the Fold. These are my notes:
Chapter 2: Anatomy of a Webpage
Form and Function of Web Design:

• Web design, as with any other form of design, requires the designer understands the end user's habits, the context in which the work is received and the necessary function of the end result
• Structural conventions that have emerged are: a page header; persistent navigation; content areas and sidebars; footer navigation; and often a background treatment
• THE NATURE OF HOW THE PAGES ARE VIEWED:
• The natural position for important information would be the upper left of a web page
• Web users skim a page for key points
• BORROWED CONVENTIONS:
• Elements from print design were converted to Web design - design elements like headers, feature areas, body text, and sidebars all come directly from age-old newspaper design standards
• USER EXPECTATIONS:
• Sites that want to attract the masses, need to appeal to the lowest common denominator in terms of one's ability to use technology
• SEARCH ENGINE OPTIMIZATION (SEO)
• Having a high search engine rank is critical to a company's online success - a higher rank on a list of search results means more traffic
• Some design factors that influence the search engine optimization of a page include: text links in the main navigation; multiple keyword-rich text links throughout the page; limited use of images, especially images of text, since search engines cannot get content from images; bolded subhead copy styled with the <H> tags; and important content placed above the fold - the higher the better
• ADVERTISING STANDARDS:
• The Interactive Advertising Bureau (IAB) sets forth rules that govern the size, shape, and file weight (among other things) for advertising assets.
• Web designers must accommodate banners that are 300 x 250 pixels (big box), 180 x 600 pixels (skyscraper), and/or 728 x 90 pixels (leaderboard), among others
• Web designers satisfy both sides (enough ads above the fold without overdoing it) by establishing a structure that flows with the required sizes of the ads - a 300 pixel-wide sidebar will fit a big box ad without any dead space around it
• The duality of form and function is a universal design concept; however, most new web designers aren't as aware as they should be of the technical and functional implications behind the design decisions they make
• BEYOND CONVENTIONAL:
• While theme-based web design makes having a web site easy and affordable, the concept has the potential to erode the value of what web designers do - at worst, it turns design and creativity into a commodity and homogenizes the look of the web

Header

• The header of a web page is one area that remains relatively consistent throughout a web site.
• Headers establish the brand look and feel for a site and often will present the user with a call to action - search, buy, register, etc.
• The header often contains the main navigation for a site

Feature Area

• One indication of effective design is a clearly defined hierarchy of information.
• To achieve this, designers use a focal point - an area in the composition that is perceived before all others and serves as an entry point into the layout
• In web design this is often the main feature area

Body/Content

• The body or content of a web site is where users spend most of their time
• A web page can be any height; therefore it's important to break up long stretches of content with white space and subheadings
• In addition to not having a height limit, web pages also don't have a limit to how wide they can be
• Web designers have two options for addressing the problem of page width variability
• 1.) Most current sites have a fixed width frame or boundary, whereas the content is confined to a box with a set size that floats in the browser window as it expands and contracts
• 2.) The second option is to have variable-width columns (the line length changes as the browser is expanded or contracted)
• Typographically, the optimal line length for ideal legibility is no more than two to two and a half alphabets - 52 to 65 characters.

Sidebar

• The sidebar of a web page contains secondary information that either supports the main content of the page or directs users to related content through the use of submenus and links
• As with the header, the design of a sidebar should blend in with the look of the site as not to visually overshadow the content of the page, helping to create an overall feel for the page

Footer

• The footer has emerged over recent years as a critical part of web design, performing tasks for both the user and search engine optimization
• Over time, web page footers have grown to resemble a mini site map, with links to each of the main pages of the site

Background

• Today, web page backgrounds are used in more sophisticated ways to compliment the content of the page
• Backgrounds can be used to create depth or dimension, add richness with texture and color to a page, or even expand the content beyond the borders of the page
• There is some debate between web designers and usability experts regarding the use of dark background and light text
• more experts believe that it's more difficult to read light text that's reversed out of a dark background

Week 12A

Today in class we went over the conference and what needs to be done before wednesday. For next class we have to have all the signs for McComsey printed out.

Then we critiqued some peoples' element collages and then we had the rest of class to work on putting a prototype into Photoshop.

Week 11B

Today in class I worked on my element collage. I added a background and a header and footer.

Week 11A

Today in class I created 3 different sketches of what my website could look like.

My color scheme is black, yellow, red, white, and blue. The background is mostly all black. The three designs just show different places to put the sidebar, content, and main bar.

Week 10 Outside of Class

This weekend I read about Style Tiles and Element Collages. These are my notes.
Style Tiles:

• Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.
• How to create a style tile
• Step 1 - Listen
• Have a design kickoff meeting
• Ask questions
• Step 2 - Interpret
• Break down client feedback
• Step 3 - Define a visual language
• Step 4 - Iterate

Element Collages:

• That particular phrase creates an expectation that what we’re looking at isn’t a final design but rather an assembly of disparate pieces without specific logic or order.

Then I completed my element collage.

I wasn't exactly sure what all needed to be put into the collage. The article was not very clear. So my collage pretty much shows typefaces, color scheme, and symbols that will be used in my website.