Session Three

Agenda

Office Hours:

  • Kerrey Building: M 6-7pm, L106
  • Skype: Thursdays, 8-9pm, handle: monstressme
  • I am available via Skype by appointment throughout the week

Go over sitemaps and wireframes

How to connect your research to your design:

  • Color
  • Typography
  • Imagery
  • Iconography
  • Functionality
  • Rough Sketches

Rough Pencil Sketches of Your Site

Once you have some design decisions made, you can start to sketch, but not on a computer. No! Drop the mouse!

No matter how well or badly you draw, you really need to learn to sketch. You have to be always ready to articulate ideas in as many ways as possible for team mates, clients, and the link.

Start with thumbnails:

These can be complete chicken scratch, really work things out, dash off ideas. Work out interior pages, work out all kinds of stuff, but be open and ready to throw it all away, the key is to let it flow and not get attached to anything. Your first idea is rarely your best.

A sample of thumbnail sketches:

15183

Begin rough full-size pencil sketches of your project’s homepage. Take pictures of these and turn them in so we can discuss what you are thinking of developing.

mbsi-website-sketch

wireframe-sketch-07

Some things to consider:

  • These are rough sketches. Don’t worry about them being perfect, make sure they make sense to you.
  • Start with really rough ones, then refine them at least once. Your first go is not the best one.
  • Send photos of your sketches, or scans.

Here is a great article for you to read, I honestly could not top this one at all:

Planning Your Web Design with Sketches

Initial Style Guide

Choose your color scheme, your main type choices, and iconography (if you think you might choose to use them) and put together your initial style sheet. If you are developing a logo and such for your site, be sure to include that, knowing that of course it will keep developing throughout the semester. Fear not, this is just a rough draft, you will absolutely redo this as you move along.

Here are two very polished style guides that you can use to develop yours:

lisa-graphic-stylesheetmargrethe-stylesheet

 

 

Put your choices together in a way that starts to hint at the styling you are thinking of for your site and send me a one-page PDF. Also, include links to 2-3 sites which really help you explain any special functionality you want to include (motion, etc.).

Color:

You need to really examine the themes and feelings you hope to inspire. These are the beginnings of your visual design. Here are some great design tools for finding a color scheme. You need to think about your main colors and how much of each will be called into play.

How many colors should you use?

This is a hugely debatable question, but a good number of designers recommend using only 3 main colors (not including shades of those colors, so fear not, you can have a complex palette) on your website. The more colors you use, the harder it becomes to keep them all in harmony and create a balanced, consistent look for your site.

As a starting point, you could try following the 60 – 30 – 10 Rule, which has been used by interior and fashion designers for many years and works equally well in web design.

The rule specifies that you should pick three different colors and use them in ratios of 60%, 30% and 10% respectively.

  • The 60% will be the primary color of your site and set the overall tone of your design.
  • The 30% should contrast with the 60% to create a visually striking effect.
  • The 10% is an ‘accent color’, which should complement either your primary or secondary color.

In conventional design wisdom, it’s safer to make either the 60% or 30% a ‘neutral’ color (white, gray, beige, black and so on). This gives you the maximum number of options when choosing your other two colors, because neutral elements will generally “go with anything”.

Shades and tones for greater variety

Remember also that you have a certain amount of room to move within each color. In many cases, you will need to diversify your palette beyond your three basic elements. Rather than add a fourth and fifth color to your site and risk spoiling the design, try different shades and tones of your existing colors instead.

By lightening or darkening tones in certain places, you can create distinction without upsetting your harmonious three color balance.

Typography:

I am sending you to 3 very nice sources for free web-ready fonts:

I try not to use expensive fonts unless the client is absolutely prepared to fully license them for all uses. That is costly but the right thing to do. Instead, I look for good fonts from these sources as they are well-curated and beautifully drawn. And legal!


This next one is pretty darn long, only watch if you want a refresher.

Images:

You can take your own photos, render your own illustrations, or you can find legal gree images. No images pulled off random searches unless they are clearly marked as placeholders.

Here are some sources of free images:

  • A huge list of sources
  • FreeImages.com
  • Stockvault
  • Flickr
    As the biggest photo sharing site on the web, used by some of the world’s best photographers, your image search really isn’t complete without a quick check of what Flickr has to offer. Not everyone allows their photos to be used commercially, though, so visit the Advanced Search Page, then check “Only search within Creative Commons-licensed content” and any other licence-related options you need before you begin. And when you find a photo you like, check on the right-hand side for a link like “Some rights reserved”, and click it for details on what you can – and can’t – do with the shot.

Iconography

Will you be using icons at all for buttons? Start thinking about it now. This is part of the visual language of the site.

Free icon sources:

