Week 16A

Today in class we critiqued our websites. Some of the feedback that I got was:

• the footer doesn't move with the body - I accidentally put padding on it instead of putting it at 100%
• increase my line spacing
• change the color of my links - by making them yellow some people might now feel that my headings that are also yellow might be links

Week 15 Outside of Class

This weekend I finished my website.

Each of the circles representing the different districts have a rollover state that show pictures of the two tributes from that district.

Week 15B

Today we had all class to work on our websites. This is what I got done.

Week 15 Outside Of Class

Outside of class I worked on my website. I worked on just getting pictures in and I'll stylize and put them in the right places later.

Week 15A

Today in class we started coding our websites. This is what I got done.

Week 14 Outside of Class

Over break I read Chapter 5 in Above the Fold. These are my notes:
Chapter 5 - Web Typography
WHY TYPE MATTERS:

• Typography, of all elements of design, can have the greatest effect on the success or failure of a piece of communication.
• This is because type carries the message, and the craftsmanship of the typography can either enhance of take away from the message
• The two opposing characteristics, which combine to attract a user and convey a message, are called readability and legibility.
• Readability refers to how well type can attract a reader.
• Readability can come from size, font usage, composition, color usage, abstraction, or anything that helps type - or, more specifically, the message - stand apart
• Legibility, on the other hand, references the ease with which a reader can gather a message, especially when it comes to long stretches of copy.
• The recognizability of individual characters in a font as well as type size, leading, letter spacing, line length - even color and backgrounds - play a role in how effectively legible type appears
• Readable or expressive typography can be important on the home page to grab the user's attention, define a unique brand characteristic, or alert the reader to a site feature or special offer
• Legible type is essential for article or blog text, and can make the difference in the success of a site that invites users to return to read long articles or posts

MEASURING TYPE:

• Type and typographic properties such as spacing are commonly measured in em units.
• An em unit is a square unit that represents the distance between baselines when type is set without line spacing or leading
• Most browsers default to 16-pixel type as a general rule

TYPES OF WEB TYPE:

• When it comes to rendering type on the Web, a designer has three primary options: Images of type, web-safe fonts, font replacements and embedding
• Using images to display type is a static method of rendering type - the type is rendered once by the designer or producer, and that image is distributed throughout the Web to be viewed by the user
• Using Web-safe fonts is a means of displaying content as live text, which is rendered by the user's browser
• Various means of embedded fonts - which give a designer the ability to select a wide range of typefaces while still rendering live text - have recently emerged
• The reason selecting a method with which to display type is so critical to Web design is due to the fact that type delivers content and content drives the success of most web sites
• Content, however, must be dressed with some form of style or branding in order to be truly effective for the web site's owner

IMAGE TYPE:

• Images of type offer a web designer the most control over the typography on a web page
• All-image Web sites, where the type is rendered as a jpg, png, or gif image, are extremely limited in their ability to be indexed by search engines, and thus limited in their ability to be found by users
• The best approach for using images as type on a web site is to limit the use to particular areas of display type where the images can have the most visual impact
• The bottom line is that images of type are a great way to add personality or brand recognition to a web site, but should be used extremely sparingly in order to maintain the search ability of a site

WEB-SAFE TYPE:

• A font is a complete set of characters that makes up a single size, style, and weight of a typeface.
• The term typeface refers to the unique styling applied to a set of glyphs, including an alphabet of letters and ligatures, numerals, and punctuation marks
• While web-safe fonts vary slightly in appearance from Mac to PC - and their display varies from browser to browser - the general appearance is consistent enough that a designer can reasonably predict the look of the finished design when viewed by the user
• Designers define a web-safe font using what is called a FONT STACK
• Font stacks are prioritized lists of fonts, defined in the CSS font-family attribute, that the browser will cycle through until if finds a font that is installed on the user's system
• Font stacks list fonts in order of the designer's preference: preferred, alternate, common, generic
• Doing more with less is an essential skill for a web designer

FONT REPLACEMENT & EMBEDDING:

• Font replacement is emerging as a way to give designers the most typographic flexibility with their design, while still being able to take advantage of the search ability of live text
• There are three primary methods of embedding or replacing fonts within a web layout: Flash- and image-based replacement methods like sIFR; the @font-face css command; or JavaScript replacement like Cufon or TypeKit
• sIFR replaces a specific tag, like an <H1> tag for example, with a swf file containing rendering information for a specific font
• This method worked but it requires the end user to have the Flash plugin installed and there was some lag between when the page loaded and when the replacement font appeared
• The @font-face CSS command is a two-step process that involves first defining a path to a font on the server
• Once the path to the front has been identified, it's simply a matter of calling the font when defining other tags
• Fonts represent valuable intellectual property and this method leaves some question as to the end users' ability to reuse the font without paying for it
• Another JavaScript-based method of font replacement is called Cufon
• Cufon works by converting font information into VML (Vector Markup Language), which is rendered and displayed on the user's computer
• This proprietary JavaScript function prevents the end user from ever downloading the font, avoiding issues of redistribution

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.

