Notice: The called constructor method for WP_Widget in waipoua_flickr is deprecated since version 4.3.0! Use
__construct()
instead. in /home/content/77/3893077/html/02libbyclarke/wp-includes/functions.php on line 4399

Notice: The called constructor method for WP_Widget in waipoua_video is deprecated since version 4.3.0! Use
__construct()
instead. in /home/content/77/3893077/html/02libbyclarke/wp-includes/functions.php on line 4399

Notice: The called constructor method for WP_Widget in waipoua_sociallinks is deprecated since version 4.3.0! Use
__construct()
instead. in /home/content/77/3893077/html/02libbyclarke/wp-includes/functions.php on line 4399
Interactive / Web Design 1 - Page 2 of 3 - Parsons PAGD 1091Interactive / Web Design 1 | Parsons PAGD 1091 | Page 2

Class Six/Seven

Classwork

  • HTML & CSS
  • Quick check in: homepage sketches
    • we need to look at what you are doing and talk

Some nice things to have:

Assets you may find useful:

Cursors  | Samples of Web Form Assets

Animated Gifs

We will be doing a quick demo that will show you exactly how much fun these are. Awesome!

Download this file and prepare to have a blast!

Homework:

  • Wrap up homepage, then work out at least 2 more pages of the main presence of your site
  • Formal Crit next week!!

See you tonight!

I’m finally all better, but WOW what a week! I have feedback for everyone and to make up for the class I will have inline materials and I can be on campus tomorrow for one on one time, 12-2pm. I’ll be in our building down on the cafe floor.

CLASS CANCELLED!!

Hello class–

I thought I could do it, but no. Still ill from the flu–I am cancelling tonight’s class but will set up office hours for tomorrow and later in the week. Please send me a jpeg of your homepages ASAP, I will look them over when I am not queasy. I really hope you all get this in time, please reach out to classmates and if you would, confirm you got this. I will make this class up to you, fear not.

Take care and do not get the flu, it is AWFUL

Libby

Class Five

Class Plan

I need to talk to each of your today, so I will do a little lecturing, then we will work. I promise that we will do the following throughout today’s class:

  • Go back over IA, make sure everybody has a good grasp to proceed.
  • HTML & CSS
  • Lecture: visual design! At last! See notes below.
  • Sketch out rough draft with pencil/pen on paper.

Overall, I need to get through this material to help you get started with your sketches:

Web Typography and iconography

Functionality and behaviors:

Homework

  • Begin translating your homepage sketch into the design program of your choice. Next week, we will really dig in and solve issues you may encounter this week. Keep your file organized for your own sanity. We will have a class-wide critique soon, so you need to really lay down some ideas. Do not go with your first sketch, be sure to play for a few hours, then settle in on a direction.
  • If you have not already, work to wireframe out the screens for the rest of your transaction.

Class Four

Code: Introduction

In order to understand why we construct sites the way we do, we are going to study how code and content and style operate together.

Look at HTML & CSS:

Some great resources:

Handouts and code:

User Centered Design

Personas : a template I found for you

Folder/file structure and asset management

Asset management is not just for large business sites—you need to be systematic in how you name and organize your files. It will help you when you need to find old files, and keep you from saving over what you are currently working on.

File Naming

Have a clear nomenclature, or system of naming files. For instance, I name all of my files like this:

gra_hp_01.psd

The first part stands for the client (or project), the second part stands for the page the file represents, and the third part stands for the version number. Sometimes there is a fourth field, but basically, this is all I need.

Some pointers for naming files:
  • Use all lowercase letters: that way your file paths are nice and clean for Linux servers
  • Use underscores instead of spaces: once again, for Linux servers
  • Do NOT use periods inside of the file names: sometimes servers see them as connoting a file type, and don’t know what to do to open your file.
  • The name starts out with the most general information, then gets more specific the more to the right you go.
  • Keep your file names as short as you can without losing legibility: you don’t want 56-character long names, but you also don’t want them to become inscrutable.
Folder Names and Hierarchies

Your folders need to have clear, logical names. They also need to be stored within each other in a systematic way—the whole point is to make it as intuitive as possible for you to find the file for which you are looking.

For example:

website > psds > gra_hp_01.psd

Here is an example of a simple website folder: the only file on top is the index.html doc. All other docs go in the docs folder, all images in the images folder. Not only do clear file and folder names help you stay sane while building your site, but your file paths in your code will be neat and tidy.

Homework

Develop a Rough Draft of a Persona

(feel free to develop your own page, the template is just an example)

Develop a persona sheet for your ideal user. Try to base it on some actual research. In order to do this research, read at least 2 of the following articles which we will discuss these next week.

Office Hours next week

Office Hours

I will be available on Skype during most of our class hours: 7-9pm. My skype handle: monstressme

Class Three Recap

Please be sure to reach out to me and let me know about any questions you have so far. The more you tap my pool of knowledge, the better your work will be.

Class Three