I am sending you to very specific types of icons: they are flat, simple, and vectorized. Thisis far simpler to use for responsive sites that dimensional or overly complicated ones. You are free to develop your own, but as that is a very specific art, I will not mind if you stick with ones you found as long as they work.

Functionality:

How will the elements and content move or come into play on your site? Go back to your initial research of sites you like. They will tell you what sort of functionality attracts your attention. Start to develop an idea about what you want to happen. Do not get attached to anything, just play and develop your look and feel slowly.

What is actually possible?

A look at the CSS3 and JavaScript in action:

What is responsive design again? Why are we using it?

Homework:

 

  • Rough sketch of your homesite
  • Wireframes of one major transaction within your site
  • Initial stylesheet for your site: If you don’t have a name, no worries, just keep plugging away at it

Session One, Part Three

Classwork

Research
  • IA & Research
  • A look at Google Slides
  • Also: sign up for Moqups while we are in class through your New School account

Homework:
Make a slideshow about your findings.

Please create a slideshow using Powerpoint, Keynote, or Google Presentations. It needs to have the following:

  • At least 5 slides about your competitive analysis: screen shots of other sites, slides with your thinking about them, that sort of thing.
  • At least 1 slide about your objectives: what are they? How will you know you are successful?
  • At least 1 slide about your target audience: who are they?
  • At least 2 slides about the content you need: where will the text come from? What kind of imagery will you use? What is the overall tone you hope to create? How will you create that?

You need to cover the following with these slides:

  • Competitive Analysis
  • Define Objectives
  • Gather Content

Remember, the more thinking you do, the better. This is just good design: the lion’s share of the work is done in the planning phase, I assure you. You will submit these by next week and discuss them with me during our individual work time.

Here is a sample I built using Google Presentations. It is not fancy, but it covers the basics. Please make sure to only use this example as a starting point, not a template to blindly follow.

You may build one on Google Drive and email me the link, or build one in another program, save it as a PDF, then send that to me. My email: clarkel@newschool.edu

We will walk through these very quickly next week: you will have 3 minutes to walk us about your research as a way to start thinking about presenting and articulating your ideas.

Session One, Part Two

Introduce ourselves

Talk about ourselves, our basic ideas, see who wants to do what.

What we do in this workshop: an overview

In this class, you will be developing a team idea to help change the world in the context of an interaction design. This interaction design will be a web site that is responsive, meaning it will be able to display well for different devices.

Some potential deliverables will be:

  • Research documentation for your project, using user experience design methods
  • Sketches of your site for full-sized computer: homepage and at least 2 major interior pages
  • Sketches of your site for smartphone: homepage and at least 1 major interior pages or 1 major interaction
  • A clickable prototype or animation of meaningful moment: I
  • A final presentation where you encapsulate your work in a professional way

You can use any worthy digital design program to create your screens as long as they are polished and usable. I will give you criteria.

You will have everything you need to take your idea to a team, or to maybe crowd source it for an initial build. You will know how to design for interaction design, and you will hopefully have a fire in your belly to continue on into coding.

Class Work

Part 1: Meet and greet everyone, and choose your teammates (unless we have decided to go solo). 

Talk about what you are good at, what you need to learn more about, and what you hope to get out of a project. Remember, this is not for a grade, this is for your enrichment! For experience! Dive in!

Part 2: Decide what you would like to do. What is your cause?

Part 3: Write a 1 page (about 300 words) description of your project idea:

  • What is your cause?
  • Is it for a real organization? An imaginary one?
  • Who is the end user?
  • What will your site help to do?
  • How are you specifically suited to design this project?
  • How does this cause excite/affect you as designers?

We will discuss the ideas in depth in class after the break. Be sure to DREAM! It does not have to be a realistic goal that you yourself could achieve. Dream of what you would do if you had unlimited money, time, and help!

Sample Cause 
Please do not copy this, make your cause your own while answering the questions.

Begin your Research Report

Begin to look around at web sites and see what you like.

Here are some inspirational sites for you to go and peruse:

Start to save the links to websites that work well for you: ones that are beautiful, function well, do what you would like to do. This is also part of your research, so be ready to discuss them online next week. Here is a sample that is scant, but shows you a C level example of what I am looking for.

Session One, Part One

ct_chart_a

Introductions

We are going on a journey together: you are going to discover the mode of thinking that will enable you to design for the screen and devices, but most importantly for people with specific needs, capabilities and intentions. This class is here to empower you to start cultivating those skills in a way that will enable you to create the career you want. Some basic ideas I hope to impress upon you:

  • The best design does not happen in isolation. I will make sure you speak with each other and with me during each class. I will encourage you to work with each other outside of class. Network with your classmates, develop a crit club in which you can work out your ideas. This is invaluable in school and in life.
  • Empathy is of huge importance to a good designer. It is not about being the hippest in my class, it is about serving your end user and your client to the best of your ability in a compassionate and circumspect way, using design fundamentals to guide you.
  • Discover that which obsesses you now, then use it to guide your every choice. You are the only one charting your career as a student and later as a professional. You can become what you want to in this life if you do the work each day, little bit by little bit.

