Interaction Design

Hoping to create a professional image!

site overview

This site will be simple with essentially the only imagery being my portfolio. It will also have a video on it, which is a requirement for my business for art professionals class. Hopefully, it’s not to hard to imbed it.
objectives
The objectives are to present small businesses with ideas of print and identity projects they can benefit from, and well as keep it professional enough to be open to any other viewers.

audience description

Small businesses. I am an advocate for the Ma & Pa companies. I feel everybody that wants to pursue their desires in business (honestly and with positive pride), deserve respect and support for what they do.

Site Map

I have focused on the Web Style Guide, 3rd Edition in this essay, which is a valuable tool that adds further confirmation to what I have been taught at BYU-Idaho. The Web Style Guide initially focuses on the process of design. This is the revised essay of what I posted earlier.

Consider the Development Team

It’s important to analyze the assets of each of its members, and therefore distribute tasks accordingly and utilize their unique talents. As a team, look at what you have going for you, and also what may be a challenge. Create a “project scope” of goals and plans for the project and put it on paper, for the sake of the team’s organization, as well as the relationship between all involved.

Circumstances may often involve team members filling more than one role. One role mentioned in the Web Style Guide is the “usability lead.” I love the consideration that good designer’s take for the end user’s experience, and also recognizing that design is about people’s experience with the design rather than mere tasty bits of technology and pasted design. The usability lead researches potential users and develops a persona to design around. The usability lead also reviews the success of the project at the end, determining if the user is responding according to the outcome outlined in the goals of the project scope.

Emphasis on Early Stages of Design

Create constant revisions & options in the beginning and the idea of improvement continually in the process. However, toward the end, the project ought to be handed to those who specialize in the final implementation of the design and let focus remain there, so that after a successful design has been developed, it can be created to fruition before becoming confused with further misgivings of the chosen design.

Get broad input early on, make the best site design and project plan possible, and then focus the team on implementing the plan.

source

Other Points Mentioned

• remember, design is to fulfill a true need, rather than superimpose an answer to a presumed need
• hold group design critiques of other sites to gain insight on your teams views and expectations
• allow form to follow function.
• Be concise, and be generous with headers, subheads, and lists, so the user can scan your content easily.

Content development is the hardest, most time-consuming, and most consistently underestimated part of any web site development project.

source

Content Management Systems

Various methods of CMS exist to allow the client to continue updating content. A blog is a simple form of a CMS. A wiki is another for of a CMS that differs from a blog, in that it allows all users to become the author.

Utilize Initial Project Scope

People are often reluctant to discuss budgets or deadlines frankly and will often agree to substantial changes or additions to a development plan rather than face an awkward conversation with a client or fellow team member.

source
Be up front and clearly communicated and referred to during a project in order to prevent and stay clear of “scope creep”. Four words come to my mind that seem to connect and carry the meaning of this concept: schedule, budget, scope, and communicate.

Don’t let the perfect become the enemy of the very good.

source

“Scope creep” is something I tend to do to myself! Even in our elementary basic science site, I made it harder for myself. The funny thing is that I recognized I might do it, and I tried not to, and it still happened! Part of the Web Style Guide that got me thinking of this is when it mentions limiting the scope by an exact number of pages. Though it is recognized that a page can’t simply be quantified in time and effort by calculating its pages, still, having a rock hard numeral to go by pulls in the reins.

Accessibility

Universal design is a valuable asset. It is designing with all people, all systems & devices, and all circumstances & purposes in mind. This is an area of design that I am excited about. It involves a sleeker design. And, I enjoy the idea of designing something that is flexible & “living.” This is a dynamic method of design that creates a movable mesh of “programmed” design that is responsive to its separate & unique users.

Information Architecture

When it comes to designing information architecture, a good process is to take inventory of content and start grouping it into chunks of information (arranging them is level of importance). It is suggested to have potential audience members review chunks of information separated on cards and organize it themselves, as well as provide them an already created architecture and observe their reaction.

Rather than provide long passages of reading (which can be provided to the user through a printable page if they desire), link to separate pages of chunks of information from a general page that presents those categories. Create modularity within a page to visually convey the separate chunks of information.

Five themes for categorizing information:

• chronologically
• geographically
• commonality
• alphabetic
• according to their ranking compared to each other (ie. price, percentages)

Navigation

Each unique page ought to enable simple jumps to other areas of a site. This is often done by presenting an overall (global) navigation that remains consistent on a page. A common method is also to have a sub-navigation (local) that allows browsing within each overall navigation.

Good navigation will explain itself and release the need to verbally tell a user to where go. Attempt to be versatile in designing this interface, so that those who frequent the site and know where to go can find it quickly, yet provide a way for new users to find and understand the navigation.

