Dingerson's Blog

New Project!

2012-01-17T21:59:00.001-08:00

Class: Sr Project Development

Project: Website for Rhythm N Dance Center

For this project, I will be designing and creating the website for a dance company in Antioch, California. The goal is to create a logo and design that will set them apart from their competitors. As a convenience for their customers, the site will feature an online calendar, sign up and payment system. Users will be able to view photos and the company mission statement, about and staff information.

I currently have a good chunk of the content and will meet with the owner to discuss strategy and creative design.

Technical Specificatons:
In my research, i found that 85% of web users are viewing the web on screens larger than 1024 x 768, and 1.17% are using mobile devices such as Iphones, Ipads, Android phones etc. The website will be designed and coded to display well on multiple resolutions as well as mobile. It will also be tested in IE, Firefox, Chrome, Safari and Opera.

Concept Modeling

2011-10-17T21:12:00.001-07:00

For this assignment, we were to create a concept model for the website project. The purpose of a concept model is to create a representation of the ideas or information presented on the site. (This different from a flowchart, which represents actual pages and a logical flow.) Concept modeling allows us to see the data and identify relationships that may exist between entities, which will help us create a solid structure for the website!

Sr Project Studio- Personas & Usability

2011-10-11T08:32:00.000-07:00

Client Website: Chef Jon Lee- Asian Confusion Cuisine

This week, we identified a concept for the final project. I will be redesigning the website for Chef Jon Lee to enhance and promote their products and services. This is an outline of user personas and a usability testing method for the site, to identify strategies and potential problems early in the design and development.

Demographics

age group: families, young adults, working lunch crowd, some seniors
years online: 0-10
income: 50k & up

Tech Ability
Ranges from none to good

Personal Background
...

Needs

Health conscious
focus on fresh produce

Motivations/Scenarios

family looking for good food in a warm, friendly environment that’s kid friendly
young couple looking for a good “hole-in-the-wall” type of place to experiment with new food
Work day lunch crowd looking for fast, affordable great tasting lunch with healthy options

Features

CMS
Showcase menu and sauces
Area to update dinner specials
Online store to sell sauces
Catering Info
Take advantage of social media
Highlight media coverage and reviews
Strong SEO

Behaviors

easily navigate to menu and dinner specials, hours, location and contact info

User Persona- Purpose, Audience, Scale, Context
Tanya is a nurse who works 40 hours per week. She works long hours and only gets a 30 minute lunch break. She is very health-conscious and has been seeking a nearby place with fresh, healthy food where she can run in, eat, get out and feel good about what she ate for the rest of the day.

The Johnson family has 2 kids, and they are looking for a restaurant with a friendly atomosphere. They are also strict vegetarians. They have grown tired of eating the same bland food that many restaurants serve.

Steven and Jennifer are young married couple who work long weeks and like to go out on Friday nights. They love beer and experimenting with new food, however they have a low budget and cant always go out to the city.

Usability Testing

For the Chef Jon Lee website, the goal is to make the key products and features stand out and easily accessible. Users are expected to interact with the site individually, without any previous training or instructions. The usability test will consist of 3 parts: Part 1- Explore, which is allowing the user to explore the site on their own, observing the pattern of clicks and level of interest in particular areas. This will allow us to gauge whether or not the features that we want to emphasize are really truly standing out to the end user. During Part 2- Usability, we will ask the user to perform simple tasks and observe the process, noting time, ease of use, any errors encountered (if any), and the severity of those errors. Part 3- Feedback, will consist of a simple survey including asking users to rate the ease of use, design aesthetics, effectiveness and overall design.

Part 1- Explore

record click patterns
areas of interest
most time spent on
any confusion

Part 2- Usability

locate the specials
download a copy of the lunch menu
purchase a sauce from the store
write a review

Part 3- Feedback

For questions 1-4, rate the following on a scale of 1-5
1 = poor
2 = fair
3 = neutral or not sure
4 = good
5 = excellent

Is it clear right away what the purpose of the site is?
How easy was it to find what you were looking for?
Rate the overall design: mood, color, type, feel of the site.
Rate the information presented, readability and structure of the site.

Would you come back to this site? Yes No
Would you recommend this site to others? Yes No

TESTING: Steve Chen- 27 year old adult male who loves exploring new food
Part 1- Explore

record click patterns

