Susan's Blog :D!

Sitemap

2011-11-01T11:08:00.000-07:00

Week 4: Sitemap

This is the constructed sitemap for Coffee Delight website. I will have the home page that can navigate to other pages. A total of 6 main navigation. 1 sub-navigation on the about page.

Here is a list of the pages:

Home
Coffee (Menu)
About Us

History & Goals
What is organic coffee? What is Fair Trade Coffee?

Location/Directions
Reviews (users review the coffee shop; maybe live comments)
Contact Us


Sitemap

Competitor Analysis

2011-10-25T08:47:00.000-07:00

Week 3: Competitor Analysis

This week we research two competitors and analyze their websites. Also, think about 2 things that we can use to make it better than the competitors.

Competitor #1: Honey Honey Café and Crepery

http://www.honeyhoneycafeandcrepery.com/index.html

Honey Honey Café and Crepery is a small restaurant that offers café and crepery. So not only does it has coffee, they also offer other food such as sandwiches, crepes, salad, soup, burgers, and more. The website has good design layout.

Advantages:

There is a review section where customers would rate the restaurant.
Rounded corners for images. Used a good amount of images for some pages.
Nice design layout overall for the website.
Great menu page, organized neatly in columns and in headers.
Some images are small, but enlarged when hover over.
Great resources on directions page.
Good navigation

Disadvantages:

Even though the address, hours, and contact information are on a few pages, but it should be labeled in every single page.
The menu page can be cluttered when you look at it a few more times. Need more white space.
Too many different sizes of color and headers on the menu page.
Seems like the content is too constricted for the body size. Maybe the width should be wider.
Not much about the restaurant itself. Maybe some more information would be good, so adding the ABOUT PAGE is good.

---

Competitor #2: Four Barrel Coffee

http://fourbarrelcoffee.com/

Four Barrel Coffee is a small coffee shop. The website seems very clean and simple. This website has a shopping cart where you can purchase online.

Advantages:

Good use of large images. Most of the images are in portrait style.
Good idea to have animated images as automatic slideshow.
A lot of content: history of company, sourcing, roasting, café, etc.
Labels on some images as links.
Great use of breadcrumbs for users to go back on pages.

Disadvantages:

Content & navigation are not consistent in every page; they switch from places
Too much content might drag the users away from the website. Less information about self and more about the “coffee.”
Content is mostly on the right side of the big image. Centered might be better.
Font size is too small. Some people might not be able to read it such as elderly or farsighted people.
The content paragraphs and sentences are not capitalized. Very unprofessional.
No menu page? Seems like the Coffee page is more about selling coffee beans and roaster that grew from other countries. No menu for in shop coffee.

Strategy Analysis (Things I might use to make my site better than competitors):

Reviews section -- great way to get feedback and show good points about the coffee shop
Animating images on automatic (or slider) -- to show more than one image
Images on mouseover to enlarge sizes(?)
Small description/captions on the type of coffee in the menu page
About page: History/Story on coffee shop
About page: What is organic/fair trade coffee?
Images with rollover content -- to display image and content at the same time (?)

Concept Map

2011-10-18T08:38:00.000-07:00

Week 2: Concept Model

This week we create a concept model that represent the website. I made the map differently; instead of going into what pages are going to be in the website, I made a mind map. I thought of any words that would go with the coffee shop. I wanted a "warm and relaxing" feeling for the website. It's just like making the website like how people will feel after drinking the coffee. I wanted to add in "elegant" in the map, but the word didn't work out with the rest of the concept map. The handwriting font style will be used only for headers. It should add a elegant feel of soothing from drinking the coffee.


Coffee Delight concept map

Persona & Usability Test

2011-10-11T11:55:00.000-07:00

SENIOR PROJECT STUDIO; FALL 2011

Week 1: Persona & Usability Test

This week we do research on what type of website to work on. Construct a persona that fits the website. Find a competitor's website and do user testing.

Website: Coffee Delight

Concept: A made up coffee shop that advertizes their shop and coffee.

Target Audience: young adults, adults, ages 16+

Pages: menu/coffee, about, location/directions, contact, reviews? events?

Elements: images, animate images? slider, social networks, lightbox?

-----

Persona

Name: Kimmy Parker

Age: 20

Tech Ability: Normal, computer-savvy

Online: 10 years

Personal background: A student that goes to a state college. She studies biology. She took a few basic computer classes. She is currently in working part-time in an internship as a research recorder on experiments. She has a family of a father, mother, baby sister, and a younger brother. Her hobbies are using the computer, doing sports, reading, and spend time with her friends and family. Her special skills are that she’s good at researching. She loves to eat and drinks coffee often. She loves to sleep. She has a pet dog named Muffin that she plays with a lot. She studies and works hard, so she sometimes doesn’t have enough sleep. Therefore, she drinks a lot of coffee from time to time. She has classes in the morning and work in the evening. She needs coffee to stay awake.

Goals: To finish college, become a biologist, and find a job in the future.

Concerns: Gets tired all the time, lack of sleep, need coffee and energy drinks to stay awake during finals

Objective/Needs:

Searching for the best type of coffee flavor for herself.
Wants to know what is in the coffee menu.
Wants to check out the location of the shop.
Would like recommendations or any specials for coffee choice
Looking for organic and fair trade coffee

Usability Test Plan

Website: Ritual Coffee Roasters | http://ritualroasters.com

Purpose: To see if it is user-friendly website

User: Sister, student

The top primary navigation was mostly clicked first. Menu for coffee was the first page looked at. The navigation is convenient since it’s on the very top of the page. However, the font size might be a bit small. Second click were the content boxes on the center right – that’s where the content was. The huge image was right in the center while the content is on top of the image with a transparent box. The secondary navigation was clicked last. Seems like it didn’t stand out much and unnoticeable since it’s at the very bottom. Important navigations should be up on top of the page. Also, images and logo were clicked to see if it was clickable.

Is the website easy to use?
Followed the navigation on top bar. Easy to use.
Can you find the information that you were looking for?
Yes, found the coffee menu. Might need to reword some navigation for menu, about, and other things.
Was navigation located at a place where it’s supposed to be?
Top bar primary navigation is fine. The very bottom secondary navigation is hard to tell which can be easily ignored. For example, shop or contact should be moved to the top navigation bar.
How is the website design overall?
Very nice. Creative logo. Large images in the center. Nice transparency on content boxes. Nice lightbox on images.

How to Create Animated GIF in Photoshop

2011-09-19T09:53:00.000-07:00

Tutorial: How to Create Animated GIF in Photoshop

& Posting the GIF to Tumblr blog

By: Susan Lei

The tutorial is completed! All the information in how to create the animated GIF is on the website. This tutorial is based on using Photoshop in creating an animation and animating graphics. The tutorial only contains screencaps of the program and other window screens.

Features on the tutorial:

Demo buttons available to view the animated GIF on a small window popup
Quick links for number of steps on the side column on every individual documentation page (fixed position)
A scroll-to-top link to go back to the top of the page (not interactive)
A scroll-down link to the number of parts of the steps (not interactive)
All sections are numbered in parts and steps in headers
All parts are in bullet points
Important text are highlighted in red color and bolded

Changes that are removed and could not work:

No interactive jQuery/JavaScript scroll-to-top links/scroll-down links
No interactive tabs that fade in when clicked on


home page tutorial

documentation page; step 1

Visit the tutorial!
--Susan :)

Rubric & Learning Plan

2011-09-10T16:03:00.000-07:00

Week 8:

Rubric:

Lesson Plan for today's testing: [Step 1: How to download and convert the video file]

Scores: 1 - poor; 5 - excellent

Content (Amount of information, clarity of the content)
3 out of 5 - Lack of information and too short. Some information are missing. Content clarity is just right. Need to explain more such as how to copy & paste and where to type link.

Multimedia (Relevant images)
5 out of 5 - Good and relevant images of screencaps for the content discussed. The images are even marked with red borders to highlight important parts.

Mechanic (Errors, spelling)
5 out of 5 - No errors whatsoever. All links work.

Interactivity/Engagement (hands-on)
5 out of 5 - Based on a hands-on activity on working by themselves and looking at the tutorial at the same time.

Target Audience (reading level)
4 out of 5 - Reading level is understandable and appropriate. Some people might not understand some content if they do not know much about using computers.

Presentation
5 out of 5 - Good presentation with images and content. Content is in bullet points and headers for hierarchy.

Sample of one part of the tutorial in how to download a YouTube video file.

Learning Plan

Goal:
The main goal is to learn how to animate .GIF with Photoshop CS3. Second part is to post the animated GIF onto Tumblr blog.

Objectives:
Knowledge/understanding?
To gain knowledge of the whole process in animating gifs.
To understand the how to work in a process of steps in completing the goal towards animating GIFs.
To develop the skills and learn the tools in how to use Animation and Photoshop.
To improve animation skills in Photoshop.

Why do you wish to learn this? Personal/career?
This tutorial is related to personal goals in wanting to learn more in how to animate gifs in advanced levels or basic levels for fun in spare time. The tutorial is related to career goals because users learn skills and tools in how to use Animation and Photoshop. They also learn how to deal with learning things in a process and steps by steps.

How will you learn this?
The tutorial will be breaking down into separate steps and topics for easier learning. Each step also has their own different parts attached.

How to download and convert the video file
How to use Photoshop (basic)
How to create animated graphics/gifs with Photoshop (main focus)
How to add/edit special effects on the animation (optional advanced level)
How to use Tumblr (basic)
How to post the animated GIF to Tumblr blog

REMINDER: NEED STUDY GUIDE OF CONTENT?