History/Future of the Web

Here is a look at the very first page on the internet, ever. Hold on to your skirts!

Screen Shot 2015-01-26 at 11.24.15 AMCan you spot what it is about this humble page that changed EVERYTHING and EVERYONE? Look closely… The LINK! The hyperlink changed everything.

Wayback Machine
Look at a really big, long-lived web site like CNN and track it over time. Now look up Amazon. Which site has transformed more?

Here is a bit of a dry video on the history of the web. I find it fascinating, but students have told me it is a bit boring. Watch it if you want.

Internet of Things/Web 3.0

These are slightly dated looks at what is happening now. Once again, sorry if they are boring but they provide some context that you may find useful.

What is Interactivity? Why become an Interaction Designer?

Interactivity is defined as “acting or capable of acting on each other”. In order for it to happen at all, there have to be at least 2 entities which are able to communicate with each other, the output of one affecting the output of the other. The thing is, your brain is hungry for input, eager to learn anything and everything it can about the world around it. The best way for you to help it out is to interact with things and people around you. The more you actively participate in an event or experience, the more useful information you glean in a meaningful way.

Now, as designers, it is our duty to create the most appropriate solutions for our clients, solutions that are significant and enjoyable to the user. The better we engage the viewer, the better our message is conveyed. As such, interactivity is about genuine human engagement, and our designs have to compete with the whole of human experience, not just other posters or websites. In terms of humans, interaction is a conversation between at least 2 people. One person speaks, the other listens, thinks and responds, and so forth. In terms of humans and computers, it is the dialogue that occurs between a person and a computer program, both directly and indirectly. The user clicks a hyperlink, or drags an element, or fills in a blank, and the program takes this information, processes it, and comes back with some form of response. There are other processes that go on behind the scenes like batch processing that constitute an indirect interaction.

Interactivity on the web was fairly limited until the introduction of dynamic technologies like DHTML. Regardless of how long it took to get here,  it has caused a revolutionary shift in our society. The invention of the hyperlink changed everything: users could blaze their own individual paths through static content, leaving them free to access and organize all kinds of data in their own particular way. Interactive design is, for our purposes at least, the act of creating compelling, valuable, empowering information and experiences for a user (to use Nathan Sherdroff’s words). It involves both user control and dynamic or responsive experience. It pulls from a lot of other disciplines and theories, and has been evolving rapidly over the last 40 years. It is a term that came originally from the field of Human Computer Interaction (HCI), and its meaning has been hotly contested at times by people within and without the web development industry.

What does an Interaction Designer Do?

An interactive designer is a person who designs and develops the behavior and appearance of the interactive design. She must be intimately aware of the meaning of the content with which she designs, and must always be an advocate for the end user. Certainly, she must also meet the needs of the client, but if she creates something that is difficult to navigate or load, the entire site is a wash.

How does this apply to Web Design?

Web design is one of the most common instances of interactive design today. It was born in the midst of the internet’s inception, springing out of interface design. Originally, websites were basically designed by the programmers who built the site. Later, it became apparent that there needed to be someone in charge of creating the online interface, and that role is called a variety of names: Web Designer, Interface Designer, Experience Designer…it doesn’t matter all that much what the position is called, what matters is that the person filling that role is able to empathically design interfaces and experiences that are useful and satisfying.

User-Centered Design

User-centered design (UCD) is an approach to design that grounds the process in information about the people who will use the product. UCD processes focus on users through the planning, design and development of a product. It just means you always keep the needs of the end user in mind at all times.

Project definition: identify client and scope

Change the world!

You will spend the last bit of class researching causes that you really care about. Why? Because you are going to develop an idea that you will eventually turn into a design for laptop, tablet, and phone for this cause. You are going to figure out a way you can change the world.

Fighting the Good Fight

Once you enter the working world, you may find it hard to fight the good fight: you will have bills to pay, rent to earn, demands on your time. You may have an employer who needs you to produce work for people or businesses you do not care for. This is life, and we all have to do it sometimes. I have found that giving back in some way enriches my entire life, not just my career. The project I am proposing is in some ways a luxury: you will rarely get to design a project that is truly your heart’s passion when you are working for someone else. That is fine–like I said, we all do it–but if you can find a cause you can find for throughout the years, not only will you have work you can be proud of, you will make a huge difference with your consistent effort over time. Develop the habit of giving back now and you will reap massive rewards later, be it a sense of satisfaction that you did the right thing, be it some lovely side projects for your portfolio, or be it connecting with others of like mind.