Steve Chen's Blog

shinyoconcepts.com

2011-06-14T04:00:00.001-07:00

After weeks of restless nights I can finally say the time is near. My portfolio site is finally here. I learned a lot through this experience. I'm happy with my final results. I can't wait to take on web design head on and take my skills to the next level. Below is my mission slash about me. This is my experiment on SEO since this blog gets more hits when I google my name. :)

shinyoconcepts.com

About me: I'm a front-end kind of guy with a knack for design. I like to create websites that are user friendly, simple and effective. My understanding of brand reinforcement comes from my experience in Advertising and Graphic Design. I'm passionate about creating for the overall big picture, planning every stage from concept to creation and shaping every detail of layout, typography, color, imagery and content.I take unique approaches and strive for innovation.I'm a designer with a purpose.

keywords = web design, website design, web site design,websit designer,Web Design, web site designer, flash designer, flash web designer,graphic designer, salary web designer, web designer freelance, web developer, web page design, web development, graphic web designer, ca web design, best web design, web designer, design portfolio, Steve Chen,Portfolio, San Francisco, California

User Testing: iGARLIKEit

2011-06-13T21:45:00.000-07:00

Thoughts: Taken from our user testing. It seems our design successful and our interface is user friendly despite that the site is not fully completed and functioning. The User is able to know what the topic and purpose of the site. This site has potentials and has a great concept.

User: Garrett Gerberding

Age:17

Hobbies: Cooking, Drawing, Flash Tutorials, Airsoft gunning, book reading, track, and nunchucks

Below is a questionnaire that we used for user testing. I asked my brother in-law to test the site.

Front Page = 8

I like the colors and the picture slide show (THE GARLIC ICE CREAM HAS TO STAY)
The intro text on the right could use a little bit more flamboyance

Recipes = 8