cuisine, played with hovers on pic, Directions, clicked on map, likes listed directions, Tell us, read reviews (likes, feels homey, personalized), Reviews and videos

areas of interest

menu, reviews, videos

most time spent on
any confusion

unexpected pdf on link click (confusion), clicks on pics thinking they will enlarge, sideways lunch menu, confusion on menu naming conventions, map “from”

Part 2- Usability

locate the specials-

download a copy of the lunch menu-

already found it by surprise

purchase a sauce from the store-

write a review-

easy

Part 3- Feedback

For questions 1-4, rate the following on a scale of 1-5
1 = poor
2 = fair
3 = neutral or not sure
4 = good
5 = excellent

Is it clear right away what the purpose of the site is? 5
How easy was it to find what you were looking for? 3.5
Rate the overall design: mood, color, type, feel of the site. 1.5
Rate the information presented, readability and structure of the site. 2

Would you come back to this site? Yes No
Would you recommend this site to others? Yes No
Comments:

the use of bolds, colors and font choices are confusing and not sure where the hierarchy is. Not sure where to look. White graphic is distracting. Really like the review section because it makes the site warm and gives the sense of customer relationships and makes it very personable.

Computer Based Training Lesson Plan/Rubric

2011-09-11T18:25:00.000-07:00

This week, we made rubric and learning plan to assess what users should know after watching the tutorial. Below is a rubric in question form to make sure I am getting across important points during the tutorial.

Feature Tour

To quickly learn how to navigate the site and learn the site’s features.

Rubric:

· Did they know how to navigate the site?

· Do they know how to view items?

· Do they know how to add an item to the shopping cart?

· Do they know hoe to delete an item from the shopping cart?

Ecommerce Design Tutorial

To gain an understanding of databased structure/design and how to implement this into a functioning site.

Rubric:

· Do they already have prior knowledge of HTML/CSS/PHP?

· Did they know how create an ERD(Entity Relationship Diagram)?

· Do they know how to create this in MySQL?

Digital Identity Design - Establishing A Digital Identity Through Blogging

2011-08-24T20:52:00.000-07:00

Even if you have a website, a blog is very useful since it is easy to quickly update. If people are interested in what you have to say, they will come back for more. This can help generate traffic to my portfolio site which is definitely static, but displays my past work.

2. It’s a great place to post tutorials. It would be nice to have beginning web designers view my posts and have it actually help them or answer a question. It can serve as a great place to have discussions and figure things out. I also find that in the process of teaching, I am learning new ways to do things and re-enforcing what I already know.

3. Blogging establishes credibility for your brand. If you have decent blog posts, people will trust your brand. Great for attracting new clients!

4. Be a part of an online community with similar interests. This can help you network with like minded people. You never know who you will meet, or who will run into your blog. Always post quality content.

5. Develop a unique writing style. Writing blog posts can help with becoming more literary, which in turn can influence and improve the quality and content of the websites you create.

This designer has a really great blog that has a large following:

Link: http://www.sohtanaka.com/

E-Commerce Week 6

2011-08-21T23:33:00.000-07:00

For this week's assignment, we are to blog about something we like that is selling online

Web OS

Web OS is a wonderful operating system developed by Palm. Having used a variety of smart-phones, the Palm Pre is by far my favorite device because of its simplicity and ease of use. These features include:

easy multitasking - applications are viewed as "cards" that can literally be thrown away
just type (ability to start typing commands from main screen)
subtle, unintrusive notifications
synchronization with email and social media
touchscreen gestures

Sadly, HP recently announced that they are discontinuing the production of WebOS devices. Because of this, products such as the HP Touch Pad can be found here (maybe):

Computer Based Training Final - Planning & Case Study

2011-08-21T22:50:00.000-07:00

Captivate Final

Overview

I will be creating a feature tour/tutorial, for my ecommerce project: excuseme.com The video will highlight the main features and functionality of the web site. The video will go over designing and developing for an ecommerce/app site.

Target Audience

Web Designers (Beginner - Intermediate Level)

Reason for creating project

There is always a need for a good tutorial video, either to teach or provide inspiration for fellow designers.

Instructional Strategies

*well paced walk through with timed audio

*break video into chunks

*user interaction

*steps of design: wireframing, mockups, database design

*supply these files for viewing or downloading on the web page

Similar Site

*Shopify

-http://www.shopify.com/tour

-The site has a really clear, concise and easy to follow feature tour video. The video walks a new user through how to get started with using Shopify services.

