Week 05

Topics: Visual Design for Web and Interaction: typography, Web fonts, color, material and shape.
Studio Experiment: The specification for the project is to take one of the designs you have created so far and to focus on the design of the navigation. For this project you will need to work on the design of the home page in addition to two levels of “drill down” pages. You will be responsible for designing one of the sections from the Main navigation– any section except the Home page. (level 1), a SubCategory page (level 2) and a Sub-SubCategory (level 3). Also, re-design the pages using a completely different color palette, typographical layout using fonts suitable for the web. Post your thoughts and decision-making process for this exercise on your WP blog.
Project: Work on your design of the website and bring in a large print-out of your work so we can discuss in class.

Reading For Next Week
Designing for Interaction: Chapter 5: “The Craft of Interaction Design” (pg 89-119)
Grey Box Methodology
article

Stylin’ with CSS: Chapter 3: “Stylin’ Fonts and Text” (pg.66-100)
Answer the 2 questions in the Comment section of the Week 05 notes of this site. Please reply to the questions below by our next class.

Web typography

Traditional print designers have a huge amount of options available to them when it comes to typography, including the sheer numbers of fonts available, and options for positioning text. Typography on the web is a lot more limited, because we must design using fonts and positioning, etc that we know will be available on the computers of the users that will look at their web sites—it is no use just designing for yourself on the web!

Limitations of web typography include:
  • A reduced selection of fonts
  • No hyphenation, making full justification look ugly when a column of text gets narrow
  • Poor control over kerning (ie, the spacing between the letters)
  • A lack of control over how the work is viewed—designers must account for a wide variety of screen sizes, resolutions and environments

Let’s look at these points in a bit more depth.

Reduced selection of fonts

The reduced selection of fonts is often the first thing you will run up against when styling your text. Although you can specify any font you like in your CSS, visitors to your sites will only see your text displayed in that font if they happen to have it installed on their own computer—if they don’t, their browser will either use an alternative font that you’ve specified in your CSS, or resort to the browser default (usually Times New Roman). So, you may like to see all your body text displayed with special fonts like Trump Medieval or Avant Garde, but unless your target audience is heavily biased towards designers your viewers likely aren’t going to get the benefit. For this reason, most web designers limit themselves to the most commonly-available fonts across all systems, which are usually limited to the following:

Andale Mono
Times New Roman
Georgia
Verdana
Arial/Arial Black
Courier/Courier New
Trebuchet MS
Comic Sans (this is an unprofessional, many would say ugly font—don’t use this, except perhaps sparingly on sites aimed at children)
Impact

These look like Figure 1:

Figure 1: The most commonly available fonts across all systems are limited to the above.

Specifying any of the above fonts means you’re reasonably likely to be picking a font that most of your visitors will also have. Microsoft also introduced six new fonts designed for screen use in Windows Vista and XP, and, oddly, chose to begin all their names with the letter C. If you want to use them, they are Cambria, Calibri, Candara, Consolas, Constantia and Corbel. I’d advise against using these, however, because they are not likely to be available on the Mac or Linux platforms.

So, compared to the thousands of typefaces available to print designers, web designers can reliably choose from just over a dozen. But is this a serious limitation? Typography is about far more than simply selecting an attractive font, it’s about line lengths and kerning and white space as well—remember that typographers pre-dating electronic fonts would have faced similar limitations.

Hyphenation

When it comes to aligning your text within its container, there are four options: left-aligned, right-aligned, centre-aligned and fully-justified. Fully-justified text, where both the left and right edges of the block are aligned to the vertical sides of their container, can look more attractive than text with a “ragged” edge, and you’ll see it a lot in magazines and books. On the web, however, it’s problematic due to the lack of automatic hyphenation, which breaks words at appropriate points to better fit them in the line. To fully justify the block of text, all the browser can do is adjust the spacing between the words, which can lead to “rivers of white space” running vertically through the block—this usually happens when the line length within the block is too short and there aren’t enough spaces to adjust subtly, as shown in Figure 2.