Progress on Tutorial

2011-08-28T11:34:00.000-07:00

Week 7:

Website for tutorial:
I have been working on the HTML webpage for my tutorial. I put everything in one page using a jQuery tabs. The tutorial content is so long that users might not want to keep scrolling to go to the content. So, I'm trying to add a ScrollTo code for sliding down to a part of the tutorial by clicking on a link list. This way, it's easier and faster to get to the point. So far, I can't seem to find one that works. I'm still researching for the code. I will also find a code for Back to the top of the page.

Tutorial:
I'm already 3/4 of the way done explaining on the tutorial. I finished up to the part on saving the animation. I'm going to continue adding extras and advanced animation part. I have hierarchy for organizing which parts are important. I have now put big headers for topics and bullet points to keep each part in order. I took a lot of screencaps for the tutorial and marked them in red borders to highlight important areas. I even have demos of the outcome of the animated GIF. I might need to review over the tutorial in the end to check if I need to fix or add anything.

Here's a sneak peek of how the html webpage looks like. I'm still doing some modifications to it, so it's only a rough look:

E-Commerce Affiliate

2011-08-22T08:37:00.000-07:00

E-Commerce Site Design [Week 6 blog]

For this week's assignment, we will blog about a product we like and is selling it online. We will talk about our interest in the product and affiliate with a link. I have decided to talk about a movie in DVD.

[Movie] Transformers 2: Revenge of the Fallen

I love the whole series of Transformer. It has a lot of action throughout the whole movie. I watched the movie in a theatre. It was amazing watching in the big screen. I would rate this movie a 5/5. Michael Bay, the director and producer of Transformers had made a magnificent movie with 3 series. All the special effects and robotic characters looked real and well done. Transformers 2: Revenge of the Fallen is number 2 of the series, there is also number 3 that came out not long ago (Transformers 3: Dark of the Moon).

If you have seen the movie or haven't yet, I suggest you to purchase a DVD for yourself! You'll get to watch it right at home in your big screen television with your family, friends, or relatives!

If you haven't watch the movie yet, check out the trailer! You can also check out the official website of the Transformers movie!

[Movie Details] Transformers 2: Revenge of the Fallen

Widescreen; Blu-ray Disc
Released Date: 10/20/2009
Rating: PG-13
Runtime: 150 minutes
Director: Michael Bay
Genre: Action & Adventure, General Sci-Fi
Studio: Dreamworks
Main Stars: Shia LaBeouf (Sam), Megan Fox (Mikaela)

Storyline:
A youth chooses manhood. The week Sam Witwicky starts college, the Decepticons make trouble in Shanghai. A presidential envoy believes it's because the Autobots are around; he wants them gone. He's wrong: the Decepticons need access to Sam's mind to see some glyphs imprinted there that will lead them to a fragile object that, when inserted in an alien machine hidden in Egypt for centuries, will give them the power to blow out the sun. Sam, his girlfriend Mikaela, and Sam's parents are in danger. Optimus Prime and Bumblebee are Sam's principal protectors. If one of them goes down, what becomes of Sam?

Interested in the movie? Purchase your own DVD online now from Best Buy! You can also visit the store to purchase the movie!

Sale Price: $16.99

List Price: $29.99

Purchase here!

Research

2011-08-21T21:20:00.000-07:00

Week 6: Research your final project online and develop a case study to present to class. Include your target audience, main form of instructional strategies, and a sample "similar" site, if possible.

I use Tumblr and make animated graphics for myself during spare time. On what I researched on Tumblr, animated gifs are popular and users like to post them. Sometimes it's only for fun entertainment and interest. I am going to based on users who make animated graphics for Tumblr.

Why We Love Animated GIFs?
Here's a great article about why we love animated gifs. I agree about when some people are not interest in such animation, it is unavoidable. It's hard not to get attracted to the animation. (Source) These animated graphics are made of frames and animate repeatedly. Sometimes, animated graphics are made for advertising, so it's not only for entertainment. However, some animation can be annoying and marked as spam. The article says, "and yet animated GIFs that show just a few seconds of someone making a funny face repeatedly become exponentially more appealing to someone than a picture of the same person that did not move." I agree because an animation of a picture would be more interesting than a still image with no movement. A still image is boring, but an animation has more movement, meaning, and significance that make sense and attract the audience.

Target Audience:
It depends on the user making the animated graphic. What is the intended use and purpose? Is there a message the user is trying to say? When making these animated graphics, we should know who we are trying to target. (Source) Since making animated graphics are for fun, there might not have any message to communicate through. However, if the audience is interested in what the graphic is related to. The targetted audience are teenagers, young adults, and anyone who would like to learn how to create animated graphics/gifs. I assume this tutorial is for users who already know how to use the basic Photoshop. If not, I might teach a simple basic introduction to Photoshop.

Instructional Strategies:
My strategy is to teach based on hands-on. It's easier to teach just typing on text and showing screencaps of the program. By doing this way, the learners can follow what I do step by step while they try it by themselves too. However for swf files might be hard because it will be hard for the learners to constantly go back and forth watching the swf/video to learn the tutorial. In text and screencaps, learners can pause, go back, and even test out the program while reading through the tutorial with no problems.

Persona: (user that may be interest in the animated graphic tutorial)
Name: Lilly Scott
Age: 16
Hometown: New York City, New York, United States

Lilly is a student that goes a high school. She take computer and art classes at school. She gets along with everyone. People say that she carefree and very artistic. Her dream job is to be a graphic artists someday. She is also good at reading and writing. She lives with her parents and a baby sister. She loves her family a lot that they visit their relatives once a year in other countries. In her spare time, she loves to watch television, listen to music, read, write stories, and making graphics on the computer. She is fascinated with life itself. She loves to explore and travel while getting inspired by the art all over the world. It gives her ideas in making graphics. She sometimes like to draw out designs. She like to spend time with her family and friends during the weekends. Not only she has hobbies at home, she also like doing sports outdoor. She always like to try any sports. She gives a 100% effort for trying.

Samples:

Ultimate Tumblr GIF Tutorial
Great tutorial. this tutorial is based on screencaps and text only, and that's what I wanted to do. I need to break it down into steps. For this sample, this user numbered the steps large font headers. After the header, it is the instructions. Then after the instructions for that step, there is the screencap and more text.
GIF Tutorial Youtube Video
This user highlight important parts with red border, which is easier to spot. It also lure the audience's attention to that part. Titled and put header for titles. Bullet pointed for details. Cropped to enlarge areas of the screencaps.
TracyLeeRose: Tutorial Animated GIF
This article has introduction, middle, and conclusion about animating gifs and tutorial. It also has a history about animation. I like how this person numbered the parts, bolded text, and used red for warnings. Also, a video tutorial is included.

Final Project Proposal

2011-08-14T23:12:00.000-07:00

Tutorial: How to create animated gifs/graphics with Photoshop
Week 5
I'm deciding on to just take screencaps of the program and discuss about it step by step on a page. ~~If that does not work, I will use Captivate and make a video with audio instead.~~ I am just going to make a tutorial using screencaps and text. No Captivate.

Content:
Making animated pictures through frames with Photoshop and turn them into gifs. Instead of creating animation with single images like a slideshow, we can make animated pictures with video files. When the animated graphic is made, it looks just like scenes from a video. We can turn the animated gif into looking just like straight from a video.

Media needed:
Photoshop, video file, browser, screen captures. ~~audio? Adobe Captivate?~~

Target Audience:
teenagers, young adults, ages 14+, anyone who wants to make animated gifs

Flowchart pages:
introduction, instruction step by step, conclusion of summary

Optional add-ins ~~(still in deciding)~~:
How to create animated gif to post on Tumblr

[EDIT UPDATE 8/19/11]: added more for the tutorial

Tutorial: (divided into steps of these categories)

How to download and convert the video file
How to use Photoshop (basic) ~~(unconfirmed)~~
How to create animated graphics/gifs with Photoshop (main focus)
How to add/edit special effects on the animation (advanced level)
How to use Tumblr (?)
How to post to animated graphic to Tumblr blog

TO-DO List for tutorial:
- numbered steps
- headers in large font size
- bullet points for keys
- highlight important areas in red border, red arrows to point
- bold text for important words
- crop off unwanted screencap areas
- introduction of what to expect from tutorial
- conclusion with a summary of whole tutorial

Tutorial with Captivate

2011-08-08T09:11:00.000-07:00

Week 4:

Just finished the midterm in class. I have uploaded my demo online. My tutorial is about teaching users how to download a syllabus document file on Casabasa.com! (How to Download a Syllabus on Casabasa.com) The tutorial is made on Adobe Captivate with screen captures. I actually recorded my own voice and used it for the tutorial. I hope it will all tie up together when presenting. I hope I fulfilled all the requirements for this midterm project. I'm sure I added 3 interactions in the tutorial for users to make 3 clicks. I also hope that the tutorial is actually teaching users something. Check out the tutorial!

How to Download a Syllabus on Casabasa.com

Edit: ~~There are a few errors in the tutorial. I'm going to fix it and add some changes and then re-upload the tutorial again.~~ I have uploaded the final version of the tutorial. I have fixed and made changed to the errors and mistakes. Everything should tie up neatly now with a beginning, middle, and end. Also, there are 3 interactions, the next button, the typing text area, the help widget, and the quiz.

9 Levels of Events Instruction

2011-07-27T20:48:00.000-07:00

Week 3:

Today we learned about the 9 levels of events for instructional design concepts. They are really helpful.

Gagne's The Nine Events of Instruction