Site Structure

(more…)

I have focussed on the Web Style Guide, 3rd Edition in this essay, which is a valuable tool that adds further confirmation to what I have been taught at BYU-Idaho.

It’s initial focus is on the process of design. Consider the development team. It’s important to analyze the assets of each of its members, and therefore distribute tasks accordingly and utilize their unique talents. As a team, look at what you have going for you in the next project, and also what may be a challenge. Create a “project scope” of goals and plans for the project and put it on paper, for the sake of the team’s organization, as well as the relationship between all involved.

Circumstances may often involve team members filling more than one role. One role mentioned in the Web Style Guide is the “usability lead.” I love the consideration that good designer’s take for the end user’s experience, and also recognizing that design is about people’s experience with the design rather than mere tasty bits of technology and pasted design. The usability lead researches potential users and develops a persona to design around. The usability lead also reviews the success of the project at the end, determining if the user is responding according to the outcome outlined in the goals of the project scope.

Emphasis ought to be put on the early stage of design, with constant revisions & options in the beginning and the idea of improvement continually in the process. However, toward the end, the project ought to be handed to those who specialize in the final implementation of the design and let focus remain there, so that after a successful design has been developed, it can be created to fruition before becoming confused with further misgivings of the chosen design.“Get broad input early on, make the best site design and project plan possible, and then focus the team on implementing the plan.” (http://www.webstyleguide.com/wsg3/1-process/3-web-teams.html)

Other points mentioned are (1) remember, design is to fulfill a true need, rather than superimpose an answer to a presumed need, (2) hold group design critiques, and (3) allow form to follow function.

“Content development is the hardest, most time-consuming, and most consistently underestimated part of any web site development project.” I definite agree with this statement!

Be concise, and be generous with headers, subheads, and lists, so the user can scan your content easily.

Various methods of content management systems exist to allow the client to continue updating content. A blog is a simple form of a CMS. A wiki is another for of a CMS that differs from a blog, in that it allows all users to become the author.

The project scope has to be up front and clearly communicated and referred to during a project in order to prevent and stay clear of “scope creep”. “People are often reluctant to discuss budgets or deadlines frankly and will often agree to substantial changes or additions to a development plan rather than face an awkward conversation with a client or fellow team member.” (http://www.webstyleguide.com/wsg3/1-process/8-project-charter.html) Four words come to my mind that seem to connect and carry the meaning of this concept: schedule, budget, scope, and communicate.

“Scope creep” is something I tend to do to myself! “Don’t let the perfect become the enemy of the very good.” Even in our elementary basic science site, I made it harder for myself. The funny thing is that I recognized I might do it, and I tried not to, and it still happened! Part of the Web Style Guide that got me thinking of this is when it mentions limitting the scope by an exact number of pages. Though it is recognized that a page can’t simply be quantified in time and effort by calculating its pages, still, having a rock hard numeral to go by pulls in the reins.

Universal design is a valuable asset. It is designing with all people, all systems & devices, and all circumstances & purposes in mind. This is an area of design that I am excited about. I enjoy the idea of designing something that is flexible & “living.” This is a dynamic method of design that creates a moveable mesh of “programmed” design that is responsive to its separate & unique users.

This has been an opportunity to explore typography in a different environment than print.

Good design principles apply in any situation. Such as, developing a heirarchy through proportion, type texture, etc., and cleanly laying out type to fit a limitted space! Other things are unique to screen. One tutorial mentioned using approx. 140% line-height as opposed to the typical approx. 120% leading used in print.

I used Agency AB and Georgia

I used Agency AB because the geometric form and angles reminds me of science. I want it to feel like a laboratory. I used Georgia because I want a standard serif that will be easily legible, even if it’s boring.

It was awkward using Fireworks for the first time, expecting the same flexibililty that inDesign provides for type. I’m guessing I ought to get used to that though, since such desired flexibility from inDesign probably isn’t a possibilty in web design anyway…but maybe that’s not entirely true?

The goal here is to observe good design on the web, and develop the ability to capture their essence in a quick sketch.

12 good sites

I really appreciate the many well designed web sites I came across. Sketching them also brings aspects of the design to my attention that I may have overlooked if not attempting to put them on paper.

It’s challenging to detail what a page looks like…having it actually look like the site! Images with reverse type were hard to convey. Also, depicting general value of a page is difficult. It seems like shading a background, etc., makes the rest of the sketch hard to read. Sketching appropriate proportions and straight lines is tricky for me.

There are similarities among pages I am attracted to.

Lots of clear space as margins of each page element made a site a lot more comprehensible, because the elements were cleanly compartmentalized and simplified into a few, easily distinguished categories.

I like the idea of displaying a large image area to set the theme of the page and introduce you to what it’s all about, in conjunction with a few blocked columns just below or near that image space.
For example: gugafit.com, secondandpark.com, and gositewave.com.

I found too many columns in a page make it cluttered and confusing. Particularly if there is not some horizontally aligning element. I also found that there are a lot of good and pleasant solutions to web design, because even though there were many similarities in these sites, there were also a lot of sites with unique layouts I did not observe in other sites I came across.
For example: bubblessoc.net.

I sketched twelve sites I like, though there are so many more! Here are links I found VERY useful in seeing all the many options of good design out there.

Resources

• www.souldeepdesigns.com
• www.thebestdesigns.com
• www.smashingapps.com/2008/10/20/27-best-places-you-should-visit-to-get-incredible-web-design-inspiration.html
• www.webdesignerwall.com/trends/best-of-css-design-2007/
• www.cssbased.com

This part reminds me how important it is to complete one step of the process before moving on, because if I don’t do this thoroughly, I’ll end up coding & designing at the same time…not so good.

Initial layout.

My initial layout has the three bottom info boxes aligned to the right. I moved them to the left, so that they will be closer to the visual zone that people’s eye tend to occupy (is there a word for that area?). The image can afford to be farther away from that area, seeing as it will naturally attract more attention anyway (the info boxes may be more boring, so I want them to be where they’ll be noticed).

New layout. Mis-aligned nav bars.

New layout. Aligned nav bars.

The last layouts I played with the navigation. I initially mis-aligned the lower nav bar on purpose, so it is distinguishable from the higher nav bar. Lining it up creates a cleaner look, but also draws more attention to the nav bars than I think I want (and maybe I don’t want ‘cleaner’).

I’m debating on this one. More attention on the nav bars may be good, because I don’t want the kids to miss sections, but if it’s more prominent, it may visually combat with the page’s content. I want their eyes to be on the pages content, and not hopping around. But maybe hopping is good, because it will keep them active? I think I’ll have to incoorporate style into the nav bars first, to see if style successfully distinguishes between the 2 nav bars (while keeping them aligned).

This part is the most laboring, and also the most fruitful.

I have a couple forms of ‘thumbnails’. First, there are the ones that come as my thoughts are completely open to anything and still clueless as to what is needed. In this case, the actual pen to paper process helps, even if the visual result means nothing.

Then, there are structural sketches. In this case, elements are placed in specific locations, though nothing visually is depicted in these locations. Next, are these ones in which structure is still being determined, but bits of style are leaking in.

Figuring out how it all connects and what’s most important…

I created a bubble map of the information’s heirarchy (for my own sake) before creating this one which lists specifics web pages.

Lines without bubbles represent information on a page that doesn’t connect with a new, additional page.

This step is how I get my focus.

Client:
Fifth grade teachers & students’ parents.

Audience:
Fifth grade students in Idaho.

Expectations:
Simple, while addressing all information included in the standards & presented in a stimulating way.

Required Outcomes:
Understand the Structure and Function of Matter and Molecules and Their Interactions

1. Students should be able to identify the characteristics of an element, compound, and mixture.
2. Students should be able to recognize the differences in molecular distance between a solid, a liquid, and a gas, as well as differences in basic molecular motion.
3. Students should be able to recognize the change(s) in physical properties that take place when physical changes occur including ice melting into water and water being heated into steam.

Strengths / Weaknesses & visual audit of existing content:

http://www.kidsknowit.com/interactive-educational-movies/free-online-movies.php?movie=Lasers

http://scienceprojectideasforkids.com/states-of-matter-liquid/

http://www.sciencekidsathome.com/science_topics/amazing-polymers.html

A strength such sites have is that they are out there and people care enough to create them. They add a fun spin as well.

A weakness is that the ‘fun’ and ‘engaging’ parts of the sites tend to distract from what is being taught, rather than using those fun colors, shapes etc. to help focus on the concepts.

Organic forms and relaxed, cartoon-like styles may forget that design is still important even when creating something that is not in a formal, crisp style. Sans-serif typefaces tend to be used a lot, but perhaps it’s not true that sans serif = ‘all kids like it that way, and it’s always fun’. It can be overused; pulling away from more dynamic typography & legibility.

The organization and connections of different pages of information is an idea that is making more sense to me now.

It wasn’t easy to categorize information that was so disconnected from each other! We had to somehow draw a theme from them. Coming together in our ideas definately helped; we each had a new idea that the others had not thought of. I learned more how to cooperate in a group for a successful design, how to view a website as streams of organized material connected to each other, and to compile information into a book.

I appreciate doing the presentations as well. I want to feel comfortable doing that. I am glad we had a project that we were expected to do quick, so we could accomplish something right off the bat in this class. I feel it was successful.