Computer Based Training Final

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

Overview:

For the final captivate video, I will be doing an overview of the website: excuseme.com. The video will be going over key features of thesite and how to use it. It will also go over some key features of how to build an e-commerce website.

Target Audience:

Web Designers (Intermediate Level)

Slides:

slides will include a walk-through of the site and charts showing the database design.

Sneak Peak of site:

First Captivate Tutorial

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

I've just completed my first online tutorial using Adobe Captivate! The subject is simple: "How to Use Gmail", however I found this to be a great starting point in order to learn how to go about using the software to conduct a training, live demo, and quiz assessment. I feel like i learned a lot through this process, and aim to make my next video about something that is related to web design. For now, see my first attempt here: jdingerson.com/tutorials

Thoughts About E-Learning

2011-07-18T11:55:00.000-07:00

Today, I found the lecture and peer presentations to be very helpful in thinking about techniques for teaching online. Here are some good techniques I took away from today for making an effective tutorial:

*for beginners, show clear step by step instructions, and break learning into chunks
*engage the user in interaction such as clicking, rather than passively watching
*clearly state the goals of the tutorial, so that the user knows the purpose of the video
*provide further links or online tools to help the user with the "next steps"
*create a tutorial on content that is interesting and relevant today (something that people actually want to learn)

Computer Based Training: Homework 1

2011-07-17T18:39:00.000-07:00

For this week, I did research on near transfer perform, which is teaching through a step by step method. Specifically, how to make a good video tutorial. This actually also falls under the inform category as well.

Article referenced: http://www.blendernation.com/2007/01/31/how-to-produce-a-good-video-tutorial/

In this article, the author offers some general guidelines on how to make a good video tutorial that users will want to watch. He refers to Planning as an important first step. Figure out what your are trying to convey, and take into account the level of your audience. Instead of writing a script, write out bullet points so that you don't sound monotonous. Have files prepared ahead of time so you are not stumbling. Don't make any distracting mouse movements.

After the video is produced, edit out your mistakes. To make your tutorial even more effective, record your audio separately, so it will be easier to think about what you are going to say and how you sound. Use a pop filter over your microphone, to eliminate the distracting "popping" sounds when speaking certain constonants.

Add titles, credits, and subtitles so people can contact you, or find your site.

Igarlikeit User Testing

2011-06-13T21:32:00.001-07:00

For user testing, I asked my mother to look at the website. Her feedback was extremely useful:

1. Rate the Design 10 - I LOVE the logo, the organization of the site, the colors and the very clean look about it. I like that people can add pictures of themselves to their recipes.

Recipe page layout needs to be fixed though; see two attached pictures of what I see on my computer. Garlic shrimp photo not showing up in slideshow.

2. When looking at the home page, can you instantly tell what the site is about? 9 - Maybe highlight the words "Share Your Recipes" making it big, bold or colorful so that it stands out on the home page.

3. Rate the site content 10 - Content will be very good once you've added it all in. I like the addition of hyperlinks to other sites for reference though I haven't checked out the other sites.

4. Rate the navigation/ ease of use: 9 - Very easy to use, but I have a suggestion: Rather than making the words in the pretty tabs the hyperlink, make each tab (area) the actual hyperlink since the tabs are kinda big. Some people don't know to look for the hand.

