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.

Week 8B

Today in class we did a small round robin critique of our app interfaces. Most of the feedback that I got was to change the grey background because it felt disconnected. Also, some people said that some of the text was hard to read - so I have to play around with that. The rest of class we had time in class to work on our design briefs.

I went back and changed all of my matrices to make them more connected with my app and design brief. I changed the typeface and colors.

I also changed my persona to match my color scheme too.

Week 7 Outside of Class

Over Fall break I finished my app pages.

I changed these first two pages because I felt the originals (the blue and yellow buttons) did not fit together with the rest of the app. I felt that they looked like two different apps instead of one. So I changed them from solid colors to pictures - since pictures are used in the majority of the app.

I also updated my wireframes.

Week 7B

Today in class we had in class work time to work on our design interfaces. I tweaked my first two pages and started on my third.

I did not like the way my first two pages looked. I changed the buttons because I felt they didn't look like buttons.

Zurb Conference

On Thursday night I went to the Zurb conference with speaker Matt Kelly. I found his talk very interesting. I really enjoyed his introduction when he asked all of us to go to the website that he projected. Then he asked which animal each of us was seeing on our screens. I really liked how he used that demonstration to show that there are many different ways to view content – on a mobile phone (with many different sizes and resolutions), on a tablet, or on a desktop/laptop screen.

I found it very interesting that there are 10 mobile devices for every one person on Earth – that means there are more mobile devices present than people. I did not know that it was this big of a number.

He explained what responsive design was and what works and doesn’t work about it. He also talked about what’s great and not great about it.

Then he went on to talk about a case study and the process that his team went through. The process comprised of: Define, Ideate, Prototype, Build, and Analyze.

What I really enjoyed about his talk was comparing what he was talking about to what we are doing in class. He mentioned Mobile First, which we are reading for class. And he talked about wireframes which we are creating in our Intro to Experience class.

Week 7 Outside of Class

Outside of class I added another 5 pages to my design brief.

I also tweaked my original tribe questions page.

Week 7A

Today in class we talked about the Zurb conference. Then we looked over Kira's wireframes and design brief. Then we had the rest of class to work on our design interfaces. This is what I got done today.

Week 6 Outside of Class

This weekend I finished my wireframes.

I also completed a wireframe sitemap to clarify which pages you would be taken to when clicked on each area.

I also tweaked my app icon.

The left corner of the check mark looked a little weird so I did my best to try and fix it.

I also worked on the first 8 pages of my design brief.

I also watched the video "How to Prototype an Interactive iPhone App in 19 Minutes." These are my notes:

• Command + Shift + M makes a new screen
• Command and - decreases the size of your text
• Group an object is Command + G
• Command + D duplicates a slide
• To make it interactive, you should add the hyperlinks by stating which page number it should take you to when you click on something
• You can make the "hit surface bigger" by using a rectangle and linking it to the other page
• By adding hyperlinks to the master slides - it adds the link to all the slides
• You can also add animations to your slides