typography
ux design
html / css
iOS / android
package
design
adobe creative cloud
ruby / php / sql
project
management
graphic design
javascript
Typography is a component of graphic design that examines the form, character, and arrangement of letters within text to aid in communicating a message. Typographic design helps set the tone and feeling of the message attached to its design.
Typography
Where?
Take a look at the Coca Cola or IBM logos, the words in a book, the text you’re reading right now! Typographic design exists wherever text, words, or letters are being employed, whether through intentional application or not.
Who?
Graphic designers, typographers, illustrators, and web designers apply these skills in their professional work.
Perhaps you have selected a font in a word processor recently. Guess what? You’ve begun to flex your typographic muscles!
Their Work: Class Poster Design Real World Designer: Paula Scher
Their Work: AIGA
User interface and user experience (UI and UX) design provide an intuitive and sensible experience for website or mobile app users. UI and UX design aims to maximize the user’s experience, by applying relevant visual elements and compositional techniques.
UX Design
Their Work: In-Class UX Website Design and Development
Where?
Have you ever been on a website and was able to find exactly what you’re looking for without thinking about it? Intuitive UX design will allow just that. Real world examples include well known websites such as Tumblr, or Apple.
Who?
Web developers of all kinds practice UI and UX design. Many opportunities to specialize within this field exist, such as professional UX Designers.
HTML and CSS are markup languages that work together to create what you see when you visit a web page on the internet. HTML and CSS provide structure for the layout of a web page, such as how a block of text and a picture interact together. HTML and CSS also define the visual styles of each element on the web page, such as text color, size, and font.
HTML and CSS markup languages form the foundation for any further website development.
HTML & CSS
Where?
Any time you view a website, you’re looking at the results of HTML and CSS markup, all the way from Google.com to your local restaurant’s website. HTML and CSS are implemented in varying ways to create the different looks and structures between these websites.
Who?
Web developers of all kinds use HTML and CSS markup languages; those who focus on these languages are called Front-End web developers.
<h1>This is the main heading for the web page</h1>
<p>This is where a paragraph of text goes</p>
<a href=”http://nicinteractive.media” target=”_blank”>This creates a link that goes to the home page of the IM Design + Development website. The _blank means it will open in a new tab.</a><!-- This is an HTML comment. Writing comments in this format is a way to leave notes without altering the coding that creates the web page. Comments are hidden from the user. Below is a link to a CSS stylesheet. This is how CSS styles are loaded onto the page. -->
<link rel=”stylesheet” src=”css/main.css”>
Below is a style tag. Contained with it are styles for the document.
<style>
/* This is a CSS comment. Below is what makes the h1 tag the color blue. */
h1 { color: blue; }
</style>
If you’re using Chrome or Firefox browsers, you can right-click this page and then click ‘Inspect’ to see these markup tags. Hidden in the HTML markup is a secret message. Can you find it?
Java is a language used for Android mobile devices, while Swift is a language employed for iOS mobile devices. Both Java and Swift languages and their integrated development environments are the foundation for any app you use on your iPhone or Android device.
Android / iOS
Where?
iPhone or Android mobile device apps that have been created with Swift or Java include WhatsApp, Angry Birds, and Spotify. Many web platforms have developed mobile app versions of their websites, including Facebook, Twitter, Skype, Google Maps, and, you guessed it - a lot more!
Who?
Mobile App developers utilize these tools to create apps for the app stores. Some developers specialize specifically in Java / Android or Swift / iOS. Java and Swift are often written alongside SQL to connect a website to a database, allowing for an interactive mobile experience.
Student Work: “Batter Up Baseball,” Class Portfolio Project
Student Work Description: Batter Up Baseball asks users to Test their skill by lining up the batter with the perfect hit to score points and move on to the next level. Users can spend points to get better gear to make their swings go further.
Package design is visual communication in a three dimensional space. Successfully designed packaging will ensure the product is visually enticing, suitable for shipping, and is effectively contained. Who uses it? Graphic designers of all varieties may either dabble, or specialize in the field of package design.
Package
Design
Their Work: Package Design Class Project
Where?
Anything from a cereal box to the envelope of a letter could be considered package design. It can be as simple as a candy wrapper created for Halloween, or as advanced and refined as the packaging for an Apple MacBook Laptop.
Who?
Graphic designers of all varieties may either dabble, or specialize in the field of package design.
Their Work: Awake Chocolate Re-branding and Package Design
Graphic design forms the foundation of visual communication. In order to visually represent an intended message, graphic design can include a range of visual media elements, from a basic dot, line, or other shape, to detailed iconography or photographic imagery.
Graphic Design
Where?
Take a look at the Coca Cola or IBM logos, the words in a book, the text you’re reading right now! Typographic design exists wherever text, words, or letters are being employed, whether through intentional application or not.
Who?
While graphic designers, photographers, website designers, illustrators, typographers, motion graphic designers and others use the principles of graphic design by trade, anyone who has created a document or sign of some kind would have begun to consider design elements.
Maybe you’ve created a poster for a school project? Written a resume? Prepared a powerpoint presentation? Each of these tasks incorporate graphic design.
Everywhere! Any time you look at a document, a poster, a cereal box, a label, a website, a mobile app... the list goes on. Each of these provides an example of graphic design elements and techniques being utilized, in various ways.
Their Work: In-Class Poster Design Real World Designer: Chip Kidd
Their Work: ChipKidd.com
PHP, Ruby, and SQL are coding languages that are hidden from the web browsing user. Although the PHP, Ruby, and SQL languages are not observed directly in the browser, they each play an important role in making a website interactive. PHP and/or Ruby unify the website’s database with the HTML, CSS, and JavaScript that create the website.
PHP / Ruby / SQL
Their Work: In-Class Ruby on Rails Project combined with In-Class User Experience Design Project
Where?
Have you ever clicked the like button on Facebook? Uploaded a file to Google Drive? Maybe you’ve made a tweet on Twitter? PHP and Ruby languages make these interactions possible, by accessing and managing information stored on the given website’s database.
Who?
Web developers who specialize in PHP, Ruby, and/or SQL languages are called Back-End web developers; other professions that may use these languages include Database Manager, Full-Stack developer, or WordPress Developer.
Their Work: A snippet of code from Social Sage
The Adobe Creative Cloud software includes essential tools like Illustrator, Photoshop, InDesign, and Dreamweaver. Whether used individually, or in conjunction with one another, Adobe software provides powerful tools for creating effective and diverse graphic and typographic visual communications in print and on the web.
Adobe
Creative Cloud
Their Work: Self Portrait Class Project
Where?
Have you seen a photograph that was manipulated to tell a story, different than its original meaning? That was likely manipulated using photoshop. Have you noticed a logo that looks just as good on a piece of stationery paper, as it does on a billboard? That can be done in Illustrator. Has a unique magazine layout caught your eye? Many print publications are designed using InDesign.
Who?
Graphic designers, print designers, photographers, web designers, illustrators, Front-End developers...the list goes on!
Their Work: Felipe Vargas on Behance
Building a website, developing a product, or organizing a campaign requires significant organization. Project management isn’t just about maintaining and organizing tasks within a project; project management also involves contributing skills to these projects in a collaborative team environment.
Project Management
Where?
Name any website design, advertising campaign, mobile app development, or package design project, and chances are high that a project management approach was used to develop it!
Who?
Project managers oversee a given project in its entirety, while freelance designers and/or developers may be hired to complete one component of a project for a design agency. Whether the chosen methodology be traditional or contemporary, professionals in the technology or design industry benefit from being well acquainted in the field of project management.
JavaScript is a programming language that allows for animating HTML and CSS, which enables a website to be visually interactive. More recently, JavaScript is being used as a markup language for server-side interaction with frameworks like Node.js.
JavaScript
Where?
Have you observed an animated picture or icon that fades in or out on a website? Perhaps you’ve experienced pictures that gradually appear as you scroll through a web page. Do you ever get annoyed by those pop-up advertisement screens? These are all examples of how JavaScript can work with HTML and CSS to create dynamic animations.
Who?
Many web developers use JavaScript. Those who use JavaScript with HTML and CSS are termed Front-End web developers, whereas those using something like Node.js are called Back-End web developers.
Manipulate JavaScript variables to change the animation:
var speed = 15
(Seconds to complete full rotation)
var size = 75%
("var" declares the variable for the compiler)