Level	Event
I	Gaining Attention (reception)
II	Informing learnings of the objective (expectancy)
III	Stimulating recall of prior knowledge (retrieval)
IV	Presenting stimulus (selective perception)
V	Providing learning guidance (semantic encoding)
VI	Eliciting performance (responding)
VII	Providing feedback (reinforcement)
VIII	Assessing performance (retrieval)
IX	Enhancing retention and transfer (generalization)

So for my short demo tutorial. I am going to teach students or users how to download the course syllabus from Casabasa website. It needs at least 3 interactions with clicking. Users are able to click on those for help and to continue. At the end, we are supposed to create a quiz. So I only made 3 questions with 2 multiple choices and 1 true or false questions. I made questions about the demo. I will be making a supporting web page soon for the demo.

e-Learning Principles

2011-07-18T12:12:00.000-07:00

Week 2:

What I learned today was about the general e-Learning principles. They are really helpful. The principles are mostly about how to get users to click or let them notice. I understood the principles telling us to use images/graphics as well as text close to each other, and must be relevant so it won't confuse the users. It is best not to add a lot of interesting materials or flashy things because it distracts the users out of focusing on the main content. I agree because it's true!

Signaling
Dual mode
Multimedia principle
Contiguity principle
Modality principle
Redundancy principle
Coherence principle
Personalization principle

Later, we learned about using the Adobe Captivate program. Right now, I'm still new at using this program. I want to learn how to make a teaching video/swf just like this tutorial example: Uploading Your Photos. It's a really good tutorial. I don't know how to create buttons to go next page or textboxes yet. Soon, I hope.

Multimedia in Learning

2011-07-16T18:47:00.000-07:00

[MM3312 Computer-based Training] Summer Quarter 2011
Week 1: Research Multimedia in Learning

This week we are supposed to research how is the best ways to teach the benefits of using multimedia in learning applications. We pick 1 out of the 3 types of transfer of learning.

Transfer of Learning - the application of skills and knowledge learned in one context being applied in another context (Cormier & Hagman, 1987)

There are 3 types of multimedia Transfer of Learning:

Inform - teach them some information
Near transfer perform - like teaching a software and is step by step
Far transfer perform - there is no exact answers, but several possible solutions or performances that could be elicted, to help narrow your focus.

I actually like both informing people with information as well as teaching them step by step. For this research, I am going to choose near transfer perform.