organized neatly
maybe make the text the same pink as the recipe button? [there's also an error on that page for my computer, the words are overflowing downward off the screen]

Health = 9

good idea to put this section. I would have read it if it weren't for the lorem ipsum
maybe put an icon next to each health benefit? (and maybe make the text color the same yellow as the health button)

Oh my Odor = 8

I LIKE THE FART ONE!!!
The text that you put there needs to be interesting and unexpected or else this page wont seem necessary (but i know its just lorem ipsum for now (unless you guys aren't required to put text and are going to leave it like that (in which case this suggestion is kinda useless)))

About = 9

I like it. It really shows the website's dedication to a dry, smelly, plant
could use a faded background picture maybe. Just a visual thing to look at

---------------------------------------------------------------------------------------------------------------

1. Rate the Design

9 I like the colors; it's very nice, neat, and clean; its easy to find everything; the only thing that keeps it from being a 10 is that its not mind blowingly amazing (which, very few things are)

2. When looking at the home page, can you instantly tell what the site is about?

It took about 7 seconds for me to figure out the theme. The garlic bulb and the heart in the iGARLIKEit represent the theme very well. The picture slide show helped the most.

3. Rate the site content

8 Recipes is the only real requirement and it was very well done; the health benefits is an good idea, I would read it if there was stuff to read; the smell one doesn't really seem too important but its pretty funny and, if some interesting stuff is written there, it would really add to the website. The about does its job

4. Rate the navigation/ ease of use:

9 simple and easy to understand. Its not perfect because its not done and some of the errors for my computer make it less easy to

5. The registration/login process (is it easy to use?)

Yes. I'm not sure why I had to lie about being 18 to enter though. There was also a little bit of a problem for my computer to view this part too.

6. Submitting a recipe

Simple and easy to use. I messed up on the ingredients part though. I thought the box on the left was for the ingredient and the box on the right was for the amount of the ingredient.

COMMENTS: i wanna see the done website

Intermediate Web Design: Research

2011-04-12T08:49:00.000-07:00

Through research I discovered the idea of creating a site to help users create recipes might be too large for or class. In addition, there might be a big learning curve for us in creating the data base as it might surpass our team's overall skills. I have thought of different approaches and refined the idea.

Concepts:

1. A site that caters for garlic/or something specific (example:mushroom) recipes. Users can search through a library of (garlic) recipes, upload their own recipes. In addition, they can upload video and pictures of their dish. There can also me a "My Creation" section where users can upload unique recipes that they personally created.

2. A site that caters for unique personally created recipes. Users can upload recipes, photos and videos tutorial on their unique dish.These recipes are none traditional and breaks out of the norm. In addition, users can vote and comment on the taste of each dish.

3. A site for healthy eating. User friendly, where navigation categories may include: (Low Fat, Low Carb, Atkin, Vegan, etc. Users can upload healthy recipes, photos, and video tutorial. In addition, it can also allow users to place comments on recipes.

-Research links -

http://www.seriouseats.com/

- categorized by most popular an featured recipes.

-offer other topics ( Eating Out, Column, Shop, Video)

- offers video but not that user friendly

http://www.seriouseats.com/2011/04/10-things-to-do-with-peeps.html

- a link to a funny unique approaches to eating peep.

http://showmethecurry.com/

- great site specifically caters for the curry enthusiast.

- offers really good tutorial and site is easy to navigate

http://www.foodnetwork.com/

- navigation is large and difficult to find what you are look for.

- great videos

http://www.eatingwell.com/

- magazine style layout site

- complicated for you to look for something specific

http://www.cookinglight.com/

- has recipes for healthy cooking

-teaches users how to eat healthy

-magazine style layout site

note: if you are interested in seeing the progress of this idea please visit.

shinyoconcepts.com

Intermediate Web Design: Content Editor

2011-04-11T22:17:00.000-07:00

Team Role: Content Editor

As the content editor it is my duty to insure the quality of all written content within the site. I will be responsible for the tone of the site. I will create the copy for the site content. My duty is to create a voice for the website that will immerse the audience and direct them to the message we are trying to convey. It is my job to make sure this message is clear and concise. My goal is to insure that the identity and idea is clear and consistent.

In addition, I will also me involved with the planing for SEO. My efforts will be based on careful, consistent use of keyword language and heading markup. My goal is to make the site as search-friendly as possible.A challenge I might expect with this role is creating a clear and consistent content. Also, another challenge could be to be the creative aspect of the copy.

Reading from Web Style Guide 3rd Edition:

Content Inventory

Building an inventory or database of existing and needed content will force you to take a hard look at your existing content resources and to make a detailed outline of your needs. Once you know where you are short on content you can concentrate on those deficits and avoid wasting time on areas with existing resources that are ready to use. A clear grasp of your needs will also help you develop a realistic schedule and budget.

Shinyo Concepts Logo Design

2011-04-11T00:21:00.000-07:00

This is a logo design for my identity as a designer. The logo also is made of initials. My idea was to create a contemporary designed logo. I utilized shapes and line to create imagery.

New Portfolio Site: Shinyo Concepts

2011-04-11T00:08:00.000-07:00

Here is a quick mock up of my new portfolio site. It will utilize JQuery to showcase portfolio examples upon mouse hover. Upon mouse hover on each option will slide in the thumbnails of portfolio works through JQuery. As the mouse rest on each option will trigger a fade in and out of each portfolio works. There are only three options in my navigation. Home, Contact and Blog. The Home is where my portfolio work will be showcased. Contact will include information about me and my passion. In addition, it will include contact information for any one who would like contact me. Lastly, the blog will direct the users to my blog site. Which will include my blog about my interest and passion for design.

My CSS ZEN GARDEN

2010-09-21T04:20:00.000-07:00

Here is a link to my CSS Zen Garden. I have decided to change my design as a whole. Though it is not completely elastic I am happy with the final results. My approach is to create a site that is purely black and white design. I wanted a show a few type treatments to create a unique approach. The concept is to show a large cartoon comment box in which the whole site is contained. At the bottom is a rabbit character that I have created to present the site. I really enjoyed getting creatice in making the cartoon comment box in CSS3. The triangle at the bottom was created with a border that is enlarged and colorized to create a triangle. Below is a link to my site.

CSS ZEN Garden by Steve Chen

Reflecting on CSS Zen Garden

2010-09-15T11:08:00.000-07:00

What I envision with my CSS Zen Garden page is that it will be be of a large blimp . Within the blimp will hold the content of the page. Like in real life blimps have advertisement messages that scroll from left to right or up and down. My page will have content that will be scrollable from left to right within the large blimp. The idea is to present the zen garden content in a unique way, without loosing the purpose. The page will be easy to navigate and will capture my audience's interest. The colors and design layout that i use will be appealing and effective in presenting my idea.

Portfolio Update

2010-09-07T11:41:00.001-07:00

Here is an update to my portfolio website. I have changed the layout all together. The idea was to keep all content on one page. In addition to keep it simple and effective for showcasing my work. I have used anchors to connect each content of the page. In addition, the footer leads back to any content of the page. I have also used visual lightbox to showcase my works. Lastly I have made the site elastic so that it can be viewed within any browser size. Here is a link to my website portfolio

CSS Zen Garden Wire frame

2010-09-07T11:23:00.000-07:00

Here is an idea of my wire frame for CSS Zen Garden. The will be a blimp made of css content will be within the blimp.The content will be contained and will side scroll. This will be consistent with what you will see blimp advertisements. If all goes well this will also be animated and will float. This idea was inspired by the CSS Fail Whale.

2010-08-31T05:18:00.000-07:00

Article from Subside: Pure CSS Twitter Fail Whale

2010-08-25T21:38:00.000-07:00

Today I heard from a classmate that you could render and illustrate purely in CSS...after a quick google search I found this and was blown away... The article mentions about how it was created by utilizing CSS curves and radius. In addition, by masking with containers. To make things even more "Juicy" if you’re using (Safari or Chrome), you will see it in it's full glory animation. I feel this embellishes the idea of graceful degradation. Below is a link to the article.

Pure CSS Twitter Fail Whale (open in safari or chrome to see what happens)

Smashing Magazine Tutorial HTML Cinco...

2010-08-25T21:09:00.000-07:00

Smashinmagazine: "CODING A HTML5 LAYOUT FROM SCRATCH"
I really enjoyed this tutorial about HTML5. The "aside" tag in this tutorial really embellishes the design layout. The tutorial refers to this as the featured block. Overall I like the design of this page. His use of rounded edge boxes and color choices work well and is easy on the eye. The design is contemporary and appealing. In addition, the drop shadow effect is a nice touch. My only trouble with this tutorial is that it was quite long. However, it was good practice and the final result was rewarding. Below is the link to the tutorial.

CODING A HTML5 LAYOUT FROM SCRATCH by Enrique Ramirez

Week 7 reading

2010-08-24T00:44:00.000-07:00

How the Web Wins by Evan Hansen

Due to my lack of experience with apps as my phone is not "smart" enough my opinions for this article holds little to no credibility.If I may say this article left me frustrated as I was hoping to learn more information about HTML5 and other new features in comparison to apps. In addition, with my little experience with apps I recall it as mostly shortcut link to websites. So, I'm stating that there can't be apps without the web as the writer is implying the battle between Webb and Apps.However, I do agree with the writer stating that with the new capabilities of the internet will pave way for more advertising. We new features like video, audio, slide shows and animated data..Advertisers have more options for targeting audience. In addition, the web makes it much more easir to track and record audience data. Below I have added links to the website. Lastly, I wish the author could elaborated more on how the web will be changing.

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

Indestructible Boxes

2010-08-17T01:09:00.000-07:00

Here is an example of indestructible boxes. The box is created by using two round edge boxes. The purpose of the indestructible boxes is to constrain the text within the box during size changes.I have included a screen shot of how the code looks like.

Inspirational References

2010-08-10T04:32:00.000-07:00

As an aspiring web designer with a graphic background. I get most inspired by others. I find it refreshing to see vector art. A vector artist I would recommend is Jared Nickerson. He is known for his out of this world patterns and designs. Check his work out. I like his use of thick strokes and color choices.Though his website is currently under construction below I have included his a link to his online Behence portfolio.

j3concept @ BEHENCE

Another thing that gets me going in design is typography. Typography is also a key component in design as it communicates to the audience directly and visually. The website below has some unique fonts that I find appealing and inspirational. Good new is some of these fonts are free. So feel free to check this site out as well.

fontfabric.com/

Creating Dreamwaver Templates

2010-08-10T01:03:00.000-07:00

Created template page

DTW (Dreamweaver Web Template).Dreamweaver Web Templates, allows users to share the same web design and layout. On the other hand, you can make some regions in a template available for editing while preventing changes to other regions. This means that you can allow others to add and edit content, and still preserve the layout of the pages and the template itself.

The links below are two examples for website templates. The first template layout is taken from http://www.chicagolshirts.com/. Templates help with speeding up the process of creating and updating a website. Some business utilize templates to make the process of updating their website simpler and faster. The second template I have included is an example of preinstalled templates that are included in dreamweaver.

To create a template you must first choose "save page as" under the file menu in the internet browser. In addition, make sure you save the complete page. This may include style sheets, images, and any other content that was used to create the page. The next step is to open your saved web page in Dreamweaver and save as a template. This process will convert the page into a template in which you will be able to assign your assets. The assets are what you will be able to edit. Furthermore, you are able to assign images as assets. In the example below is I have assigned the text and images as assets.

Monkey Magic temp site 1

Monkey Magic temp site 2

It's In The Box...

2010-08-03T03:04:00.000-07:00

The box model is a representation of elements in the documents tree and is laid out according to the visual formatting model. The perimeter of each of the four areas are also known as content, padding, border, and margin.

Box Model Formula
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

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

Converting Tables to Divs

2010-08-03T02:02:00.000-07:00

This was our homework assignment. I found this assignment quite informative and useful. To create this page I used 4 divs and allocated them as header,content,navigation,and footer. All four divs are colored green to keep a consistent color scheme. Below is my html code with the embedded CSS...

Homework Site Concept

2010-07-27T03:36:00.001-07:00

Here is a concept of my Homework Site utilizing the selected color scheme.This is to help give a basic idea on how the color, typeface, and layout will be applied.

Color Concept

2010-07-26T22:42:00.000-07:00

Color Concept
Here are the 3 selected colors for my website.
Included are Hexadecimals and the Pantone equivalents.

Flexible Text Using Ems

2010-07-26T16:49:00.001-07:00

The em is a sliding measure; one em is proportionally the same as a point size. One em is equal distance to that of the type size. If the type is at 6pt, then the em is also at 6 points; in 12pt type an em is 12 points and in 60pt type an em is 60 points.

Em based method offers an alternative to sizing text using em units. Ems allows designers the advantage for more precision and control. In addition, they offer familiarity for designers who are use to thinking in pixels.

In addition, Em based method also makes the text easier to work with. A good example from the book is when you take the default text size of 16px to 10px. This is turn makes is easier to round off and compensate for the rest of the text. Below is an example of how the em method can be applied.

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 */

HW Timeline MM2203

2010-07-20T03:22:00.000-07:00

Week 1

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.

Week 2

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.

Week 3

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.]

Week 4

Read Chapter 4 "Creative Floating" of Bulletproof Web Design, do the exercise, and toggle the float direction (page 102). Post link to blog.

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

Write in your blogs your best advice for getting creative.

Week 5

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

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

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

Create wireframe of final project and post to blog.

Week 9

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

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

Formal presentation and critique of Student Projects.

HW Site Sketch 2

2010-07-20T03:02:00.000-07:00

In this second design, I have created four small square buttons that will also serve as my main navigation. These button will link to various sites such as Sketch,Homework,Portfolio, and Zen Garden. Each button will showcase a preview of content below in the large rectangular box upon rollover.

HW Site Sketch 1

2010-07-20T02:49:00.000-07:00

In this first design, I have created four rectangular thumbnails that will also serve as my main navigation. These thumbnails will link to various sites such as Sketch,Homework,Portfolio, and Zen Garden. Each thumbnail will showcase a preview of content upon rollover.

Today is the first day!!!

2010-07-13T09:27:00.001-07:00

Hello...people!!!! Wanna check out some CHARMING SHOPS!!!