Week 10B

Today in class we listened to a lecture on Cognitive Load Theory, Miller's Magic Number 7, Sequence Mapping, Hick's Law, Fitt's Law, and Chunking.

Then we spent the rest of class refreshing on coding.

Week 10 Outside of Class

Outside of class I read Design Constraints, Design Patterns, Display Factors, Grid Systems, Page Fold, and Scanning vs. Reading in IID.

Design Constraints:

• Design constraints are based on limitations of the boundary of the design system
• Design components such as weight, dimensions, energy output, materials, cost, and function all factor into the theory of design constraints

Design Patterns:

• Design patterns in interactive design go beyond style and are more than just visual repetition
• Design patterns can appear in all stages of the design process, strategy/user experience, visual arrangement/design and functionality/behavior

Display Factors:

• Display devices are measured from one corner of the device to the opposite catty-corner

Grid Systems:

• A grid is an underlining structure that supports a design based on alignments, object relationships and grid-based components
• If used correctly, a grid will enhance the content to make the information reflect the designer's intention and goals

Page Fold:

• The content that is seen by the viewer is known as "above the fold" and tends to have more importance, whereas content below the fold is given secondary awareness

Scanning vs. Reading:

• Studies have shown that users tend not to intently read a Web page as they would a printed book; they merely scan the page
• Sacrifices are made because if the option they choose does not work, they can go back a page and try again with no real negative consequences

Week 10A

Today in class we were given a lecture on coding and what makes up a website. Then we experimented and played around in Komodo to create a small webpage.

Then we were introduced to our next project. The rest of class we had time to brainstorm what we wanted to do for the next project. I decided that I want to do the CSS Zen Garden and possibly do a Hunger Games (book/movie) theme.

Week 9 Outside of Class

This weekend I read Chapter 1 of Above the Fold. Here are my notes:
Chapter 1 - Understanding Web Design:
THIS IS THE INTERNET

• The internet is a series of interconnected computers called servers, that enables companies, brands, organizations, governments, religious groups, and individuals to share information on a worldwide scale in real time
• The web is only a portion of the internet
• When a user types a URL into the web browser, the computer transmits a signal to a server, and the server responds by sending bits of information back to the computer
• the computer then takes that information and configures the files based on two things: the markup and styles that come from the designer/developer, and the preferences and limitations of the Web browser and computer itself
• The following factors influence exactly how a page appears on a screen:
• Color Depth
• the number of colors that a monitor is able to display
• most current computers/monitors can display millions of colors
• monitors could only display 256 colors - meaning web designers could only use 216 colors called the web-safe palette
• Monitor Resolution
• the number of pixels when measured horizontally and vertically on a monitor
• most monitors today are 1024 x 768 or higher
• most sites these days are optimized for a 1024 pixel width and are designed in a size range of 975 and 990 pixels wide
• Operating System
• the main difference in operating systems is their ability to anti-alias type (anti-alias type looks smoother because the system creates a blur around the characters)
• non-anti-aliased type can look jagged or "pixelated"
• Browser Type
• a web browser is an application whose function is to receive layout and styling information from a host and display that information on screen

DESIGNING FOR THE WEB

• the more things that appear to have been done on purpose, the more effective a design is likely to be
• web designers must be tolerant of a range of color matching as opposed to a need for exactness that can be achieved in print
• there is no page height or width on the web
• widows are impossible to predict
• the use of imagery on the web can be restricted by a target audience's tolerance for download time
• web designers need to have a contingency plan - a backup plan that allows for user variables

GOOD WEB DESIGN IS AN EXPERIENCE

• good web design goes well beyond evidence of a plan - good web design is an experience for the user

I also read Activating Composition Space, Entry Point, Feedback, and Minimum Usable Design in IID

ACTIVATING COMPOSITIONAL SPACE

• Activating compositional space is the idea of taking white space and having it create a positive flow with the surrounding content
• Activating compositional space will assist in determining hierarchy, visual rest and reading gravity

ENTRY POINT

• is important for first-time users because there may only be a few seconds to entice them to use a digital interface or enter a web site
• entry point designs should have a clear hierarchy, and the decision choices should direct the user to a path within the content

FEEDBACK

• when a user has indicated an action of completed a task, the system or product will respond to the user to reinforce that action has happened
• feedback can be communicated in various forms, such as an auditory sound, physical action, verbal response, visual cue or a combination

MINIMUM USABLE DESIGN

• minimum usable design focuses on the web design process instead of a physical product
• when a design in usable for a large part (say 50%) of the intended audience without actually being complete

Week 9B

Today in class we finished our Design Brief presentations. Then we were given a lecture on web design and some of the constraints of print and web design.

Week 9A

Today in class we critiqued our design briefs. We each presented our briefs for 5 minutes and then critiqued each others.

Week 8 Outside of Class

This weekend I finished my design brief.