Near Transfer Perform (http://edweb.sdsu.edu/eet/articles/transferLearn/start.htm)

Near transfer perform is procedural and to teach step by step tasks. Most computer-training skills fall into this category in teaching and has success most of the time. Usually the process of learning through near transfer perform are procedural and applied in the same order. The benefits of this teaching method is easy to learn and easy to train the skills and knowledge. However, if there are any changes or new things came up, the learner will be unable to learn anything with this type of teaching. When there are problems that some people could not solve, the instructional designers/teachers can just show them step by step on how to solve. Also, by using the near transfer perform, it can allow the learners to catch up (follow up) on learning what they need to do. Near transfer perform is almost like a reference or guidelines for others to find out solutions to problems. Learners can come back again and use the same steps learning to solve the problem.

At the same time, learners are learning and training their skills and knowledge. They also learn and control their actions in following the steps to learn how to solve a problem. It's like hands-on activity on the computer, and learners do it themselves. Great way of learning! After managing on their own learning step by step, they will be more aware and "increase the accessibility of their learning to be applied in situations that occur in the future and help themselves in transferring their learning!" (http://tarunagoel.blogspot.com/2009/11/transfer-of-learning-theories-and.html)

There are a few tips listed for near transfer perform during processes of pre-training, during training, and post-training that I thought were good tips:

Pre-training:

Design training with specific objectives around tasks that the learners perform in real-life
Design performance support tools such as references, checklists, and guidelines that learners can use post training

During training:

Use analogies from your own experience and that of the learners
Provide feedback, guidance, and support during the training process
Share best practices and tips towards application of training

Post-training:

Assess learners’ understanding of concepts by allowing them to apply the learning without feedback or guidance
Follow-up with learners to identify the challenges in application of training and review the action plans
Provide coaching and mentoring to help learners overcome the roadblocks in application of learning

The near transfer perform is preferred more than far transfer perform. The reason why is because instructional designers only teach far transfer perform method when there are changes and uses strategic skills. Far transfer perform has no correct approach or outcome as stated as the definition.

Final Project: WizQuiz [DONE]

2011-06-13T09:34:00.000-07:00

WizQuiz homepage

WizQuiz Quizzes page

WizQuiz individual quiz page


WizQuiz category page

I have completed my final project for Interaction Design for Entertainment!! When you have time or bored, come visit my WizQuiz website! I took a lot of time adding a lot of pages for this website. There's a lot of images as well. The sound element is on the homepage, click on the logo and you should hear "Cool man!" The interactivity for the website is when you mouseover the 'featured quizzes' boxes and the individual quiz boxes, they should change color. The tabbed 'browse quizzes' should slide when clicked on the tabs. On the quizzes page, when you mouseover, a sliding popup will indicate where you're hovering. Anyways, I tried to make this website as fun as possible when the fun illustrations I designed. Also, the icons for the navigation looks fun and easy to click. I tried making the website easier to browse and search for with quiz categories. Each quiz also has a small description to attract users to see what the quiz is about. ou can also 'retweet' and 'like' the website to share it! The quizzes are drawn and embedded from a quiz website, Quibblo! Overall, the outcome of the website came out well and looks organized and fun!

WizQuiz: Feed Your Boredom

--Susan

Observational User Testing for WizQuiz

2011-06-03T17:33:00.000-07:00

Week 8:
The website is not yet completed, but there must be some user testings for feedbacks.


WizQuiz homepage

Here are a few questions I asked for user testing: (6 users)

What do you do when you're bored on the computer? Would you use this website to take fun quizzes?
What catches your eye right when you enter the website?
Does the website look fun for you to come back again?
Did you know how to navigate and search for what you're looking for? Easy to use?
Would you recommend the website to others?
Any other suggestions you can give me for the website?

User #1: Sister
She looked around the website and knew where to click. She said, "the colors really pop out and look fun." I like her suggestion on adding descriptions to the quizzes. For doing this way, it can help drawing the users to taking the quiz and knowing what the quiz is about.

I chat online with friends Yes, I would use this website for taking quizzes.
I really like the logo and name of the website. The colors really pop out.
Yes, I would.
Quizzes are easy to find because there are categories. Big buttons.
Yes, of course!
Maybe have some description for each quizzes and categories would be nice.

User #2: Brother
He didn't click much at first. So I told him, he can click other places, and there's more. He said, "it's interesting like I can keep on exploring since there is a lot of pages to go to." Mostly stare at the website and talk about it. There is a very interesting thing when he said, "too much color blue" and "too much white space on the side." I thought it was a good amount of white space.

Surf the web and play games. I would use if I am that bored.
Banner seems interesting.
Maybe, if i enjoyed it the first time.
Yes, the buttons/icons stands out so I knew where to go. As I keep browsing through, I knew where the quizzes are.
Yes.
More options. More attraction looks. Can add more quiz questions that is relevant to life today.

User #3: Father
For my dad, he didn't know how to use my website at all. He doesn't know how to use computer that well. He can only read Chinese, and a little bit of English. He used the translator to change into Chinese. After that, he read everything and know where to click. At least he picked up the mouse and click on a few things. I explained a few times to him and point to him on the website. He also said, "there is a lot of things on this website." It took awhile for him to explore through the website.

Check email and the news. I would use the website.
A lot of images. Good colors.
I would.
I don't know where to go, but I just randomly click. The big buttons help.
Yes.
None, looks good!

User #4: Mother
My mom doesn't know how to use the computer. She doesn't know anything! I taught her where to go and to tell her to click on things. She doesn't know English too. Frustrating. I just asked her the questions and she gave good responses.

None. Doesn't use computer at all. I would if I know how to use the computer.
Good images.
Yes.
Navigate at a good place.
Yes.
Colors too bright. Font size bigger?

User #5: Friend
My friend said there's a lot of information and "it looks crowded." My friend knew how to navigate through the website. Took a few quizzes and said they are fun. Since there's a lot, she would use this website. "I really like the top-rated and popular section for the quizzes! This way, I can just take the best quizzes that most people are taking."

Play games and watch videos. Yes, I would use.
Good choice of colors. The logo caught my eyes. Nice rounded boxes.
Yes.
Very easy. The content and information are there just at the right place.
Yes. I'll tell my friend about it!
Looks crowded a bit. More white space? Overall, good top-rated and popular section for quizzes.

User #6: Friend
My friend said, "the content is too low, I don't know to keep scrolling down that much. Try to scroll it up a bit." I might scroll the content up a bit, so users can see the whole thing. She likes the rounded corners on some boxes and said, "the rounded corners look fun; they're different and look better than the regular squared boxes." That's why I will try to add more rounded corners to the website to make it more fun and draw attention.

Blog/journal. Watch videos. Chat with friends online. Yes, I would.
Nice navigation with icons. Really good logo. I saw the logo first then the featured quizzes with images below. Fun colors.
Yes.
Made it easier with a category side panel for users to choose from.
Yes! Fun website.
Add something to the top-rated and popular content. Looks plain compared to others. Navigation icons are not related to the logo. Fix it to make it look similar to logo.

MLA Research

2011-05-16T10:11:00.000-07:00

MLA Research: [Done in WordDoc]

http://booroo.com/blog/polls-quizzes-surveys-whats-the-difference/
This website talks about the difference between quizzes and surveys. Very useful information, so users don't get mixed up. knowledge, skills, and abilities, quizzes can be fun too! That's why I want to make a fun quiz website. People can take quizzes for fun or when they're bored. I agree with what the website said, "Social quizzes are used to keep visitors interacting on a website." It is true, users take quizzes and they stay on the website. They browse through the website as well, so therefore, they are interacting with the website. Instead of making educational quizzes that requires brain thinking, fun interesting quizzes would attract users.

http://www.websiteoptimization.com/speed/tweak/blink/
This link is an article that discusses about "visually appealing" for websites. So it means visuals are important to most users; "first impression counts." This website is more of a physiological research in user's satisfaction speed. "The Halo Effect" is the cognitive thought of people's mind and emotional response to what they see. Colors and images are visuals that help improve satisfaction for users. However, choosing the wrong colors or wrong ways to put the images can affect bad responses to your website. To attract users, the website has be clean, fast-loading, and professional if possible. Poor website design will drive the user away. I will make my website interesting with good layout, also with interaction. As I was saying, first impressions count. For my quiz website, I will definitely include visuals with images and colors.

For example, this quiz website is very visual appealing, and attracts a lot of users. The well chosen colors, creative layout, different shaped content boxes are all good designs. It has images, graphics, and illustrations that are interesting visuals. However, the advertisements are distracting. Also, near the end of taking a quiz, the user has to wait for the result because of advertisement offers. There is a skip option though, but still distracting that drives users away. http://www.quizrocket.com/

Works Cited:

Meagor, David. “Polls, Quizzes, Surveys: What’s the Difference?.” Booroo. 23 Sept. 2010. 16 May 2011. <'http://booroo.com/blog/polls-quizzes-surveys-whats-the-difference'>.

"First Impressions Count in Website Design.” Website Pptimization. 17 Jan 2006. 16 May 2011. <'http://www.websiteoptimization.com/speed/tweak/blink'>.

Sketches for Final Project, WizQuiz

2011-05-15T17:57:00.000-07:00

Week 6:

I have sketched some drawings of the layout my website will look like. My website is a quiz wesbite. I've done many sketches and variations of how the homepage might look like. I'm still deciding which one layout to go with, and the layout might change throughout the week while I'm working on it.

Here are the logo sketches I drew. There's a robot's head with question marks around it. I have question marks there because the website has fun questionnaires, tests, quizzes, and more. Also for the the logo name, I came up with WizQuiz. I like how it rhymes and it's like a wizardry website that has a lot of quizzes. The tagline is "Feed your boredom."

For the layout, I have featured quizzes, top quizzes that are rated, popular quizzes that most people took, and view all quizzes. I have different sketches to move around the content boxes and tabs. For colors, I hope to make it fun website, so there might be bright and fun colors.

Final Project Proposal

2011-05-09T09:25:00.000-07:00

Week 5: Final Project Proposal

Concept:

WizQuiz / QuizWiz: Feed your boredom.
A website full of fun and entertaining quizzes? Fun quotes? Random or funny images?
I thought a lot of people would like to take some fun quizzes to find the results. The website will be fun, simple, easy to navigate, and find things. More visuals and images to make it better than other quiz websites.

Target Audience:

13+, teenagers, young adults

Scope:

There will be a list of types of categories for the quizzes. For example, personality quizzes, “What color are you?” User gets results after taking the quiz with images (?). Register, login/logout page to take quizzes?
Functionality of elements:

Embed quiz codes and share quizzes from quiz websites made by others. Contact form with PHP.

Design Elements:

Icons? Images?
Logo with a robot and question marks
Retweet on Twitter and repost on Facebook the results or quiz? Share.
Rate? Like or dislike buttons.
Users allowed to comment?

Content (Pages):

Home
About
Quizzes
FAQ
Contact

Example quiz/test websites:

http://www.quibblo.com/
http://www.mystudiyo.com/
http://www.queendom.com/
http://www.quizrocket.com/

Sound Media Element

2011-04-30T18:20:00.000-07:00

[Week 4]:

Another hard assignment this week. It is hard to find elements of sound a website. Rollover and onclick were the only solutions. I chose onclick sounds over rollover sounds because rollover can be annoying sometimes.

I thought about doing something like rollover sounds. For example, I looked at http://www.flashfunpages.com/ and it has a good example of rollover sounds. Later, I thought rolling over the images might be too annoying. So I came to a conclusion of clicking an image for sound effects instead.

THE SIMPSONS
Everyone should know who are the Simpsons. By clicking on the individual character images will allow the user to listen to the sound effects or just any quotations from the famous cartoon show "The Simpsons". I thought it might be funny with some of the famous lines. For motion, I just embedded a video as another media element. This video is funny because it's about the cast behind the voices of "The Simpsons" show.

Audio: Happy Birthday Lisa!

YouTube Video: The Simpsons - Voices: Bart, Homer, Lisa, Moe, Mr. Burns

Link to the assignment: Sound Media Element

Captivating Preloader/Transition

2011-04-23T20:00:00.000-07:00

[Week 3]:

This week's assignment is either creating a captivating preloader or transition. I have no idea what to do yet, but maybe I will include both. I've done a lot research again and looked at examples and demos to help me think what to do. I mostly found Flash websites with interesting preloaders and transitions. Most of them have sounds too!

Example Flash websites of transitions:
Nice change bg themes/dragdrop nav - http://www.infinitcolours.com/

change bg image

drag/drop navigation

Nice content transitions, sliding - http://www.colorchakra.com/

loader

slide in content

Content spinning around - http://www.sensisoft.com/

spinning menu

Rotating land, preloader with moving bg, follow mouse - http://www.magnivate.com/flash_us.html

loader, moving bg

rotating land menu

List of creative Flash websites with preloaders:
Smashing Magazine | Showcase of Creative Flash Preloaders

Flash is not the only way to create transitions or preloaders. CSS, JavaScript, or even jQuery can create transitions and preloaders.

After all the research, I decided to increment both a preloader and transitions. I added a lot of images, so that the preloader can load longer with more files. I found a tutorial for making an easy preloader with just CSS and jQuery. So Flash wasn't needed. It is really simple with a transition. I also added a script for changing background image with a transition by clicking on links/buttons. The images should have a script preloader that fades in the images. However, I'm not sure why the loader.gif won't show up, and I can't figure out how to fix it.. Well, when put all together, it looks neat!

Link to the assignment: Channel Islands | Preloader/Transition

Sequential Navigation

2011-04-17T21:09:00.000-07:00

[Week 2]:

This week's assignment is kind of hard. I need to do a lot of research for sequential navigation. Here are a few websites that have a list of creative navigation and menus. Inspiring and helpful. Navigation is not necessary with words, it can be just images or icons to just explore and click.

Helpful and inspiring list of blogs about navigation/menus:
1st Web Design | Unusual Navigation Menu
Smashing Magazine | 50 Beautiful and User-Friendly Navigatioon Menus
Freelance Folder | 30 Examples of Big Bold and Beautiful Website Navigation Menus

Examples of nice sequential navigation:

1. Fun brochure/ pamphlet-like navigation: http://www.thibaud.be/

2. Nice slide out menu and interactive gallery: http://www.utah.travel/themes/20-adventure/

3. Fun informational bubble intro: http://www.markerseven.com/

4. Fun icons for navigation that slide out: http://www.taptaptap.com

What is sequencing navigation?
It's really a navigation where the user clicks to go to the next link in the website. It is something creative. The navigation leads to another page. Sequencing navigation should make the user who wants to explore through the website.

Meditating
Before starting off with this assignment, I did a little meditation. Just sitting there with my eyes closed. First of all, my mind is blank. When I start thinking through, I was taking one step at a time. This means, I was thinking of what to do first. I was going to research first and think of ideas or look around. Meditating was helpful because it helped me go through the process one step at a time (in order).

In the end, looking at a lot of inspiring examples, I thought about using images and photos. Instead of using text, it seems boring for sequential navigation. So, I am using images and Photoshop. To make it more of a fun navigation, I thought about making rollover images and pop up mouseovers. I also included popup boxes for information rather than going to another a new page

Link to my assignment: Sequential Navigation

Identifying Modes of Online Entertainment

2011-04-10T16:39:00.001-07:00

[WEEK 1]:

For this assignment, we are supposed to research the different types of website. So for the final, we need to choose a type of website that can entertain and attract viewers. We discussed about what entertainment is in class.
----------

BAND WEBSITE:

Jay Park | http://www.jaypark.com/

Jay Park is a Korean American singer and dancer. The website is very entertaining, especially the background, which changes images every second. Navigation is fun, it slides. I like the transparency on the content area. there is just a lot of information about the artist, so it attracts fans and viewers.

MOVIE WEBSITE:

"The Twilight Saga" | http://www.twilightthemovie.com/

"The Twilight Saga" is a series of movies. The website has videos and trailers for viewers to watch. The image background and thumbnails of the scenes from the movie attract the viewers.

SHORT ENTERTAINMENT or "SHORT":

"Signs" | http://www.youtube.com/watch?v=uy0HNWto0UY

Schweppes Short Films | http://www.schhh.eu/shortfilms/

"Signs" is a short film. It is entertaining because it is interesting and good. Although the film is short, the climax and the whole plot of the film is good. Schweppes Short Films is a website with other short films. Trailers and previews are to show viewers sneak peaks and teasers.

"Signs" short film

Schweppes Short Films

CROSS-MEDIA PROMOTION:

"UP" | http://adisney.go.com/disneyvideos/animatedfilms/up/

"UP" is a Disney Pictures movie. In order to promote viewers' attention for watching the movie or getting interest, the movie "UP" now has other entertainment on the website: web games, gallery, DVD, downloads, videos, and more.

MMOG (Massively Multi-Player Online Game):

Nexon | http://www.nexon.net/

Nexon is a widely used by many multi-players to download different games to play online with internet. This company created many fun games and keep updating new things to attract players.

ADVERGAME (Advertising Game):

Honey Nut Cheerios | http://honeydefender.millsberry.com/

Honey Nut Cheerios is a cereal brand. They made a website to promote their cereal and even have games online for children to play.

WEBISODIC:

Wong Fu Productions | http://www.wongfuproductions.com/
YouTube channel | http://www.youtube.com/user/WongFuProductions

Wong Fu Productions is a a group of people making short films and movies for entertainment. They started off from YouTube and had gain interests of many viewers. They have weekend episodes and preview trailers to lure viewers.

BLOG:

Fail Blog | http://failblog.org/

The Fail Blog has many users that uploads anything that is a fail. Uploads can be videos, photos, or animated gifs. Most of the posts are hilarious. Users like to share fail moments or posts which are funny, so that is why the Fail Blog attracts many users.

WILDCARD: MANGA
MangaFox | http://www.mangafox.com/

MangaFox is an online reading website for manga and manhwa created by Japanese and Korean manga artists. Manga is like comic, cartoons, and picture reading books. Except, there are no colors, just black and white. Since the website has a lot of scans of manga books, many users use the website to read online.

For the outcome of this assignment, I came up with some navigation or slider called Kwicks. It slides when mouseover an image. I tried to make it as entertaining as possible. It's also colorful. Each image takes the user to the types of websites.

Link for the assignment: Identifying Modes of Online Entertainment

Interaction Design for Entertainment

2011-04-09T18:39:00.000-07:00

Hello everyone! I am back! Spring break is over. New quarter started for school.
Spring 2011.

I will post weekly assignments for this class: MM3301 Interaction Design for Entertainment.

Meanwhile, check out my personal portfolio website! >> http://susanlei.com

Sharon's class websites
http://www.casabasa.com
http://sk374.aisites.com

-- Susan

CurrentSF Final

2010-12-15T15:43:00.001-08:00

Week 11: Final Thoughts

This is the last week!! Finals! We have finished with the final touches to our CurrentSF website! Happy!

Check out the final website for CurrentSF!

My final thoughts for this website is that I really like how it turned out. I chose the right design layout for this type of events website with two columns content. The pagination coding for number of pages really worked well with the event posts. Most of all, the functionality works, so everything works! I am most proud of our team all working together and putting everything together. We all agreed on what to have on the website. Everyone did their work part of the group. Our project manager really managed the team well and told us what to do. He kept our team organized and made sure the timeline is met. The technical director did most of the coding, probably the hardest part of the job. The content editor did well on the process book and grabbing good content posts for events. Since we ran out of time, we didn't have enough time to work on the iPhone application layout that we planned to do in the first place. However, the website layout is more important, so we dropped the iPhone application layout. We're also sad that one of our team members who dropped this class. So, we only had four members. The progress of making CurrentSF was long because we had so many changes throughout. The website has quite improved. I'm sure that CurrentSF will attract tourists and young viewers to visit our website to search for events in San Francisco! In the end, we have accomplished making the website as a team. Also, I like my job as the art director. It was a fun project! GREAT JOB EVERYONE!!

Team Alpha Dogs:
Art Director -- Susan Lei (me)
Project Manager -- Sam Alegria
Content Editor -- Tyler Souza
Technical Director -- Ricky Navarro
Technical Director -- Melissa Picardo (Dropped this class)

-- Susan ^^

Rubric Critiques

2010-12-07T19:58:00.000-08:00

Week 9:

Macromedia/Web Page Final Project Rubric

Our CurrentSF layout website is 95% finished yet. Looks a lot of information and technical part of the website is complete. Using the rubric scale, here are the results after critiquing:

Design: 4 points
"The page design is visually pleasing, supports the page content, and is appropriate for its intended audience." Used the right kind of blog-like content boxes for a news event website. Very appropriate of the having the sidebar with social plug-ins and search engine bar because mostly sidebars are less important or have advertisements that people ignore.
Images: 4 points
"The images are well designed and mechanically effective, without distortion, excessive dithering, haloes or other negative graphic effects; images include Alt, Height, and Width attributes (may be in CSS) and offer initial thumbnail graphic if file size is large . The images were created with Fireworks." Event articles' images are great. Logo is clear with texture. Gradient images are smooth, not pixaleted.

Layout: 3 points
"The sites layout is largely effective, although there may be some occasional problems with clarity or placement of elements." Container size is 1000px, viewers with 800x600 cannot see website without scrolling to the right. There are negative spaces near the content area and the side column.

Text: 4 points
"Text on the site is well written and presented effectively, using readable fonts and text design and without major mechanical errors (grammar, punctuation, and spelling)."

Navigation: 4 points
"The site is well organized and easy to navigate; the relationship between pages is clear and it's easy to find an individual page; each page is clearly linked to another; links are appropriate, clearly labeled, and have a definite purpose; page titles are appropriate to content and have a definite purpose." All pages work, all linked with purpose.

Mechanics: 8 points
"Everything on the site works: there are no missing graphics or broken links; it can be read with with Firefox, Explorer (Windows) and Safari and shows equally well on PC and Mac." Everything functions well, all pages and links work.

Download Time: 4 points
"The site download time is reasonable, and doesn't make extreme demands on the user's patience; multimedia elements load quickly or file size is indicated with option to download." Quick; no need to wait long to load.

HTML/XHTML/CSS: 6 points
"The XHTML/HTML code is largely clean, although there may be a few questionable tags. Some pages validate as XHTML compliant. The site uses some CSS elements to control portions of design, content and layout." The code is very clean and organized with comments. All tags are fine, except no meta tags/descriptions found.

Credibility: 3 points
"Site includes author, contact person with e-mail address, date created or updated, and no copyright infringement." There is copyright information and year of group. No secondary links on the footer such as email address, home, and other navigational links.

TOTAL SCORE: 40
The current website looks like this (on the left). When you look at it, it looks well done. However, the usability testing is also complete. There are still minor changes we need to make. We need more usability testing from users. Hopefully our group will get it done before the final week to present. Everything will come together soon!

Usability Testing

2010-11-30T16:17:00.000-08:00

Week 8:

[EDIT 12/9/10]

Usability Testing for CurrentSF
Since I did the usability testing wrong last week, time for redo.

For our website, I asked my brother to do the usability testing. Since he does not go to an art school, maybe he can tell us about our website. He knows how to use a computer. I explained to him what the website is first before testing. The hot spots of the website was the slider, the event posts, and a little of the navigation. Simple layout. First thing he said that draw his attention was the preview slider.
"The big image and flashing of the news caught my attention first."

He said he likes the logo and added, "I think it's too small to see it."

He then continued to the navigation links and knew where to click. Eventually, he scrolled down the page. He likes the posts and number of pages for the events. He also gave me a suggestion.

    "Instead of having the number of pages on the bottom, I think having it on the
     top, underneath the 'Upcoming Events' might be easier having two ways to click
     next page. I don't like to keep on scrolling up and down if I'm looking for some
     posts."

That was a good point he told me. He didn't really look at the side column because he doesn't use any social media websites. He thought the side column was mostly advertisements. Overall, this usability testing was helpful.

Multimedia Elements

2010-11-19T15:03:00.000-08:00

Week 7:

For our website, we have a lot of images and content. These multimedia element can enhance our group project. We will provide alternate views of multimedia content. In doing so, our information becomes accessible to everyone. For example, we will have text alternatives for the images for people who have disability or pictures that could not load. For low-vision users, text can be magnified by raising the text size or window size. We don't have any sound or videos on the website. However, we do have a small slideshow or preview of animation for displaying events. All the content and preview are drawn from RSS feed. The preview display are only the featured events with provided links for users to click. They are not distractions unless we put featured and important content on the preview slide to lure users to read on.

Discussion and information on text alternatives:
"Web Style Guide," 3rd edition book

Tutorials on text alternatives with images:
1. Jim Thatcher website
2. WAC Tutorial website

The tutorials teach us how to put alt tags for the images. If images do not load, or broken, the text alternatives can replace them for content and convey the same information. Even though if the images do not convey any meaning or information, we still need alt tags, so leave alt="" blank. It is also important to put captions for videos or audio multimedia. Captions are people who are disabled, deaf.

ALL IMAGES ARE REQUIRED WITH ALT TEXT.

Tutorial on "Scroll to Top" with jQuery
Tutorial link: Scroll GoToTop apparition with jQuery and CSS

Here is what I did: tutorial

On the tutorial, we used jQuery, HTML, and CSS. So this is how the page looks like when it's not scrolled. The 'scroll to top' button/link is on the bottom of the page.

This is how it looks like when the user scrolls to the bottom of the page. The 'scroll to top' button/link fades in and out everytime the page is being scrolled. If the user scrolls all the way down, the link will be visible to click. When user clicks on link, the page will scroll back up to the top.

Strongest/Weakest Elements

2010-11-13T18:49:00.000-08:00

Week 6:

Self-evaluations:
The schedule is going fine. We have done most of the coding already, just the RSS feed we need to draw information from and the calendar. The overall design and all the images took longer to make than I expected..fixing the navigation images. Everyone is doing their part of the job. We still need to finish up with the contract, technical plan, and content soon! Plus, the good part, we are working hard together and doing a good job!

What you did for your group project this week, how you think this adds to the overall success of the project, and give examples of the site's strongest and weakest elements.

This week, what I did was make all the navigation images, revise and fix more of the wireframe layout in how the website should look like.
I finalize the logo, headers, and banner. All there is left to fix are the navigation and header. There was a minor change to the banner with no wave. We kept on changing the look of the layout and the images I made. At last, we finally agreed to fix it and have a final decision. The footer bridge image..is too hard to make. If we still can't seem to make it right, we will remove it and continue working on other things without the footer image. All of these design add to the overall success of the project because the technical directors need these images to put into the HTML/CSS files to see how it look like. Placeholders won't work, it's best to use the real images to check if it's good or bad. I've finish all of the images, except for the hover images. Now, it's up to me to finish those images and for the coders to put everything together and finish coding.

Strongest elements:
I believe the logo and the banner are the strongest because it is the name of our website. The flash preview of work and content also contribute to the strong elements. If adding all the images, links, and more content, then the website will come together.

Weakest elements:
I'm not so sure about the footer image, RSS feed, and the calendar. We don't know if those will work and how pulling all the information will fit into the website and look good. We are trying our best to figure those out! No tagline whatsoever..might need one?

Page Length & Size

2010-11-05T17:11:00.000-07:00

Week 5:

As I said before, the page design is made for the updates of events and news in San Francisco. The colors varies from different tints and shades of green and blue. For the background, I might make it gradient from sky blue to dark blue. For the footer, we will be putting up a large image of the Golden Gate bridge, so we want the top to look like the sky to all the bottom of the dark blue ocean. The headers are green gradients. I added drop shadow for the content and banner. We have 2 columns. On the right side are the calendar, Facebook, and Twitter updates/feeds. We will have a search bar/engine on the top right. On the left are the main content of featured events are all events and news.

The width of the layout is 1000px. The length has no height, it can extend as long as it can depending on how many posts we put on the page. We decided this size because most browsers are as least 1024px in width. It is wide enough to have 2 columns of content. I think it is a good size, not too wide nor thin. There is no accurate height in pixels. The content will be scrollable, so the content is not all laid out right on the top of the page. There is just too much content, so that's why we separate the events and news into 3 different categories.

Current Page Layout

2010-10-30T21:00:00.000-07:00

Week 4:
Here's a current page layout of the website for Current SF. This is a wireframe of the site:

I will guide you through what will be on the website. On top is the branding and the logo on the banner. We decided to use a Golden Gate bridge and currents of the water part of the logo. Also, on the top branding, we will have the navigation. This will be easier to use and navigate throughout the pages. We have 2 columns of content. The main content area is on the left side. On this main c0ntent is where all the news and events are posted by date. the featured events will be on the display flash. It shows a preview of images and a few texts about the event. Below the preview are the rest of the events. Our website is based on events happening in San Francisco bay area. On the top left sidebar is where the calendar will be. The calendar organizes the events by date, so you can select the events/news from there. Below the calendar are the Facebook feeds and Twitter updates. The colors are not for sure yet, we might change the colors when we keep on designing the website. On the bottom footer, we might have a large image of the Golden Gate bridge covered with fog, if possible. Thanks for visiting! Come again!

By the way, HAPPY HALLOWEEN! :)