Figure 2: Rivers of whitespace can spoil justified text blocks.

As you can see in this screenshot, the lack of hyphenation to break words at natural points has caused the spacing between certain words to grow to unacceptable sizes. To avoid this, you should use left-aligned text for the most part on the Web.

Kerning

Kerning is the process of adjusting the spacing between particular pairs of letters when the font in use is a proportional one (such as Times New Roman, where the space between each character varies from character to character) rather than a monospaced one (such as Courier, where the space between each character is the same each time). It’s used in print to tighten up the space between letters that align naturally, such as a W followed by an A, and can give a more professional look and feel to the text. Most professional fonts come with kerning instructions built in, to provide spacing information to the type renderer. See Figure 3 for an illustration of the difference kerning makes.

Figure 3: Kerning can certainly improve the look of text.

In the above screenshot, the first word has not been kerned. The second word, though, has had the spacing between the W and the A reduced, whilst the space between the A and the S has been increased a touch.

On the web, kerning with this level of precision is effectively unavailable. The only thing we have that comes close to it is the ability to use tracking, which in the print world means adjusting the space between characters throughout the copy, no matter what those characters are—so, you could decrease the space between your W and your A, but you’ll also be affecting the space between every other letter. On the web, tracking is better known as letter spacing, and is controlled with CSS—this is illustrated in Figure 4.

Figure 4: Proper kerning is not available on the Web; the closest we have available is more general letter spacing.

In the above screenshot, the spacing between each character has been increased by the same amount. Whilst this has helped separate the A and the S, the space between the W and A is now too much. Letter spacing with CSS is a difficult property to use effectively due to this all-or-nothing nature, and for this reason it is best used sparingly.

A lack of control

With all this talk of the print world, there’s something very important worth bearing in mind, and that is that the web is not print. So where the print designer doesn’t have to worry about the end viewer resizing the text, or not having the desired set of fonts, or not having aliasing enabled, we do, and there’s often a temptation to try and force a particular design upon the viewer—fixing a rigid text size for instance, or placing text in fixed-width and fixed-height containers, or even replacing whole chunks of text with images.

This lack of control needn’t be a problem however—you just have to get used to the idea that people will want to read your content on a variety of devices in a variety of environments in a variety of ways. You shouldn’t try to stop them, or make it difficult for them—if they want to read your content then it should be as easy to do so as possible. They may wish to read it on their mobile device during their commute home; they may prefer to print everything out and read it on paper instead of a screen; they may be visually impaired and need to increase the font size somewhat. This is why, when you style your text on the web, what you’re really doing is providing a guide to all the different browsing devices as to how you’d prefer that text be seen. Devices are free to ignore everything you say, of course, but that’s ok—what matters is that you’re not trying to force your design decisions on your entire audience.

How is typography done on the web?

Typography on the web is controlled entirely with CSS, and by using CSS you gain a lot of control: not just over the size, colour and typeface selection but also over the line height, the letter spacing, the level of capitalisation (all caps, initial caps, small-caps or no capitalisation at all) and even control over how the first letter or first line of your text is styled.

By styling the text’s containing block, you also have control over the level of justification of the text and the line length. Not only that, you also only have to create your style rules in one location—your stylesheet—to have those rules apply to all of your text, across your whole website (or you can be specific and target particular paragraphs, or areas on the page). Furthermore, if you ever find yourself needing to increase your website text size, or change the body font, you only have to change the value in your stylesheet.

Quick tips

Here are some quick tips to help you out with typography on the Web.

Select a range of fonts

It’s good practice to include back-up selections when specifying your preferred display font. So, rather than simply specifying “Georgia”, you could specify “Georgia, Cambria, “Times New Roman”, Times, serif”. So, first the browser will attempt to use a font named Georgia, but if this font isn’t installed it will try for Cambria, then Times New Roman, followed by Times, followed by whatever the operating system has assigned to the “serif” keyword.

Line length

To aid readability, the average length of a line of text within your containing block should be around 40–60 characters per line, though this should vary depending on your audience (children prefer shorter line lengths, adults prefer longer). An ideal line length is shown in Figure 5:

Figure 5: 60 characters per line—the ideal line length.

The text in the screenshot is about 60 characters per line. Any more than this and the reader may have to start moving their eyes—or even their head—in order to follow the text, which can increase eye-strain and makes the text harder to take in.

Line height

Line height refers to the vertical space between your lines, and you can make your type more readable by increasing it a little above the browser default (which also allows more space for subscript and superscript characters)—see the difference between the two paragraphs in Figure 6:

Figure 6: Line height can make a big difference to the look and feel of text.

The first paragraph in the above screenshot has a default line height, and can feel a little cramped. The second paragraph has had its line height increased, and the text has a bit more room to breathe, making it a bit more readable. Too much line height, though, and you make the text harder to read again, so be careful.

Drop caps

By targeting the first-letter pseudo-element with something like p:first-letter { }, you can style the first letter of a line differently from the rest—such styling is usually known as a drop cap, where the first letter takes up about 3–4 lines of text—see Figure 7.

Figure 7: A typical drop cap.

Small caps

Often, fonts come with a small-caps variation—a set of capitalised letters that are uppercased but approximately the size of the lowercase variant. This is useful for when you want to capitalise something but don’t want to draw too much attention to it, so it can be used for abbreviations, for example. Even if the system doesn’t have a small-cap variant of the specified font, that’s ok—the browser will generate its own version by using full capitalisation and then shrinking the characters to around 70% of their normal size. Figure 8 shows small caps in action.

Figure 8: Small caps in action.

Hanging punctuation

A good typographical effect can be used if your sentence starts with quote marks. Using the text-indent CSS property combined with a negative value—either a value in ems (-10em), points (-10pt), pixels (-10px) or percent (-10%)—allows you to shunt the quote mark out into the left, maintaining the left vertical line of your block of text, as shown in Figure 9:

Figure 9: Hanging punctuation.

Typographically-correct punctuation and other entities

You can make your text look more professional and elegant by using the wide variety of typographic HTML entities that are available such as “smart” or “curly” quotes and en– and em—dashes. A lot of blogging and word processing software will automatically do this for you as you type, turning your regular straight quotes into the typographically-correct curly variety, and turning strings of dashes into en and em dashes. See Figure 10 for examples of typographically-correct punctuation.

Figure 10: Typographically-correct punctuation

Once you start peppering your copy with smart punctuation, your text can look far more elegant and professional—more like something from a magazine or a book than from online. Bear in mind though that this sort of punctuation can look a little pixellated for people with older screens or with aliasing disabled, so use with caution.

Then there’s entities—bits of special HTML that you can insert into your copy to generate special characters not easily available from your keyboard. Figure 11 contains a number of entities:

Figure 11: HTML entities

These can be typed in by hand, but a lot of content management software can convert or insert these for you with ease.

Pull-quotes

A pull-quote is a short extract from your text that appears elsewhere on your page with a larger text size, and sometimes a different font, to draw attention to it. You’ll have seen them in almost every magazine you’ve ever read, and they’re an effective way of breaking up your text and highlighting key quotes or phrases—and they’re also easy to do on the web with some simple markup and styling. Just make the text larger, perhaps set it in a different font, position it so that the regular text wraps around it and you’re done. There are also some more advanced solutions that involve JavaScript picking out selected text and automatically populating a pull quote from it, which can save you having to write the same text twice in your markup.

Summary

So that’s typography, and typography on the web; hopefully you can see that text online needn’t be limited to Verdana, small, #333333—there is a wide range of typographic tricks and tips that can help make your text stand out from the rest of the crowd. For most websites, the reason people will be visiting is to read what you or your authors have written; it makes sense, then, to make that reading as pleasurable as possible.

This information about Typography on the web is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

What is CSS?

Whilst HTML structures the document and tells browsers what a certain element’s function is (it is a link to another page? Is it a heading?), CSS gives the browser instructions on how to display a certain element—styling, spacing and positioning. If HTML is the struts and bricks that make up the structure of a house, CSS is the plaster and paint to decorate it.

