SoCal.

This was just a fun creative project that I did on my own time. 🙂

CD Cover Design

This was an assignment for Multimedia 133. We were to design a CD cover using  text, and then print in out and make a physical CD  case. Vector images were not allowed, so I pen traced some basic shapes. The back cover vectors were fine. This was a lot more challenging than I thought, especially using just text, and really wasn’t sure what I would design. Then I though, what better chance to use some old vintage fonts of the 1950’s that I love, and who is better than Frank Sinatra? So, this is my tribute to the late, great, Chairman of the Board. (Fly me to the moon, Frank;)

(note: If anyone is really looking, track #20  just above FRANK looks crooked, but is really just an illusion because of the diagonal lines. I just noticed this, but myself and InDesign can assure you that it is not. 😉

ProTools – Total Recall 2012

ProTools Sound Design Final Project

This is a link to my Sound Design class final project (click the above link). We were to take an existing piece of video, strip the sound and create our own soundtrack. It was a rewarding experience, and love the creativity of sound design. I’m looking forward to more projects like this, and our Video class next semester.

(Also an interesting side note: I picked this particular video clip because I spent 3 days on the Total Recall 2012 set filming as a background actor in Toronto last year. For a few days I actually rubbed shoulders with Colin Farrell,  Jessica Biel, and the biggest budget Hollywood production in ON. – rumoured at 200 million.  I didn’t end up with any ‘facetime’ in the movie, but if I freeze it, I can show you the back of my head lol. It was a great experience and would love to do it again. 🙂

Interactivity UI Design Principles

DMA 188 – Interactivity

Mathew R. Graham

Aida Aguilar

Aug. 08/2012

User Interface Principles of Design Assignment

1 – The Structure Principle:

One of the 6 fundamental design principles required for the design of user interfaces. The interface should communicate the information in a direct and efficient manner. There should not be any ambiguity in the function of the interface, and it should organize information in grouping, keeping similar things together and unlike things apart. The design structure should focus on also keeping the visual themes organized, just as the information is structured.

3 Key techniques that support this principle:

1. Consistency
2. Word your messages and labels effectively
3. Don’t create busy interfaces.

Example of User Interface: Adobe Photoshop.

Adobe’s Photoshop program is a ‘Structure’ example of the User-Interface (UI) Principles of Design.  The rigid design of Adobe’s user-interface demonstrates the key UI techniques of: consistency, label effectively, and don’t create busy interfaces. The consistency of Photoshop’s functions never changes throughout navigation. The buttons and tools always stay in the same place and never move when clicked on, creating a clear and concise framework.  The colours that Photoshop uses for its design are quite simple and clean, it rarely varies from 2-3 main colours. The labeling and wording of messages in Photoshop is just as clear, also maintaining the consistency.  The menu headings and drop-down buttons always keep the same wording, allowing the user to effectively use the interface. There is no created confusion from badly worded or abbreviated messages. The only hesitation that the use might have may be the unfamiliarity of the technical function and tools of the program. Lastly, Photoshop has clearly understood the key design technique of ‘not creating busy interfaces’.  Since studies have shown that that overall design of the UI should not exceed 40%, Adobe Photoshop demonstrates that they have done their homework. By not overcrowding the UI with unnecessary information or widgets they allow the user to enjoy a more open experience of using their program.

            2 – The Simplicity Principle:

The Simplicity Principle is relatively simple. Repetitive, common tasks should be easy for the user to do. It should communicate it’s function clearly so that the user may easily understand. Providing hot key and shortcuts is essential form of simplicity, so that the user can navigate easier and save time.

3 Key techniques:

1. Word your messages and labels effectively.
2. Set standards.
3. Your design should be intuitive.

Example of Simplicity: Adobe Photoshop

The drop down menus in Adobe Photoshop, are a good example of the Simplicity Principle. They provide the user with a quick and easy function to access information. The quick command hot key shortcuts in Photoshop also give the user a higher level of usability. This allows the user to focus their attention on the task at hand, rather than getting bogged down with tool functions that are hard to understand and complicated to navigate. The hot key functions are what enables Photoshop to become time-effective, without them productivity would be lost.

3 – The Feedback Principle:

The Feedback Principle informs the user of the consequence of their actions. The result of the user’s input is communicated back to them in a clear message. This informs them of any changes they have made, or errors that have resulted from their action.

3 Key techniques:

1. Explain the rules.
2. Expect your users to make mistakes.
3. Your design should be intuitive.

Example of Feedback: Windows ‘Yes/No’ messages.

The messages the user received when using the Windows OS, are an example of the Feedback Principle.  Windows constantly bombards the user with ‘Are you sure’, ‘Yes/No’, ‘Allow/Deny’ type questions. Although exemplifying the principle, the messages are almost ineffective as they are counter-productive; too much feedback distracts the user from their task in this particular case. Windows could also be much more usable without all of the ‘allow/deny’ questions that arise when programs are initiated, as well as ‘leave the page/stay on the page.’

      4 – The Tolerance Principle:

The Tolerance Principle says that the design of the UI should be understanding and reasonable of the users actions. It should interpret incorrect actions, and recommend a suitable substitute. It should allow the user to perform easier tasks by being tolerant and allowing variable input, and allow the user to go back and correct their mistakes.

3 Key techniques:

1. Consistency.
2. Set standards.
3. Expect your users to make mistakes.

Example of Tolerance: Advanced Search

An example of the Tolerance Principle is the ‘Advanced Search’ function. It allows the user to vary the input of their search. It also recommends search results from the users input. This enables the user to get better results from their actions, by not ending in error or  ‘no result’. By interpreting the search results to suggest the correct spelling or other alternatives empowers the user and gives them a higher degree of control. Boolean search strings such as ‘and/or/not’ give the user an advanced method of searching and more tolerance to the search.

      5 – The Reuse Principle: 

The Reuse Principle takes elements and redistributes them to create a theme. This is helpful in branding by maintaining consistency and promoting clear design. It also useful by ensuring that functionality remains the same across different applications.

3 Key techniques:

1. Consistency.
2. Set standards.
3. Your design should be intuitive.

Example of Reuse: Adobe Illustrator

The Reuse Principle of Adobe Illustrator demonstrates this across all of its Adobe programs. By keeping the key design elements and functions the same in its different applications, it allows greater usability. The core menu items are the same, as well as the basic functionality, colours and theme. This provides the user in saving time with regards to having to learn new navigation of menu items. While not all the functions of Adobe’s programs transfer into the next (some tools function a little differently and should be noted to their fault), the basic elements are reused. It is troubling though, as to why some of their tools function differently in different programs.

6 – Visibility Principle

The Visibility Principle is very similar to the Simplicity Principle. The visual information provided should be very clear and simple, and not overwhelming to the user. Menu items and items should be very easily seen and understood. The UI should also not overwhelm the user with too many visual options.

3 Key techniques:

1. Consistency.
2. Don’t create busy interfaces.
3. Word your messages and labels effectively.

 

 

Example of Visibility: iPad

The iPad demonstrates the Visibility Principle. The visual consistency of the buttons and menu functions stay the same screen to screen. The information is very well organized, and not overwhelming for the user to look at. There are a certain number of limited options, which is very easy to understand what functions do what. The graphics are very simple, with simple symbols to represent the function.  It is a very clean graphic user interface (GUI), which is not overcrowded with too much information, and is effectively labeled.

Photoshop Final Assignment

 

 

Our Photoshop final assignment was to make make ourselves look a certain way using masking layers. This wasn’t done with the magic wand tool, and copy/pasting. We could be old, young, fat, thin, zombies, vampires, whatever you choose. So I could finally fulfill my fantasy of becoming a robot. I was going for more of the cyborg look, but was having a hard time trying to find the right picture to mask with. And of course, the Terminator was just right. Mind you this was my first time doing this, and I kind of look like a pirate robot, so all I can say is ‘Yarrrrrrr… are ye John Conor?’ 😉