Ensuring Target Audience

2010-10-24T01:27:00.001-07:00

Week 3:
Website name: CurrentSF / Current SF
Logo theme: SF bridge + current waves

I'm going to make more changes to the colors again. This week, I'm working on the colors of the layout. I'm also making the logo in Illustrator. I'm trying to make something that match the name of the website: CurrentSF. Choosing the colors is hard. I can't decide what to use and kept changing the colors. I'm trying to fit the logo onto a banner and testing it. Also, my group wanted some kind of big image on the bottom of the website in the footer. I will need to make a large illustration and make it look nice. I showed them my wireframe layout for the site. I'm also thinking of making graphics with gradients.
[EDIT]
I will continue to work on the big image on the footer area. It's going to take awhile to trace a picture and make it into a good illustration.

Ensuring Target Audience [EDIT]
One of the ways I would test to ensure that we're reaching the target audience is giving enough information and content. We are definitely going to target the audience around the age group, 16 - 35. We will ensure that the tourists will find the events and stories are suitable and appropriate for them. Of course, the events and news will be in San Francisco. The logo and name will reach the audience too! The red Golden Gate Bridge will definitely give it away, being San Francisco. We will pick out bright colors to target the young viewers. Instead of using simple and bland colors, choosing bright colors can brighten up the website and drawing more attention for younger viewers.

