Digital Scholarship Fellowship Coordinator
Design and Media
What is Design and Media?
- 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.
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."
Why do you think design is important?
Or maybe it's not important?
A Skeuomorphism is something that mimics design cues from objects in the real world which actually required those design features.
How do you create your own design and/or media?
Examples of tools for design and media?
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
"1986ChryslerLeBaronTownCountryStationWagon" by dave_7 - originally posted to Flickr as 1986 Chrysler LeBaron Town & Country Station Wagon. Licensed under CC BY 2.0 via Commons - https://commons.wikimedia.org/wiki/File:1986ChryslerLeBaronTownCountryStationWagon.jpg#/media/File:1986ChryslerLeBaronTownCountryStationWagon.jpg
Design and Media
By Digital Scholarship Fellows