Design and Media

Unit 5

What is Design and Media?

DEFINITION:

  • Design is the creation of an object, system, software, website, picture, painting, etc. 
  • Media is "tools used to store and deliver information or data."
  • Media can be for advertising, broadcasting, digital services, mass communication information, sound (recording), visuals, movies, and print, etc. (Wikipedia, "Media", 2015). 

 

 

"It’s impolite to judge a book by it’s cover, but unfortunately that rule is often broken when browsing the internet.

"When a new visitor arrives on your site, you have less than a second to convince them they’re in the right place.

 

-Imagebox Website

That being said, their initial impression is almost entirely informed visually".

"Great design supports powerful content,

                                                 aids in storytelling,

and is crafted with your target audience’s preferences in mind."

-Imagebox Website

Why do you think design is important?

Or maybe it's not important?

Skeuomorphisms!

Umm... Skeu-what?

A Skeuomorphism is something that mimics design cues from objects in the real world which actually required those design features.

Source

How do you create your own design and/or media?

Examples of tools for design and media?

Quicktime

Youtube video editor

Paint

Adobe Photoshop

Microsoft's Movie Maker

Vimeo

Preview (mac)

GooglePixlr

Google PicMonkey

Mac Pages/

Microsoft Word

Let's create our own designs and media!

1. Open your google email, and use pixlr, or if you have Photoshop, feel free to use that

2. Edit some images! Source QMH images from GitHub provided by Flickr Commons, Abby Corcoran, Lindsay Silver, and Quaker & Special Collections or ask me to invite you to edit Scattergood Images in Google Drive. 

3. Edit images (crop, brightness/contrast, select only a part of image).

4. Print images for wire framing session next week (library area). 

5. (Optional) Create a video of images using Quicktime (MAC) or Windows Movie Maker (PC).

Section 2: Wireframing

An essential part of web design, and web development.

What is Wireframing?

Basically: a visual sketch that represents the skeletal framework of a website (Source).

What is Wireframing? (cont)

Image Citation: "Profilewireframe" by http://www.flickr.com/people/doos/ - http://www.flickr.com/photos/doos/3931846833/. Licensed under CC BY 2.0 via Commons - https://commons.wikimedia.org/wiki/File:Profilewireframe.png#/media/File:Profilewireframe.png

Exercise: Make Some Wireframes

  • Draw out some wireframes for how you'd like some web pages for your project to look
  • Don't forget to include cues for functionality, such as: buttons, things that might move or slide, etc.!
  • Also, make multiple pages and say how those pages are connected (a menu bar would be helpful here!)

Wireframing the Home Page of QMH

Wireframing the Home Page of QMH-Final Product

See the Home Page Here

References

Made with Slides.com