All work uploaded onto the group Google docs.
- Logo(s)
- Colors
- Sitemap
- Wireframe
- Sketches
- Timeline

Art Director

2010-10-16T19:07:00.001-07:00

Week 2
Changes:
In class, our group discussed the kind of website we are going to make. We thought of the topics and the pages for the website. We looked at other news and magazine websites to look for examples. We finally decided to narrow it down to find events about San Francisco. The website is community-based and events drawn from RSS Feed. We decided to make 2 stylesheets; one for web and another for iPhone application. We talked about the target audience as well. My contribution to the group project was showing my sketches of the layout. We discussed the colors for the site. We are going to have a calendar.

For my part of the role as Art Director, I will scan the sketches of the layout, choose color scheme, font styles, and create wireframe of how the layout might look.

Pages: Home, Art, Food, Music

[EDIT]
Main Objective:
Create a current events website based on San Francisco only and an iPhone application. Sharing the fun and interesting events/news to younger viewers and tourists who want to find something to do.

Target Audience:
Age 16-35. Younger viewers to adults. For tourists who are on vacation and whoever wants to know about the events going on in San Francisco. For people who want to something to do in San Francisco.

Colors:
Bright colors such as dark grey (#1f1a1a), sky blue (#51b4e1), and light green (#9fc54e). Might also add dark blue.

Fonts:
Arial for main text and Bank Gothic Light for logo.

Research:
SF Station -- Favorite website we checked out. We might do something with the events layout like this website. We like the idea of having a calendar. We also want the preview of featured events in flash/jquery/javascript.

Vimeo -- This website is really good. We chose the same colors from this website. Great inspirations.

Logo Pond -- Great site to look for examples of logos. We have not thought of a logo yet nor a name for the website either.

Project Roles

2010-10-10T17:09:00.001-07:00

Week 1:
This is my outline for the group project. We have not confirmed on all the detailed yet. Changes may apply as we discuss more later on.

Group Name:
Alpha Dogs

Group Members & Roles:
Project Manager -- Sam Alegria
Content Editor -- Tyler Souza
Technical Engineer -- Melissa Picardo
Technical Engineer -- Richard Navarro
Art Director -- Susan Lei

Concept:
We are creating a community website. We are creating a magazine on current events and updated news. The magazinewill be based on being in San Francisco.Pages: music, art, events, fashion? food?

Target Audience:
For anyone who wish to know about the current events. It will mostly be for tourists because we are having articles on events in San Francisco that tourists won't know about.

Art Director:

Web graphic designer
Interactive designer (Flash, JavaScript, Ajax)
Media specialist (photography, illustration, audiovisual, Adobe Flash)

As an art director, my role is to come up with a design layout. I will make sketches of the layout. I am responsible for picking out the color schemes, graphics and images, typography, logo, and wireframe. Since our project will be like a magazine. I need to think of the right colors and images that will go with the magazine concept. I need to design a layout that will fit the concept and theme of the magazine.

Intermediate Web Design

2010-10-08T17:41:00.000-07:00

HELLO!

I'm back! Break is over, but it was short! Time to go back to school. From now on, the blogs are about the assignments for MM2213, Intermediate Web Design class. In this class, we are having a group project. So, the website will be completed with the group.

Book: http://webstyleguide.com/wsg3/index.html

CSS Zen Garden

2010-09-21T11:31:00.001-07:00

FINAL:

Here is my completed CSS Zen Garden. I love how it turned out. I spent a lot of time fixing and adjusting changes I made. I'm very proud of myself. Lastly, this time I added a dotted border around each box.

Preview:

My CSS Zen Garden, "Small World" by Susan Lei.

Process Page for Zen Garden

2010-09-18T21:28:00.000-07:00

Week 10: Process page

The CSS Zen Garden page originally looks like this:

My theme of the CSS Zen Garden will be called "Small World."

I spent A LOT of time working on my Zen Garden page. I really mean it.. because I made so many changes throughout. I've decided to change my colors again. I have 3 main colors and some other random colors for the layout and background. I also used different font types, about 2-3. I definitely used a lot of images and design them on Photoshop. Headers have image backgrounds. The bullet lists also have images of an icon. All of the contents are in boxes. I also had to make the layout big enough so it can repeat if other users have different monitor size. When I make the layout large, other users won't see any cutoffs of the layout when they zoom out. It took a while for me to figure out of some of the coding to separate boxes, display in blocks and inline.. that was hard. I used gradients on the layout and reflection to make the title look better. The headers have images. I couldn't separate the "download the html and css" and the "A demonstration.." quote part. I couldn't figure it out, so I can't place it at different places. I changed the background with a white-greyish box now, instead of the yellow squiggly lines on the side. It made more sense with the box attached with the background instead of having the yellow lines lying on the side.

Here are the colors & font types I used:

Here are some of the images I used. I got them from Getty:

You will see the rest when I have it done and ready on the website! :) I am almost done!

Incorporating into Zen

2010-09-10T19:02:00.001-07:00

Week 9

Blog how you are creating your project to stand out from all the other submissions. Reflect on how you might use the allowed .css code to give a different look to your zen page. How can you incorporate what you've learned from Bulletproof Web Design?