Classwork

  • Check in with class: last week’s homework
  • Discuss our Causes in more depth: structures beginning to form
  • Card sort
  • Information Architecture
    • Sitemap
    • Wireframes
    • Color: Psychology and Choice
  • Look at HTML & CSS:
Homework:
  • Create your sitemap for your entire site and wire frames of your homepages using any of the following: Illustrator or Indesign. Send these to me as pdfs by Friday so I can try to get commentary to you before class.
  • Pinpoint your color scheme:
  • Think about the effect you want the colors to have on your viewer, what you want it to teach them about your intent.

Card Sorting

Basically, you need to decide how you will section up your content into separate pages. The best way I do this is to do a card sort.

In web design, you want each page to be a bucket for information about the selected topic ONLY. Use links to guide the user to other related material. You want your copy to be clear and concise: no one likes to dig through loads of badly organized copy for what they seek.

Look at the site you want to build and think of your targeted user:

  1. What information does she need first? Second? Third? And so on. This helps you determine what the pages should be
  2. Write out the name of each page on a card.
  3. Place the cards on your desk in the order you think they need to go. Write this down, as this may very well be your primary navigation.
  4. Mix the cards up and turn to a fellow student. Explain your site’s purpose, the target audience, and any other variables at play.
  5. Give the cards to your fellow student and let him come up with a potential navigational scheme.
  6. Talk out any differences with him, and adjust your proposed nav to reflect the thinking.

Sitemaps and Wireframes (Information Architecture)

First of all, let’s define the term Information Architecture or IA:

An IA is the structure of a system. It is the model produced when a website’s content and functionality are organized so users can easily access everything in the final site. Its main purpose is to optimize the user experience, meaning anyone visiting your site will be able to intuitively navigate to the information for which she is looking.

Your website, however small and simple, is actually a system for delivering information and facilitating task completion to an inquisitive public. The more carefully you structure your site’s navigation, the better and more quickly it will deliver content. There’s nothing more frustrating to a web user that a confusing or misleading navigation.

If you take the time to create an IA for your site, you will know what content you need, how the user will be guided, and how the site will be structured. This is hugely helpful information to have before you start designing.

A Word About User Experience

The web development process should be user-centered from start to finish, no matter which step you are on. In the early days of the internet, design tended to be about the designer, and what he could imagine was cool or new. Now we know that unless the user finds the experience useful, compelling, and satisfying, she will simply leave the site probably never to return. This means that even if the interface is beautiful, a site is a failure if its information architecture is garbled, or its coding is subpar.

Also, if you are working for a client, never forget to keep his objectives in mind.

“As user experience designers we have to find the sweet spot between the user’s needs and the business goals, and furthermore ensure that the design is on brand.”
Whitney Hess

Creating an Effective Information Architecture

You need to take the following into account:

  • Your end objectives
  • The constraints you have to deal with
  • The content you have or will generate
  • The requirements for the people who will visit your site (this depends on who your target audience is).

Sitemaps

Once you have taken note of the way things and tending to be grouped, create a sitemap. A sitemap is a high-level chart where each topic (or page) is represented by a box, and the basic relationships between pages is drawn in a simple manner. Take the time to draw a couple of sitemaps and get it right.

Lovely examples of sitemaps

Wireframes

wireframe_021409

Once you have established the overarching relationships between content areas, it’s time to go in and create detailed wireframes of each individual page type. Wireframes are simple, unembellished diagrams of the page structure. They help you figure out how each element on the page relates to the others, and provide invaluable insight on how the page should look and function.


Color Theory

Some great readings on the subject:

Class Two

Agenda

Refining our ideas, finding small teams

Talk about our basic ideas, see who wants to do what. I want you to find 2 or 3 other people you want to work with as you will be forming small teams for critiques and support purposes.

What we do in this class: a review and an advance

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

Your 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 OR landing page to drive people to your app
  • 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
  • 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.

Homework

Part 1: Write a 1 page (about 300 words) description of your project idea, refined after tonight’s discussion:

  • 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 a person?

We will discuss the ideas in depth in class next week. 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. this is about a B in terms of what I am looking for.

Part 2: Begin your Design Research

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.

Part 3: Talk to your crit club outside of class

Seriously, good design does not happen in isolation, Before class next week, send your work to your team and get feedback. Make changes, refine, and be ye ready for next Monday!

Class One: Homework

 Be sure to read the notes for Class One!
  • Choose your cause! Try to think of a problem that you would like to solve, a cause you would like to support.
  • Develop your initial project statement: Jot down some notes so you could speak for 3-4 minutes about what you would like to change or do or fix or make to make the world a better place.
  • Look at some great web design and just start getting a feel for current trends and capabilities: spend at least 30 minutes clicking through the sites on SiteInspire, one of the world’s best web design galleries. You can also check out Pttrns, a lovely pattern library for other devices!

Class One: Notes

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!

https://youtu.be/off08As3siM”>https://youtu.be/off08As3siM

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.

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.