5. The registration/login process (is it easy to use?) 5 - Kind of weird that the 2 links on the homepage leads to the same exact page to either register or to login and so if you need to register, you think you can enter your info into the log in windows because the "register here" area is so small it's easy to miss. Also awkward that the Success! You are now a member of Igarlikeit page doesn't give me a way to get back onto the homepage (like your logo) and it doesn't even give me the 2 login windows so that I can easily login. Yuk! I don't want to click on the back button either!! (I wonder if the login window should take me directly to the recipe page rather than to the homepage since it's nice to see the "submit a recipe" button right away.)

6. Submitting a recipe 8 - Nice page except it is missing the logo at the top so that I know I'm still on your site and don't have to use the back button to get back onto your site in case I change my mind about submitting a recipe. Also, what if I make a mistake submitting a recipe? Is there an easy way for me to get back onto my recipe to edit it?

COMMENTS: Overall, I love your garlic site. Just need some fixing like you said.

I have more comments:

I added a made up recipe to your site. Not all of my instructions are showing up on your website - several steps are being blocked by the footer. And my dinner recipe showed up in the breakfast section; I didn't see where I had a choice. I also tried to use your contact us page, but it wouldn't let me send my message to you. It's a really good site, though!!! Hope you guys make all of the fixes in time.

(end of feedback)

Overall, I think we are doing something right, if she likes the design despite all the errors. I plan on fixing numbers 5 and 6 pertaining to the login and recipes page. I agree, the user needs to know they are still on the same site during the entire visit. This is very good feedback; these details were overlooked during production of the site. Firstly, I am working on making the photo uploads functional as well as the garlic rating. Will try to get as much done as possible.

DrawIt Final Project

2011-06-06T08:55:00.000-07:00

See the progress of DrawIt: http://jdingerson.com/drawit/

Research Paper for Draw It

2011-05-23T08:03:00.000-07:00

Jenna A. Gerberding

Sharon Kaitner

Interaction Design for Entertainment

23^rd May 2011

DrawIt

There are many websites out there that teach children how to draw. This website will teach children how to draw in a fun and interactive way. Using surprising transitions, hovers and rollover effects, it will engage young users and teach them new drawing skills. Rather than featuring everything under the sun, it will focus on drawing the human face. It will cover different facial features, expressions, proportions, and drawing styles in a sequential manner that is easy to follow. Users will be able to drag and drop face shapes, eyes, noses etcetera onto the artboard and be taught where to position each element. Basically, they will be able to arrange a face, and then view the steps of how to draw each element and put it all together into an original piece of art! Through using this website, young artists will be inspired to add on to what they have learned, and create new drawings of their own. I plan on using JQuery to build these features.

In order to make this site a great tool that will be entertaining and attractive to my target audience (ages 5 – 10), I have done some research on web design for kids. Smashing Media GmbH, an independent company known for creating Smashing Magazine, focuses on writing high quality articles for web designers and developers. I have referenced what they have listed as some of the key components of designing for kids.

1. “Use bright, vivid colors that stimulate the senses… colors make a big impression on children’s young minds.”

This is definitely one of the first things I notice about children’s websites. For DrawIt, I plan to use “pencil” yellow and blue as the main colors, with maybe splashes of a few others. The website will have a school theme, which is familiar to children. The colors and theme will easily appeal to both genders and create a happy mood.

2. “Larger than life design”

The article discusses that having large call-to-actions, buttons and typography will be visually appealing to children. This is why I want users to land on a splash page, with a giant image of the site logo, and a large tagline of what the site is about. I will use JQuery to transition the user down the screen, into the drawing area. This motion catches the user’s attention and submerges the user into an environment. Speaking of environments…

4. “Children like to let their imaginations run wild in a world that looks and feels real.”

By creating depth in the design, the user will feel like they are in a different world. I will use textures and shadows to create depth, as if the drawing board is actually there, and the buttons are popping off of the screen. When creating layouts for children, it is actually okay to break the grid to create interesting, unconventional layouts. Speaking of buttons…

5. “navigation and call-to-action areas should be focal points… Text-based navigation on children’s websites would not be as effective as large buttons and graphics, because they would lack visual focus on a page.”

I will obviously be working very hard to create large, attractive graphics. What I noticed about my competitor websites, although the content was done well, they didn’t always use these best practices to make a visually appealing page. If I am trying to attract young aspiring artists, and teach them how to draw, it is only natural that a lot of thought and creativity must go into every element of the design of the site.

6. “Kids like to have something tangible to take with them, to help them remember their experience.”

I will implement a feature that allows kids to print out their creations. This will also help with the learning aspect of creating the drawings. At the very least, they can trace.

7. “Interaction through animation and sound.”

I really liked the Disney Princesses website that was featured in the article. Each navigation button was accompanied by a voiceover, and each character spoke using their own voices on mouse hover. It really creates a memorable experience by engaging the users’ senses. I want to add sound effects for each main navigation button as well as the page transitions.

In addition to design, I have been thinking about the psychological effects of the internet on adolescents. According to the Children's Digital Media Center and Department of Psychology at the University of California, Los Angeles,

“On average, boys and girls alike described their online social interaction as (1) occurring in private settings such as e-mail and instant messages, (2) with friends who are also part of their daily, offline lives, and (3) devoted to fairly ordinary yet intimate topics (e.g., friends, gossip)…Online pretending was reported to be motivated by a desire to play a joke on friends more often than to explore a desired or future identity, but participants reported a range of pretending content, contexts, and motives.”

Furthermore, they argue that the internet is a cause of social isolation and depression. Well, with the creation of this site, I hope to use the internet as a tool to promote learning and productivity. By targeting children, I hope to change their habits early on, before they reach the adolescent age (13-19). I want them to see the internet as a wonderful tool that can be used to help them gain skills when used correctly. Overall, it will show that learning can also be entertaining too.

Works Cited

Lazaris, Louis. “Designing Websites for Kids: Trends and Best Practices.” Smashing Magazine-

< http://www.smashingmagazine.com/2009/11/27/designing-websites-for-kids-trends-and-best-practices/> (November 27^th 2009).

Gross , Elisheva F. “Adolescent Internet use: What we expect, what teens report” Children's Digital Media Center and Department of Psychology, University of California, Los Angeles, CA, USA- < http://www.sciencedirect.com/science/article/pii/S0193397304000772> (December 8^th, 2004).

Here is a glimpse of what the site will look like:

Final Project Sketches

2011-05-15T19:21:00.001-07:00

Drawit!

Home
The home page will be a splash page with the logo. On hover it will display a button (to the left i have 2 diff button ideas) which launches the user into the site.

Drawing Section
Lessons will be sorted by categories on the left side. Lessons will be displayed in a step by step method.

2011-05-08T20:03:00.001-07:00

Interaction Design For Entertainment |Final Project Proposal

I had a hard time deciding on one topic, so I am posting all of my ideas for the final project.

*NEW*

How to Draw for Kids
Step by step drawing lessons. User can drag and drop the drawings to create a scene.

http://www.howtodrawit.com/

http://www.hellokids.com/r_14/activities/how-to-draw-step-by-step-drawing-tutorials/

All About Forms

This site will be one giant form that teaches users how to trick out or spice up their web forms. I will cover topics such as design, PHP, HTML5, security and user interaction.

http://www.smashingmagazine.com/2011/05/05/innovative-techniques-to-simplify-signups-and-logins/

http://tutorialzine.com/2011/03/better-check-boxes-jquery-css/

http://css-tricks.com/tips-for-creating-great-web-forms/

HTML5 Tutorial Site

This will teach users some of the coolest features of HTML5. It will be very interactive and fun, and will be built using HTML5 of course.

http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/

http://www.smashingmagazine.com/2009/07/16/html5-and-the-future-of-the-web/

http://diveintohtml5.org/

The Never-Ending Story

Users submit chapters/parts of a story that never ends. The next person picks up where the last left off. Site will generate random nouns, verbs, adjectives etc if the user needs help generating ideas. Users will be able to name chapters and add images.

Haha That’s Funny

Users submit their funniest jokes.

How Was That Movie?

Ever want to know if a movie is good before you pay 20 bucks to watch it in the theater? This site lets users rate new releases and post what they thought of the movie. (Posts will be from regular people, not movie critics).

Using Sound Effects in Web Design

2011-05-02T00:09:00.000-07:00

Interaction Design For Entertainment
Integrating sound

For this project, I used HTML5 and PHP to make an interactive form. Because the sound effects are created using HTML5, please view in either Safari or Chrome!

Link to homework

Using Transitions in Web Design

2011-04-24T20:26:00.000-07:00

For this week's assignment, I used a sliding effect to transition the user into the web site. I made a website mock-up for a fictional company that sells various seeds. It has a sort of splash page to catch the user's attention where you can put a catchy tag-line and some info about the company. The imagery of seeing green grass and dirt, and then going underground to view plants and buy seeds conveys the theme of the company in an interesting way.

View the site

Garlike- Week 3

2011-04-18T21:19:00.000-07:00

For this week, I created an agenda for the technical team so that we have a timeline to stick to. I also listed all the requirements and major components of the website we are to build. View the timeline. The team was also supposed to research on the following:

Jenna- database, user login, user comments
Oscar- HTML5 & CSS3 features, audiovisual components
Ian- JQuery plug-ins/ JavaScript or whatever languages we should use for interactivity

I found the following resources to help with building the member login/registration, and recipe search..

· Login/register form using PHP, MySQL, and JQuery:

http://tutorialzine.com/2009/10/cool-login-system-php-jquery/

· PHP Login System w/ captcha:

http://tympanus.net/codrops/2009/09/16/php-login-system-reloaded-v1-1/

· Google Custom Search API:

http://code.google.com/apis/customsearch/

Here are some really great recipe sites I researched that were built on WordPress.

WordPress sites:

o http://thepioneerwoman.com/tasty-kitchen/

o http://www.deliciousdays.com/

· In addition, I have been studying a lot of PHP and MySQL to prepare for the upcoming weeks!

Sequential Navigation

2011-04-17T17:59:00.001-07:00

Link to Homework 2

This may not be extremely compelling, but it is sequential. The idea is a children's storybook... you can go forward or back, but not skip to another page. The last page allows you to 'start over'.

develop a compelling navigation or sequencing concept

2011-04-15T18:49:00.000-07:00

hmmm... how to build a compelling or sequential navigation? While I was pondering this question, I looked at http://www.dontclick.it/ which is a really cool site that forces the user to navigate without clicking a single link/button. It is so captivating and creative, that i found i didn't miss the click at all! So how do I achieve something that is equally compelling? Sequential means it forces the user to navigate to one section in like a 1, 2 , 3 ordered way. At this point, I'm thinking I might build some type of environment... but we'll see...

Int Web Design- Site Topic Research and Ideas

2011-04-11T16:39:00.000-07:00

Here are some competitor sites I researched and my findings:

Cooking Sites by Ingredient:

http://www.supercook.com/

· allows the visitor to list items that they have in stock

· generates a list of recipes according to that list

· makes suggestions

· can narrow your results by meal

http://allrecipes.com/Default.aspx

· looks like a regular recipe site

· has “ingredients” tab at top that allows you to search by ingredients

http://idontknowwhattocook.com/

· interesting navigation and styling, but confusing

· generates random recipes (linked to other sites)

· allows you to share what you are making on twitter or facebook

What's great about these:

· “my kitchen” feature

· makes suggestions

· tie in social media

What can be done better:

· How to make a meal out of nothing

· Substituting ingredients using alternatives

· Using an ingredient for a different purpose (ex: ramen + veggies= yakisoba.. old rice + leftover meat = fried rice)

· What to do with the leftovers

· Tips on how to save money

· Users can comment, make suggestions or add photos

Concept Idea:

Make a meal out of almost nothing! Whether you are broke or too tired to go to the grocery store, make the most of your pantry. Use food items in ways you never knew you could. Learn how to stop wasting or throwing away food. Add your own new discoveries and share on facebook.

Links:

http://www.ehow.com/how_4589861_meal-out-nothing-almost.html

http://frugal.families.com/blog/how-to-make-food-out-of-nothing

http://www.lifehut.org/food/how-to-cook.htm

Int Web Design- HW1 Defining Project Roles

2011-04-11T15:14:00.000-07:00

Role: Technical Director

Bridge between technologists and the creative and project management. Oversees site production team. Creates the general blueprints for the collection of technologies that will support the chosen web site technology framework (including content management,
RSS or other XML content formats). Develop strategies and goals and find appropriate technology solutions to meet project needs.

Develop a plan to determine the following:

technology: OS/Browser support, bandwidth, dynamic vs static, site support?, database support?, audiovisual?, webserver support..database integration and support
custom web programming
integration with other applications or databases that supply content or interactive features to the web site.
developing strategy and goals
technology will depend on users’ needs
test a variety of users, use feedback to improve site
identify 2- 3 goals the website will accomplish
Use Google Analytics
“form follows function”
static vs dynamic
accessibility
usability
SEO
Semantic Markup

My biggest challenge for this role will be to dig into server-side programming such as implementing a database, depending on the project we decide on as a group.

9 Modes of Online Entertainment

2011-04-10T23:47:00.000-07:00

Assigment 1: Identifying Modes of Online Entertainment

Zen Garden Final

2010-09-21T05:41:00.001-07:00

Here's the link to my Zen Garden.

http://gerberdingerso.aisites.com/MM2203/zen/zen.html

Wireframe for Zen Garden

2010-09-07T12:00:00.000-07:00

My idea is for zen garden is to create a scene of a rock garden. The mouse pointer will be a rake, and it will reveal the text when you hover over the divs. The text will be transparent (not invisible), and will reach full alpha when the mouse hovers over. There will be images like rocks and cherry blossoms, which will have fixed positioning, to add dimension to the page.

My New Portfolio Site

2010-08-31T06:03:00.000-07:00

This week we created a possible portfolio site. I tried to make it flexible, by using percentages around the divs. The jquery and the positioning took quite a while. I plan to finish the site soon.

The target audience for my site is for prospective employers, or anyone who wants to view my work. I don't have many portfolio pieces yet, so it's a work in progress. My objective for this design was to make it clean and simple and easy to navigate, while effectively showcasing my work. I used jquery filters for the portfolio navigation, which will come in handy when i have more works uploaded. I plan to finish the about me, add a contact form, and add larger image previews, and actual links to the web sites.

Coding a HTML5 Layout From Scratch

2010-08-25T15:22:00.000-07:00

This week we coded a page using a tutorial from Smashing Magazine. The layout came out very nice, and i like the new more semantic tags such as the header and the aside. I also liked the way they applied the rounded corners for the different sections, which we learned about last week in class. Looking forward to using the video and audio tags!

How the Web Wins

2010-08-24T00:20:00.001-07:00

Hansen's article pits the world wide web against the world of apps in a battle of who will reign supreme in the future. He argues that the web is the best "app" out there and cannot be replaced. This is an interesting read, but i wish he would have gone more in depth about HTML5 standards and the future of advertising. This article just skims the surface.

http://www.wired.com/epicenter/2010/08/how-the-web-wins/

Link to my site and ch 5 Homework

2010-08-17T07:50:00.000-07:00

http://gerberdingerso.aisites.com/MM2203/hwsite/index.html

Creative Floats

2010-08-10T09:43:00.000-07:00

In chapter 4, we made a simple layout using floats and a definition list. The float property is a good way to layout your page versus using tables. The coding is cleaner and minimal, and it's easy to get the effect you want. First, we separated content into the definition list, which basically formats the "title" and "description" so that there is some indentation and spacing which visually separates the term and data. Here is the hmtl and CSS for the page:

And here is what the finished layout looks like:

Dreamweaver Web Templates

2010-08-09T19:07:00.000-07:00

So, here's a template i made (for educational purposes) from an existing web page from pixelbenders.com. A template basically allows you to keep the same format throughout several pages and specify what can be edited and what cannot in order to make quick updates to your site. In this example I took the page, created editable regions where i planned to make changes, and made the footer an asset that i used on both pages.

Here's what the original site looked like:

And here's what it looks like after converting it to a template and playing around with images and text:

Example 1

Example 2

No, these are not perfect, but you get the idea... this serves as a glimpse of what you can do with templates.

Getting Creative

2010-08-09T18:57:00.000-07:00

Need a little inspiration? Take a break from homework and check out these vids on youtube.com:

Super Cool MS Painter

Painting With Lipstick

hehe, you can do just about anything you put your mind to..

But if you're tired from staring at the computer screen, i suggest taking a walk outdoors or going hiking in sf. You'll come back to work with a fresh pair of eyes..

Turning Tables to Divs!

2010-08-02T23:40:00.000-07:00

Here's the page that we had to recreate using divs instead of tables:

I started out by defining 4 divs: the branding, content, nav, and footer. Then i set the body font and size, and the background color for each div and styled the links. For the content section i used overflow:scroll to get the scroll box like in the example. Here's a look at my coding:

And here is my finished page:

subcide.com "Create a CSS Layout From Scratch"

2010-08-02T00:32:00.000-07:00

Here's what i have so far using the tutorial from subcide.com. Looks pretty good except i was having problems with the main navigation, which is supposed to change color on the down click.

Update on Homework Site

2010-07-26T20:37:00.000-07:00

So heres a rough look at what my homework site will look like. Site still in progress...

BulletProof Web Design Ch1- Using Ems

2010-07-26T13:25:00.000-07:00

Using ems to size up your text is a good idea, since it allows flexibility for the user to resize text, regardless of what browser they are using. The em is a relative unit, similar to percentages. One em is equal to the distance of the type size.

Richard Rutter offers a great technique which makes it easier for you, as a designer, to think in pixels. First, knock down the body font size from 16px (the default) to 10px (a nice round number to work with). Then, adjusting the rest of your text becomes a bit easier. Look at the code below which shows the relationship between ems and pixels.

body { font-size: 62.5% } /* gives us a base of 10px */

h1 { font-size: 2em; } /* 20px */

h2 { font-size: 1.8em; } /* 18px */

p { font-size: 1.2em; } /* 12px */

Here's what this coding will look like applied to the page:

RGB and Pantone

2010-07-26T13:14:00.001-07:00

Here are some colors i was thinking about using for my homework site. I have listed the pantone code and the hexadecimal equivalent.

Box Model Tutorial

2010-07-26T12:15:00.000-07:00

The "box model" is a visual representation of HTML elements, which can be represented as boxes. The illustration to the left represents the margin, border, padding, and content areas.

Margin - Clears an area around the border. The margin does not have a background color, and it is completely transparent
Border - A border that lies around the padding and content. The border is affected by the background color of the box
Padding - Clears an area around the content. The padding is affected by the background color of the box
Content - The content of the box, where text and images appear
Knowing these elements and how they fit together will help you with your layout. Basically, you will know how much space (or how many pixels) you need on the page to accomodate your design.

Let's take a look at an example from sitepoint.com. Here's the CSS for the box to the left:

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

Here's the formula for calculating the total width and total height of the box:

Total width = left margin + left border + left padding + width +
right padding + right border + right margin

Total height = top margin + top border + top padding + height +
bottom padding + bottom border + bottom margin

so..

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

With this information, you know that you need to alot a space of 352 x 252 pixels on your page.

Time is Money

2010-07-19T17:31:00.000-07:00

Week 1: Tuesday, July 13, 2010

Research interesting ideas for your homework page and sketch two examples. Must be 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. Email me the url.

Create a timeline and/or schedule for your homework assignments and post to your blog.

sketch 2 ideas
scan image, block out grids
print and note navigation
scan and upload to blog

Week 2: Tuesday, July 20, 2010

Create a tutorial page on the Box Model. Be sure that a newbie would be able to understand the difference between content, padding, margin, and border areas. Post to blog. Due week 4.

Color practice: on this same blog, list 3 pantone colors and their RGB equivalent. Should relate to your layout. Due beginning class next week.

Read Chapter 1 of Bulletproof Web Design and create the same stylesheet using Ems (page 22). Link on your blog. Due beginning class next week.

Research colors for hw site
Read ch 1
create stylesheet using ems

Week 3: Tuesday, July 27, 2010

Converting tables to divs - separating content from style. Deconstructing a page: Take this web page and reconstruct it using an embedded style sheet. You don't have to use all content, but enough to show your work. Your guidelines will be chapter 3 of the book called "Expandable Rows". As a goal, try to use as few div's as possible. Discuss on your blog and provide a link to the finished page. [Note: embed your .css on the page. Do not link as an external stylesheet. I want to see your work displayed with the .xhtml.]

Read ch 3 "Expandable Rows"
Recreate the example page using divs
post to blog

Week 4: Tuesday, August 3, 2010

On your homework page, create two pages from a Dreamweaver template. Insert an asset onto both. Email me 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.

Extra credit: Write one style that combines selectors (compound selector) to save code. Post to blog.

Week 5: Tuesday, August 10, 2010

Read chapters 5 and 6 of the book and create a page using elements of both. Use can use CSS3 to create your rounded corners but make sure your layout uses "Indestructible Boxes" and can pass the 10-second usability test. This is your [take home midterm] and is due beginning of next class.

Week 6: Tuesday, August 17, 2010

Create a possible portfolio home page using chapter 9 "Putting It All Together" as a source. This is due week 8 at the beginning of class.

Week 7: Tuesday, August 24, 2010

Continue work on possible portfolio page, chapter 9. Blog its target audience and design objective. This blog (as opposed to the lab above that is due today) is due by beginning of next class.

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. Reflect on how you might use the allowed .css code to give a different look to your page. How can you incorporate what you've learned from Bulletproof Web Design?

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. Include screenshots and images. How would you present to potential employers to demonstrate your knowledge? Email me once you have blogged.

Week 11: Tuesday, September 21, 2010

Presentation and Critiques

no homework

2010-07-19T17:16:00.000-07:00

Sketches for Homework Page

2010-07-18T20:40:00.000-07:00

In Version 1 i have the main navigation across the top of the page. The numbers represent each week of class. Clicking on a particular week will jump scroll you down to that assignment. Each one has a thumbnail that links to a new page, with a brief description to the left. If you scroll down the page you can also view the assignments in a timeline.

Version 2 is the same, but without the jump scroll. Clicking on the main navigation will take you to a new page.

YAY!

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

Hello everyone! it is 9:27 on a beautiful Monday morning and I am in class bright and early and hell of excited about my first blog EVER!!