In my final CSS Zen Garden, I will use images and nice designs for the background, banner, and headers if possible. I'm going to choose nature colors or a bit of bright colors that relate to the garden and greens. I changed the CSS stylesheet a lot. I might move boxes around; hiding or unhiding things. I have seen many designs as examples and inspirations. I hope it will turn out different. By incorporating the book, Bulletproof Web Design, I will follow the book about the sidebars and background images for headers. I might draw my own images or Photoshop anything if needed. I used a lot of the margins and paddings to separate each box, so they are not so clumped together. I will choose a good typeface for the banner. Images will be taken from Getty. I'm guessing CSS3 won't be allow, so CSS1 & 2 will be there, of course. I am working on it~

Mezzoblue - CSS Zen Garden designs from people

Wireframe for CSS Zen Garden

2010-09-07T08:09:00.000-07:00

Week 8:
Here is the wireframe for my css Zen garden:

I'm going to use images for the background and the banner. I'm going to have boxes for the content and the side navigations. The colors I chose are green, yellow, and orange. I want to use light colors, tint. My theme is using garden, flowers, or nature things. I'm still deciding what kind of images to get from Getty. Changes may apply.

I have a sketch as well. It will be up soon.

Possible Portfolio

2010-08-27T20:13:00.000-07:00

Week 7: Putting It All Together

With using the textbook on chapter 9, "Putting It All Together," I created a possible portfolio website. Some of the examples and codes helped me with the possible portfolio. Screen and print sheet also attached. No CSS style view also works.

I love how it turned out! (:
Portfolio

Design Objective:
For the design objective, I added jquery/javascript tab contents in the page, so the content boxes fades or transition every time the tabs are clicked. So instead of making more than one HTML one, I used jquery to put tabs to make separate pages. A smart way. I created a small design of my name to let it known and put it out there. I created the background, so the background won't look as plain. I also added CSS3 to make my page with much more style; CSS3 with rounded corners. I was going to use drop shadows as well, but then it didn't look that good with the tabs content. I tried using a gradient background with CSS3, but it won't show up on my Firefox browser.. The @font-face code is very useful. I like using a font family type that I chose. The font family I used is called QuigleyWiggly. The portfolio page with the gallery has the jquery of image viewer. I like using it because it shows a preview of the images to users. Also, if they like what they see on the images, they can click on the link to view a larger image.

Target Audience:
I target the audience for future employers, teachers, students, and anyone who visits my portfolio page. I set up a portfolio page of a gallery for them to see my recent works and skills. I designed the page to make it user friendly and easy to navigate. Therefore, the viewers will continue to browse through my page.

Designing with HTML5

2010-08-24T11:35:00.001-07:00

Smashing Magazine; HTML tutorial

This tutorial was super long. There was just too much coding and following the tutorial. After typing all of the HTML part and half of the CSS sheet, we just started to copy and paste the rest of the codes for CSS. That was tiring! At least near the end, I get good results. I like how the page looks like after. HMTL5 is so different from what I was learning before. However, It does make sense. For examples, nav, footer, and header are like tags I would use for div ids. For article, section, figure, and hgroup, I am yet confused and need to learn more about them. I hope I will understand and continue to learn about HTML5 to help me with my layouts in the future! :)

Here is a preview:
Firefox & IE

Click here for the HTML.

How the Web Wins

2010-08-19T19:10:00.000-07:00

Week 6:

Wired | "How the Web Wins"

Everyday the web browsers and apps change. There's always new things appear. I agree with the author from the article apps are popular. However, I also think that apps can never replace the web. The web is beginning to have more improved ways to use it. Since Css3 and HTML5 came along, for sure the web is getting the rates up high. The design looks even better. The web will always be useful and helpful. As what the article said that the advantages of the web are only growing, I must say that is it true. Even now, some mobile phones have these apps that allow them to access online to the web. That is even more amazing. Such a small screen and only a mobile phone that the user can take the web along anywhere. Businesses can create online billing, banking, and other things on the web now. It's much more easier as well. In the future, the web will continue to have more new things. It will top everything else.

Week 5: Indestructible Boxes

2010-08-14T23:20:00.001-07:00

Chapter 5; Indestructible Boxes

I followed the examples on the book and the webpage came out nicely with rounded corners. The book taught us using images for the rounded corners by positioning them to the top right, bottom left, etc. Instead, for my homework website, I used CSS3 for the rounded corners. Print stylesheet also attached on my webpage.

Rounded corners
Single rounded corner

Single rounded corner & Rounded corners:

Chapter 6; No Images? No CSS? No Problem!
In my homework website, I followed those examples. Make the website still works without the fancy styles. To ensure content is still readable, we need to check for these in the websites: CSS, no images, validate, font sizes. We use the 10-second usability test.

No CSS. By going to View > Page Style > No style, the CSS stylesheet will be disabled. Therefore, it will show the website with its content only. The navigations are still visible in bulletpoints. The headers are still in larger size or bolded. Everything is in the page.

No images. Go to the toolbar on top of the browser. Go to Images > Hide Images. For Firefox, go to
Tools > Options > Content > uncheck "Load images automatically"

VALIDATE! This website is a good place to validate your website. Go to http://validator.w3.org/ to validate HTM. For CSS, go to http://jigsaw.w3.org/css-validator/. Make sure your HTML and CSS is validated, so no errors. Be sure to have this in your HTML:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Font sizes should be able to scale if a user want to increase the window size. Using px or em should be good.

Zen Garden Print Screen

2010-08-12T20:08:00.000-07:00

Week 5;
For the HTML sheet, we attached 2 CSS stylesheets. One for original screen CSS and another for print screen CSS. The real website is on the Zen Garden website.

Print sample

The HTML looks like this:

On the CSS, change the header to display:none; so to not display any empty spaces or white space. We also changed the margins to fit the content into places.

This is how print screen looks like:

Subcide Tutorial

2010-08-07T17:11:00.000-07:00

July 27, 2010; Week 3 -- Subcide Website

I forgot to blog for every class we meet on Tuesday. Well, last week, we learned divs and how to reconstruct tables to divs. In class we worked on the subcide layout. We didn't finish, but we left off making divs (BEFORE; on the left).

I worked on it more the subcide. Start from this page 2 of tutorial website:
Subcide tutorial

The outcome should look like this page:
http://www.subcide.com/examples/creating-a-css-layout-from-scratch/

This Subcide tutorial is all about divs and CSS. It's a good practice and I learned a lot from this tutorial. Very helpful. It took me awhile to finish because I had trouble having the images and the navigation to work. It turned out exactly just like the website. Finally it's done. :)

It looks like this now (AFTER): My Subcide outcome

Week 4: Chapter 4 & Creative Advices

2010-08-03T11:49:00.000-07:00