This is done using a system of rules, the exact syntax of which you’ll learn more about below. These rules state what HTML elements should have styling added to them, and then within each rule list the properties (eg colour, size, font, etc.) of those HTML elements they want to manipulate, and what values they want to change them to. For example, a CSS rule might state “I want to find every h2 element and colour them all green”, or “I want to find every paragraph with a class name of author-name, colour their backgrounds in red, make the text inside them twice the size of normal paragraph text, and add 10 pixels of spacing around each one.

CSS is not a programming language like JavaScript and it is not a markup language like HTML—actually there is nothing that can be compared to it. Technologies that defined interfaces before web development always mixed presentation and structure. This is not a clever thing to do in an environment that changes as often as the web, which is why CSS was invented.

Defining style rules

Without further ado, let’s have a look at a CSS code example, and then dissect it:

selector {
  property1:value;
  property2:value;
  property3:value;
}

The pertinent parts are as follows:

  • The selector identifies the HTML elements that the rule will be applied to, identified by the actual element name, eg body, or by other means such as class attribute values—we’ll get on to these later.
  • The curly braces contain the property/value pairs, which are separated from each other by semi-colons; the properties are separated from their respective values by colons,
  • The properties define what you want to do to the element(s) you have selected. These come in wide varieties, which can affect element colour, background colour, position, margins, padding, font type, and many other things.
  • The values are the values that you want to change each property of the selected elements to. The values are dependent on the property, for example properties that affect colour can take hexadecimal colours, like #336699, RGB values like rgb(12,134,22) or colour names like red, green or blue. Properties that affect position, margins, width, height etc can be measured in pixels, ems, percentages, centimeters or other such units.

Now let’s look at a specific example:

p {
  margin:5px;
  font-family:arial;
  color:blue;
}

The HTML element this rule selects is p—every p in the HTML document(s) that use this CSS will have this rule applied to it, unless they have more specific rules also applied to them, in which case the more specific rule(s) will overwrite this rule. The properties affected by this rule are the margins around the paragraphs, the font of the text inside the paragraphs, and the colour of that text. The margins are set at 5 pixels, the font is set as Arial, and the colour of the text is set as blue.

We will come back to all of these specifics later—the main goal of this tutorial is to cover the basics of CSS and not the nitty-gritty details.

A whole set of these rules goes together to form a style sheet. This is the most basic syntax of CSS there is. There is more, but not much—probably the coolest thing about CSS is its simplicity.

CSS comments

One thing to know early on is how to comment in CSS. You add comments by enclosing them in /* and */. Comments can span several lines, and the browser will ignore these lines:

/* These are basic element selectors */
selector{
  property1:value;
  property2:value;
  property3:value;
}

You can add comments either between rules or inside the property block—for example in the following CSS the 2nd and 3rd properties are enclosed inside comment delimiters, so they will be ignored by the browser. This is useful when you are checking out what effect certain parts of your CSS are having on your web page; just comment them out, save your CSS, and reload the HTML.

selector{
  property1:value;
  /*
  property2:value;
  property3:value;
  */
}

Unlike other languages, CSS only has block level comments—single line comments do not exist. You can of course constrain the comment to a single line if you wish, but you still need to include the opening and closing comment delimeters /* and */).

Grouping selectors

You can also group different selectors. Say you want to apply the same style to h1 and p—you could write the following CSS:

h1 {color:red}

p {color:red}

This however is not ideal, as you repeat information that is the same. Therefore you can shorten the CSS by grouping the selectors together with a comma—the rules within the brackets are applied to both selectors:

h1, p {color:red}

Selectors
There are several different selectors, each matching a different part of the markup. The three most basic ones that you’ll encounter most often are as follows:

p { }: element selector (Redefines an HTML element)
matches all the elements of that name on the page (p elements, in the case above)
.example{ }: class selector (Apply to any HTML element)
matches all elements that have a class attribute with the value specified, so the above would match <p class=”example”>, <li class=”example”> or <div class=”example”>, or any other element with a class of example. Note that class selectors don’t test for any specific element name
#example{ }: id selector (Applies to only one HTML element)
matches all elements that have an id attribute with the value specified, so the above would match <p id=”example”>, <li id=”example”> or <div id=”example”>, or any other element with an id of example. Note that ID selectors don’t test for any element name, and you can only have one of each ID per HTML document—they are unique to each page.

You can see the above selectors in action in the following examples. Notice that when you open the example in a browser the warning style gets applied to both the list item and the paragraph (if the bullet disappears it’s because you are setting a white text color on a white background).

You can join some selectors to define even more specific rules:

p.warning{}
matches all paragraphs with the class of warning
div#example{}
matches the element with the id attribute example, but only when it is a div
p.info, li.highlight{}
matches paragraphs with a class of info and list items with a class of highlight

In the following example I use these to differentiate between the different warning styles:

This information about CSS Basics is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

CSS Properties from Web Typography reading

font-family value: one or more quotation mark-enclosed font names followed by an optional generic font name

font-style values: Italic, normal

font-variant values: normal, small-caps

font-weight values: bold, normal, lighter, bolder, integer (100-900)

font-size values: an absolute size, a relative size, a length, a percentage

letter-spacing value: either normal or a length

line-height value: either normal, a number, a length, a percentage

text-align value: one of left, right, center, justify

text-decoration values:blink, line-through, none, overline, underline

text-indent values: either a length or percentage

text-transform values:capitalize, lowercase, uppercase

vertical-align values: either baseline, sub, super, top, text-top, middle, bottom, text-bottom, a percentage, a length

word-spacing values: either normal or a length

XHTML & CSS exercise: Styling text
HTML Cheat Sheet

http://lesliefranke.com/files/reference/htmlcheatsheet.html

CSS Cheat Sheets

http://lesliefranke.com/files/reference/csscheatsheet.html
http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/

XHTML template page

The code below is a good template to use as the beginning structure for a web page.

(Information about HTML Document Type is here: http://www.w3.org/TR/REC-html40/struct/global.html#h-7.2)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Strict Template page</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body>

</body>
</html>
CSS example

body { font-size: 62.5%;  /* 1em = 16px therefore 16px × 62.5% = 10px */ }
h1 { font-size: 2em; /* 10px × 2em = 20px */ }
p { font-size: 1.2em; /* 10px × 1.2em = 12px */ }

The code below is a good example of basic CSS properties for the <h1> heading and <p> paragraph tag of a web page.

body {
 font-size: 62.5%;
}

h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:2em;
font-weight:bold;
}

p {
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
font-weight:bold;
letter-spacing:.1em;
line-height:2.2em;
}