Chapter 4: Creative Floating
http://slei89.aisites.com/introweb/week4/ch4.html
I actually took the images from Google, so they look different from the original ones from the book. The gradient, I created myself, following the book. I got the hang of floating the text and images from left to right. Also, I learned a bit of margins and paddings for the content box. However, some parts of the CSS are hard. Codes like [#sweden dd.img img] dd.img within a sweden id and a sweden img id, which are confusing to me. I'm still trying to understand it myself.

Here is how it turned out to look like (on the left), and the code (on the right):

Creative Advices
If you want to be creative for your work, you should follow these advices I'm going to give. I might be helpful for you, yet it might not. It depends on your determination in whether or not you want to become a creative person or artist.

Being creative, you must have inspirations from anywhere, anything, and anyone.
THINK. Sit down in a quiet place and start thinking.
Take a look at examples of other people's work and design, BUT d0 not take/copy their work.
Have an idea.
Determined. Get inspired.
Use your imagination. Expand horizons.
Share ideas with classmates, friends.
EAT!! Because you need the energy to think for ideas being creative.
Be unique. Do something different his time. Don't do the same things like always.
Music might help for some people.
Make some sketches, draw, write..
Test out creativeness with programs.
Ask for tips/examples from others.
Have pros or cons on your work, like what works and what don't.
Check out web design websites for inspirations such as Smashing Magazine

Week 4: Templates

2010-08-03T11:17:00.000-07:00

[HOMEWORK]:
Here are the two templates I played with on Dreamweaver. I chose these two templates and insert editable regions by going to Insert > Template Objects > Editable Region. Also, we need to manage sites to be able to save the templates and assets. To open up assets, go to Window > Assets. Click to the icon on the bottom of assets' window and add new library item. I made the footer an asset to use on both templates. For the editable regions, I edit the sidebars and content box. Below are the examples I made:

Templates:
http://slei89.aisites.com/introweb/week4/templates/template1.html
http://slei89.aisites.com/introweb/week4/templates/template2.html

Template files;
http://slei89.aisites.com/introweb/week4/templates/template1.dwt
http://slei89.aisites.com/introweb/week4/templates/template2.dwt

Today, August 3, 2010 [IN CLASS]:
Wow, I can't believe that it's August already. Summer went by fast when there is school. I still think summer break is too short for us. I am still sleepy in the morning. I tried picking afternoon classes.. I want to add a "Read more.." link to my blog, but it won't work. I followed the steps to this blog, but it doesn't work for me. I'll try again later on. Anyways, we showed our reconstruction site in front of the class. After, we learned about templates and adding assets in the library. Templates are not that hard, since Dreamweaver already have some.

P.S. STUDY FOR MIDTERM.

Week 3: Converting Tables to Divs

2010-07-28T13:21:00.001-07:00

For this homework, reconstruct this website: http://casabasa.com/web/mm2213_wk1.html
Remove all table tags: table, tr, td, th. Guidelines on chapter 3 of the textbook called "Explandable Rows". Provide finished page link. Embed css style sheet.

Here are the finished pages: (Click to enlarge each page)
Page 1 - Page 2 - Page 3

Page 1: Home; Introduction of the class
Page 2: Class schedule
Page 3: Student information

I separated the site into 3 pages. I took off the last two pages, resources and tutorials. Instead, I put those links into the student information page. This way is easier to read all together. I helped grouping the information all in one section, so no more separate ones, and easier to find information. The reason why I changed the layout is because I wanted to make the content box more smaller in the center. Easier to read and the page not spread out.

What I changed for the site:

All dividers, no tables except the grades.
Colors, font, and styles changed.
Navigation on top of page now.
Headers have background colors, depending on the h1,h2,h3.
Content box in center with scrolling.
Margins and paddings applied.

CSS style sheet:


FINISHED PAGE: http://slei89.aisites.com/introweb/week3/index.html
View source for HTML coding & CSS.

Week 2: Pantone Colors & Chapter 1

2010-07-23T19:05:00.001-07:00

Pantone Colors
List 3 pantone colors and their RGB equivalent. I will be using these colors in the layout:

#FFFFFF (white):
- R: 255
- G: 255
- B: 255

Pantone Black 7 C (dark gray):
- #333333
- R: 55
- G: 53
- B: 52

Pantone 7545 C (blue):
- #51626f
- R: 81
- G: 98
- B: 111

Pantone 2985 C (light blue):
- #55c5e9
- R: 85
- G: 197
- B: 233

Chapter 1: Flexible Text Using Ems
Link: http://slei89.aisites.com/introweb/week1/ch1.html

Sizing text using em units. The em is a sliding measure. One em is a distance equal to the type size. In 6 point type, an em is 6 points; in 12 point type an em is 12 points and in 60 point type an em is 60 points. Thus a one em space is proportionately the same in any size.
IE/Win will not allow readers to resize text that has been sized in pixels. Using ems however, allows all browsers to resize text and also provides pixel-level precision and so they tend to be my unit of choice.

Here are the Ems -> Pixels:

1em = 10px
1.2em = 12px
.9em = 9px
1.8em = 18px
2em = 24px

Book: Bulletproof Web Design
http://clagnut.com/blog/348

Week 2: Box Model Tutorial

2010-07-20T11:53:00.001-07:00

You need to know these keywords:

Content edge or inner edge -- The content box edge surrounded by width and height.
Padding edge -- The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge.
Border edge -- The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge.
Margin edge or outer edge -- The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge.

The box should be measured by width and height.
Can use different kind of units or sizes: pixel (most common), em, %, auto
Each edge may be broken down into a top, right, bottom, and left edge.

The middle box 300 x 200 is the content, edge surrounded by content is content edge. Padding is in turquoise color, around the content, or padding edge. Border is in blue, surrounds box's border. The margin is in the outside, wrapping everything of the box margin, or margin edge.
(Click on image to enlarge)
Here is an example of the code:

.box {
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #000;
margin: 15px;
}

Let's try the calculations:

Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px
Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px

There are properties and styles you can apply to the edges. For examples:

border-width: thin, medium, thick

border: border-top, border-bottom, border-left, border-right

border-color: color value; hex code or color name
- hex code: #FFFFFF, #000000
- color name: white, black

border-style:
- solid
- dotted
- dashed
- double

margin: margin-top, margin-bottoms, margin-left, margin-right

padding: padding-top, padding-bottom, padding-left, padding-right

This is my example I did:

Sources:
http://reference.sitepoint.com/css/boxmodel#
http://www.w3.org/TR/CSS2/box.html

Week 1: Sketches

2010-07-16T20:13:00.000-07:00

Here is two example sketches I drew and scanned for the homework page:

Edit: Second sketch with notes attached. Changes may apply throughout process. I am choosing the first sketch on the left side.

(Click on image to enlarge)
More interactivity.
Link tabs with rollover. Pop out? Bounce tabs? Change color? Slide out? Use flash or javascript? Layout with a drop shadow. Gradient. Transparency.

First sketch:
(Click on image to enlarge)
(1) 3 Link tabs on the left side: home, homework, class. Layout set in center. Top with name banner. Header with title. Content box after. Bottom with footer.

(2) 3 Link tabs on the top of layout. Below links is the name banner. Content box after with two columns: homework and class. Bottom is the footer.

Timeline/Schedule for Homework

2010-07-13T11:39:00.000-07:00

SCHEDULE SUBJECT TO CHANGE & STILL ADDING IN PROGESS FOR EACH WEEK. Here is the timeline/schedule for the homework assignments:

Week 1: Tuesday, July 13, 2010

Sketch two examples in paper and pencil. Scan image then use Photoshop to block out content via grids. Print this version and, again using pencil, note navigation, technology, purpose, etc. on this image. Scan and upload to blog.
Write down the interactivity on paper and make notes to self. Write down the processes of the website/layout. Rescan and repost it on blog.

Week 2: Tuesday, July 20, 2010

Rescan and post the a second layout with the notes. Choosing layout sketch 1 example.
Changes to layout: rollover links, interactivity
Type up a tutorial for the Box Model.
Post chapter 1
Put down 3 pantones (must be colors for website)
I will be using these colors for layout. Colors may change throughout process of making layout.
Colors: white, dark gray, blue, light blue (see other blog)

Week 3: Tuesday, July 27, 2010

Reconstruct tables to divs (this web page), explain what is changed and why.
Subcide tutorial

Week 4: Tuesday, August 3, 2010

Start the layout for homework page. Designing, sizes, links/content. What kind of links/flash?
Box model: try to create own and post up.
On your homework page, create two pages from a Dreamweaver template. Insert an asset onto both. Email when uploaded.
Read Chapter 4 "Creative Floating" of Bulletproof Web Design, do the exercise, and toggle the float direction (page 102). Post link to blog.
Write in your blogs your best advice for getting creative.

Week 5: Tuesday, August 10, 2010

Read Ch5, 6. Use CSS3 to create your rounded corners but make sure your layout uses "Indestructible Boxes" and can pass the 10-second usability test.

Week 6: Tuesday, August 17, 2010

Create a possible portfolio home page using chapter 9 "Putting It All Together" as a source.

Week 7: Tuesday, August 24, 2010

Continue work on possible portfolio page, chapter 9. Blog its target audience and design objective.

Week 8: Tuesday, August 31, 2010

Create wireframe of final project and post to blog.

Week 9: Tuesday, September 7, 2010

Work on final project. Blog how you are creating your project to stand out from all the other submissions.

Week 10: Tuesday, September 14, 2010

Work on project. Create a blog posting that is a sample of a possible process page for your final project.

Week 11: Tuesday, September 21, 2010
Last day of class.

First post!

2010-07-13T09:24:00.000-07:00

Hello! Good morning~

My blog link: http://leisusan.blogspot.com/

Warning: Do not read. My blog will be extremely BORING . . . hahahahaha.

This is my new blog I created today. My name is Susan. So far, I've taken 2 already, so 3 more to go since I have 5 classes total. My hour schedule is pretty long... I don't have enough sleep! 8 hours each day. :( I'm so tired and sleepy! NEED COFFEE! I need more sleep. Well, I get off on Wednesday afternoon, so I'm going to take a nap afterward! However, I do have homework this weekend to look forward to...fun!

Oh, how I wished that my summer break was longer. It was so short! I think it was less than a month or almost about.

Edit: I GOT MY COFFEE! I hope I'm awake for class now!

That's it. I'll blog more if I have something to talk about. Bye!

Susan's Blog :D!

Sitemap

Competitor Analysis

Concept Map

Persona & Usability Test

How to Create Animated GIF in Photoshop

Rubric & Learning Plan

Progress on Tutorial

E-Commerce Affiliate

Research

Final Project Proposal

Tutorial with Captivate

9 Levels of Events Instruction

e-Learning Principles

Multimedia in Learning

Final Project: WizQuiz [DONE]

Observational User Testing for WizQuiz

MLA Research

Sketches for Final Project, WizQuiz

Final Project Proposal

Sound Media Element

Captivating Preloader/Transition

Sequential Navigation

Identifying Modes of Online Entertainment

Interaction Design for Entertainment

CurrentSF Final

Rubric Critiques

Usability Testing

Multimedia Elements

Strongest/Weakest Elements

Page Length & Size

Current Page Layout

Ensuring Target Audience

Art Director

Project Roles

Intermediate Web Design

CSS Zen Garden

Process Page for Zen Garden

Incorporating into Zen

Wireframe for CSS Zen Garden

Possible Portfolio

Designing with HTML5

How the Web Wins

Week 5: Indestructible Boxes

Zen Garden Print Screen

Subcide Tutorial

Week 4: Chapter 4 & Creative Advices

Week 4: Templates

Week 3: Converting Tables to Divs

Week 2: Pantone Colors & Chapter 1

Week 2: Box Model Tutorial

Week 1: Sketches

Timeline/Schedule for Homework

Week 3: Tuesday, July 27, 2010

Week 4: Tuesday, August 3, 2010

Week 5: Tuesday, August 10, 2010

Week 6: Tuesday, August 17, 2010

Week 7: Tuesday, August 24, 2010

Week 8: Tuesday, August 31, 2010

Week 9: Tuesday, September 7, 2010

Week 10: Tuesday, September 14, 2010

Week 11: Tuesday, September 21, 2010 Last day of class.

First post!

Week 11: Tuesday, September 21, 2010
Last day of class.