Comments

  1. jamie October 5th

    Comment Arrow

    According to Jason Santa Maria in his “Grey Box Methodology” article: “Sketching out your ideas is still one of the most important parts of any design. I believe it is still the fastest way to brainstorm and see your ideas, make your mistakes and build off of them, and to see your progression through to ideas you never thought of before.”

    Do you agree? Is sketching part of your design process? And tell me in more detail what design process you normally follow when you start design work.

    [Reply]

    Mike Manalo Reply:

    The ‘Shooting Yourself in the Foot’ concept described by Jason is an intriguing after thought because many design schools struggle with this issue of technical software verses hand production.
    This current generation of graphic software allows cleanly outline and us to square up our ideas. What becomes visual through these programs is almost 90% of what will be either printed or put up for web and interaction interfaces. However, what sketching allows us do to in a quick amount time, with a steady and trained hand, is abstract the experience or message of the design. Jason states in his article: “…sketching first you allow yourself time to really focus on the idea you need in a rough enough stage to not get hung up on things like imagery and color usage and kerning.” You quickly irk out ideas and thought on paper that can be later refined. Thus, sketching works and coincides with our digital processes.
    Renowned educator and editor, Ellen Lupton, during a lecture at the Walker Art Center, was asked which was more important: “Teaching ideas or teaching software.” She responded, “Software is the stuff that we deal with and the industry that we live in- we can teach it in a way that is idea oriented…When I was learning typography in the 80s- it was just pencil sketches on tracing paper…What my students can learn in a month because of the software is amazing…” The digital tools that we use, now takes away the excuse, that we cannot execute imaginary ideas in our head. Instead it bring our concepts of graphics and type to a higher production- but this is only achieved with thinking process done by hand first.
    Sketch= the idea blueprint.
    Digital tools= visualization mechanism.

    As I personally start beginning to become more fluid with CSS and XHTML, I realize it is a trial and error process. First, I would sketch out ideas what I want the overall experience of the website to be. Then, after deciding which ideas hold more clout, I refine it in Illustrator and Photoshop to start applying rules off making or breaking the grid, color schemes and text placement. From here, I begin to see what clashes and what work in conjunction with the other page elements. Thus, when I look to adjust or add a CSS code, I don’t want to look only at the code’s output but it’s limitations- so that I can start mapping out possibilities of reader legibility and site navigation.

    [Reply]

    Dee Kim Reply:

    I agree with him. However, I didn’t follow this process this time for the moma project. I regret my choice, so this week I’ll try to go over that process. I normally have a tendency to not sketch because I’m not confident about my drawing skills. I jump right into computer progrmams to start. This habit does help me work fast, but it’s a disabler at the same time. The article helped me to look back to my process. Thanks!

    [Reply]

    Yerem Tagvoryan Reply:

    Moodboards & Testing

    Moodboards are sample pages or styles of websites that we can gather to show our clients to find out if its their taste or not for their own website. It’s a good way to show your clients quickly what you are talking visually.

    Testing happens before the website launches live; it is a very important step. All the hard work that went to making website is to the test to see if everything works. To see if it works under different conditions, for example internet connections, mobile devices, screen resolutions and etc.

    [Reply]

    Christine Nakashiba Reply:

    I sort of agree with his idea about sketching. I agree that sketching is important when brainstorming, but I have seen some illustrators do some amazing sketches on the computer, I could barely tell if they were sketches or computer print outs. But, I personally would have to do it by hand.

    Sometimes sketching is part of my design process. But, I often brainstorm with words rather than image.

    My design process varies depending on the project and class. I generally get a project, do a little research on the subject and on the words, look up some images of what has been done, I then look into who the audience is and the purpose of my project, then do some layout sketches, then I just do it, trial and error.

    [Reply]

    Rachelle Moon Reply:

    Rather than sketching out my ideas, i just draw/imagine them in my head and start working instantly. because if i sketch out my ideas, i just tend to follow exactly of my sketches but if i start working instantly after some time of imagining or thinking in my head, i can work more freely. for instance, if i were to use photography while i shoot my photos, i come up with more insights and ideas, i can change my original idea for something better. if i start with sketches, i just follow whatever i had sketched earlier and stop thinking, so its not such efficient way for me to work.

    [Reply]

    Rubina Ramchandani Reply:

    I would have to agree with Jason Santa Maria in his “Grey Box Methodology” that sketching is an important part of any design process. Coming from a corporate branding and print background I have always been reminded – if it works as a sketch in black-n-white, it will work on the screen. As students, we are constantly encouraged to sketch out our ideas, make it work and then move on to the computer. The computer only acts as a medium to help achieve the end result.

    When I am given a project, there are a few things I must take care of before I start sketching. Some of them are like do I understand the topic, the audience, the communicate objective. If at some point I need to conduct research I will go ahead and do so. Once I am confident that I have enough resources and materials, I move on to the sketch pad. I ‘doodle’ or sketch till I have a few designs I am happy with. Sketching before designing on the computer helps me remember my initial thoughts and ideas. Nine out of Ten times I have noticed that sketching while the brief is still fresh in my mind has helped me rather than spending time on trying to execute one idea. By the time I am done with one and move on to the second I might have forgotten what the thought process was. The execution stage is when I move on to the computer. While sketching remains an integral part of any design process, it cannot be denied that the computer has helped quicken execution in turn providing the designer with more time to experiment with color, forms, layout and typography.

    [Reply]

    Aarti Vashisht Reply:

    I often start with basic deconstruction of design brief, create some mind maps and then few idea sketches. Over the time I have stopped the process of figuring out most of the design on the sketch pad before proceeding to the computer. So sometimes I find myself in the same state as mentioned by Jason “my focus is drawn away from the structural build of the page because I may get caught up in finding the right font or color.” At the same time, I agree with Rachelle that detailed figuring and sketching can be very limiting as well. I also tend to replicate the figured out thought and tend to over look some very obvious mistakes in the process because I feel that I have it all figured out.

    However, I see a possibility of resolving this by adopting to his method of breaking up the process (“The key for me is to split my design process up into smaller chunks”). Its like ‘additive way’ of designing that is perhaps also very similar process used while doing logotype design. The idea development becomes layered and constructive. The progressing stages give time to reflect and explore, resulting in an overall enriched design.

    This process is certainly worth the experiment and a must explore for some of the upcoming design activities.

    [Reply]


  2. jamie October 5th

    Comment Arrow

    Research Models, Personas, Scenarios, Sketches, Storyboards, Task Analyses, Task Flows, Use Cases, Mood Boards, Wireframes, Prototypes, and Testing are all part of the models, diagrams, and documents that designers use when designing for interaction.

    Pick two from the list above and, in your own words, tell me in detail what each is and how they differ from one other. In what way might each be useful to a project? In what types of interactive projects do you think it’d be important to use the two you’ve chosen from the list? (Please try to pick two from the list that haven’t already been discussed by others.)

    [Reply]

    Mike Manalo Reply:

    Scenarios and wireframes are really powerful tools because that make great use of other design tools such as sketches, storyboards, mood boards, and they become even better tools themselves when the design process goes into prototyping and testing.
    When using scenarios, the process is really trying to map out, in the realm of interaction and web, how clientele users will access and navigate. This can narrowed down through the use of specific research of the type of users the project/ client is trying to attract. From here, we can use story-boarding to predict how specific users will use navigation and sift through content.
    Wireframes can be considered the base structure of the site or interactive application. Here, we can general overview of hierarchies and proportions of how content is placed and viewed. This draft can be a comp that is both grayed out or even just simple lines and shapes. It is about developing a distinct visual language that is developed without having to dive into secondary, but substantially important, design issues such as gradients and colors.

    [Reply]

    Christine Nakashiba Reply:

    Storyboards are laying out space and a story on a time-line.
    Sketches are the ideas from your head directly translated onto paper.

    Storyboards and sketches are different by sketches are more quick, rough and brainstorming ideas down on paper. And storyboards are well thought out ideas and images laid out in a sequential and comprehensive form. In other words, sketches are more for the designer/artist to use and the storyboards are made to make an idea communicate to another person.

    Storyboards are useful when you are planning the grid of a project or the basic structure of a project.
    Sketches are useful when you are in the concept and/or beginning stages of a project. Sketches are also good ways to test if what you are thinking in your head makes sense on paper.

    All interactive projects could use a storyboard and sketches.

    [Reply]

    Rachelle Moon Reply:

    mood boards are collages of varieties of artwork. it can contain anything that the creator wants to post. it is very helpful sometimes, when i don’t have set direction i can think of or inspirations. from seeing different types of artworks or whatever i had my interests on i can get great amount of inspirations. i can start sampling certain images, artworks that are related to the topic i am working on and get inspirations from it.
    research models are basically a diagram that shows from a start to an end of a project. it get useful when working on a big project that you don’t know where or how to start, you can start listing things you have to do and check your progress as you go.
    mood boards and research models are different becuase mood boards are for visual purposes and research models are for more academic/planning purposes. they both can be used for all the interactive projects.

    [Reply]


  3. Dee Kim October 10th

    Comment Arrow

    I would say diagrams and task flows are two importatnt factors. Wireframe is also a powerful tool, but I haven’t used Wireframe yet.

    Diagram shows the research data in a more effectvie way. It is information design. Task flow is a order of activities in the final design. Both of them workes well for product design.(maybe toy or physical game design)

    While I was developing a product for kids a couple of years ago, my team just used scenario and prototype ar first. The prototpye looked cute enough for kids and the scenario was reasonable, but still there was something missing. When we added a task flow it helped us get to the next level, and our presentation got richer.

    Also, several diagrams helped us to explain the product better. For example, rather than using round and square shapes for diagram we used illustration of kids and toys. This helped the viewers to directly understand the interaction between the two.

    [Reply]


  4. Yerem Tagvoryan October 11th

    Comment Arrow

    Yes I do agree, because sketching is very important to get a good a view what I am designing and where I am going with my ideas. For designing websites I first look at what kind of website is it. For example if its going to be an ecommerce website, games website, photography website, informational website and etc. all this types have certain way to give the information. Next I go over the navigation buttons, because when making websites it’s a crucial things to know how many menu buttons are going to be or how many sub-menus there are going to be. Knowing this will help me to arrange them so the viewer can find what they are looking for very fast and efficiently.

    [Reply]


  5. Rubina Ramchandani October 14th

    Comment Arrow

    Research Models and Testing is an integral part of interaction design.

    Research Models help understand the demographics and psychographics of the target audience. It helps us understand the communication objective and the need of the market. It helps us answer questions like who, why, when, where and how. It is important for any designer to have answer to most of these questions before they start designing. I cannot use Comic Sans in a website designed for a target audience between the age group 35-60 years. Or in another case use extremely difficult language and earth tone colors in a website for children. Research Models also help interaction designers to decide the language and the level of complexity they want to bring into their designs.

    Testing is probably as important as Research Models, if not less. All the week, months or even years of working on a particular interactive project may fail if it not tested within the target group before launching into the market. Research models prove to be useless if the project has been designed but fails at launch. It only means that the product was not tested. For example, if a designer would like to bring in an interactive project into the market that people have not experience before, then it is important for the designer to test the product in the market to make sure that people are willing to accept it. Human beings, in nature, are initially reluctant to try something new. However, we live in the jet age, change is taking place by the second. People are aware and more open to interactive interfaces. It is also important to test the project before launch, simply to make sure that the needs and requirements of the target audience are met keeping current trend in mind.

    [Reply]


  6. Buddy October 14th

    Comment Arrow

    Answer to question one:

    I agree with Jason on sketching out your ideas first before jumping right into design. I believe it is more important to get down on paper what it is you visualize or see as a potential direction for a particular design or project before hitting actual software. By sketching out ideas, it basically functions as your conversational “ice breaker” that you would use at an interview or at a bar, where it becomes more this “setting up the scene” sort of social methodology rather that is applied to the process of sketching out ides, which help establish a beginning or starting point to which this conversation will progress. So in this sense, I like to think of brainstorming or idea building as little conversations from one idea to the next and as this ideas build so do the conversations between them.

    Answer to question two: I personally can’t design without both the use of Mood Boards and Sketches whenever I begin a project. Whether it be logo design, web, print, illustrative, no what it is, I always refer back to these devices. The simple difference between the two is this: Mood Boards, function as an aide in helping build the intellectual framework of your design as where Sketches, function as a means to get out your simplest of ideas for a design no matter what they are. And I’m re-mentioning Sketches because I can’t stress enough how important it is to sketch out even your simplest ideas for a project even if in the end those first set of ideas were never reconsidered or even used. Mood Boards on the other hand, function almost as the same thing, but allow for later direction for the emotional end of your design that if for some reason you get lost and pulled off course along the way of production, you can easily refer back to your Mood Board for that redirection. Also, it helps with keeping everything aligned and on the same page, especially if working in groups. I think these two elements of design are very important and should be practiced and used more often when beginning a project. It’s all about having a direction and the best way to do that is by using these devices that can make things easier for you in the long run.

    [Reply]


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

jamie

Instructor for Interactive Design 01