Hello Blogger My old friend, I've come to post on you again

Since I currently lack a domain name and host for a website, I think I'll move my web presence here. To any followers still around from 3 years ago:

Stay tuned...

I'm not dead! (lol!): UPDATE!!!

I've been out of the loop for awhile, so I guess I better post! Eventually I'll be starting a new blog on my personal WordPress site. Been busy, so maybe I'll start posting some work soon.

In the mean time, check this out: www.myriadecc.com

It's the website for one of El Camino College's annually published magazines "The Myriad".

I'm the student web developer for this site, so check it out! It's still under development, but the full version will be out once the magazine is published.


As for what I will do for this blog, I think I will use it to show just purely student work. I split my blog up into different one's earlier this year, but I'll be merging the contents back again later.

My personal WordPress site address will be posted once that is done...

I think I should also redesign the look of this blog too.

Art 41: Assignment 1- Final

For this project I used the typeface: Lucida Sans Italic. The letter I used is a capital "B", and I used it to express 4 different elements of design: direction, line, size, and shape.

Art 41: Assignment 1- Roughs (part 4)

Art 41: Assignment 1- Roughs (part 3)

Art 41: Assignment 1- Roughs (part 2)

Art 41: Assignment 1- Roughs (part 1)

New Blog

I needed to have separate blogs for my Flash and Typography assignments, so I created a new blog to post my Flash projects.

You can find it here: Dan's Moving Pictures

I will post anything related to my animation projects to this new blog.

Good and Bad Typography

Good:



I like how the logo for Gran Turismo 5 looks, since the "GT" as the logo is shaped in a way a car would be shaped. This is important due to the fact that the game is mainly about collecting and driving cars. Notice that the "GT" lacks hard edges like how a modern car lacks hard edges in it's design. The letters also appear to be made up of the same material as a car's body.

Bad:



This is example that I saw from reallybadtype.blogspot.com.
This is a blog that posts examples of bad typography from the world around us.

If you took a quick glance at this label, you will likely read it as "ireless accessories". The company logo is supposed to be used as the "W" for the word "wireless", but it becomes lost due to the way the "W" is spaced far from the rest of the word. It also does not help that there is a contrast between the color of the negative spaces of the "W" and "ireless".

Examples of Flash: Newgrounds.com and some of my favorite animators

I decided to use newgrounds.com as an example, since it showcases some of the best and some of the worst Flash projects on the web. Here you can find many Flash based animations and video games. Submissions are open to anyone, and the community chooses their favorites. (Caution: Some of the works can be VERY offensive! Viewer discretion is advised)

Here are also a few animations from some of my favorite Flash animators (YouTube links):

Egoraptor - "Ryu: Then and Now"

Harry Partridge - "The Justin Bieber Show"

Yotam Perel - "Meme City"

Accent Creations: Almost done on my part

The 3 pages I've been working on are nearly done. I just need to add the images for the background and logo. The hyperlinks to these pages are set as well. Once the team assembles for our final day, then the website will officially be complete.

Accent Creations: Progress Screenshot #1

The spry menu bar still needs some positioning work.

Easy Rotator plugin

Roseannah recently found a free program that creates dynamic scrolling image gallery. You can find it at http://www.dwuser.com/easyrotator/ and you will be able to run a program or plugin that creates a gallery for your web page by using a javascript code that is automatically inserted where the images are desired.

IMPORTANT NOTE:

I've done some tests with this code and I have found that inserting large image files will not only make the web page load too slow, but it may crash the browser as well (tested in Firefox).

Also note that the Easy Rotator image gallery will won't transform the image that much when using different sizes, but a slim container for the gallery will look like this:



Notice that the image has been cut off.

Accent Creation: Designing the Code (part 3) - Gallery Template

Here is a screenshot of the gallery page template. The thumbnails will be set into a 3 x 3 grid, and they the images will be aligned using columns that contain containers for the thumbnail images. The finalized version of the gallery source code will have thumbnail images that swap the larger image which will fill the space in the large container to the right of the thumbnail container (the large container temporarily colored yellow).

Accent Creations: Designing the Code (part 2) - Template Example

The basic template has been constructed. Here's a screenshot that shows a preview using Firefox and the page source code. The next step is to evaluate what containers need to be added for each unique page. The green box is the container for the page content and the blue box represents the container for the menu bar. Both of these containers can be switched around by changing the stacking order in the code in-case the design of the website changes during development.

Accent Creations: Designing the Code (part 1)

The development of the website has begun, and I have been given the task of developing the basic template of each page. An important element I should mention is the importance of commenting out notes. I have started to carefully place notes on each and every dividing tag. This information will be helpful in both the initial development of the website and its future development, because it will provide future developers to understand the structure of the code.


I have also added an area to leave notes. Since this is a group project, this area will the members communicate better. So far I've only taken note of who last edited the page and what the date is. This area can be deleted or kept after the initial development of the website has been finalized.

Since images for each container have not been finalized, each one will have a temporary random color so that each container can be visible during the development process.

Accent Creations: Furniture Gallery - Design Rough #1

This an example of how the furniture gallery page may look like. The design keeps the same layout as the previous page(s) I posted. It would be a page with swapped images on rollovers. The rollover images on the left box would swap the image to the right without an image restore. Clicking on either the thumbnail or the enlarged image would lead to a link to the full size image. Some of these images need to be re-sized and re-sampled, and some of the backgrounds for these images don't quite match each other and the page it was intended to be placed in.

Accent Creations: Rough #4

I redesigned the previous rough that I did using the suggestions made by the comments under my post. I got rid of the "Accent Creations" from the headline since that piece of information is already in the heading. I also made the type for the headline much larger so that it is visible. I got rid of the warped image from the header due to it being distracting, but I left the color burn layer that accompanied it since it left an interesting color. A picture of Michael replaces the picture of the chair due to a small mistake in the distribution of photos, and the fact that the paragraph to the left is more about the artist than it is about a chair.

Accent Creations: Rough #3

I reworked my rough after having been shown better examples of website layouts. For this rough I decided to have more emphasis on images. A gradient is used in the background so that the viewer is led up and down the page. In this example the image is large and vertical and the text boxes are horizontal. Drop shadows were added to the boxes in order to keep the page from looking flat. The text within the header is now lined up on one horizontal line and the menu bar no longer has small images to distract the viewer from the text.

Accent Creations Project - Site Architecture, Information Architecture/Wireframe, Roughs

Site Architecture

The user starts at the home page. All pages have links to each other. Clicking on the link for "furniture" leads to the furniture page, which includes links to photo galleries for tables, chairs, cabinets, desks, beds, boxes, as well as miscellaneous pieces. The "links" page will include links to useful pages about exhibitions, facts about wood, and inspirations. The contacts page will contain all the contact information on one page.

Information Architecture/Wireframe

Each page will have this layout. The menu bar will be located below the header. It will be a spry menu bar, and on rollover it should show the links to each link featured on the "furniture" and "links" pages. Page content, which will vary from page to page, will take up the rest of each page.

Rough #1

This rough is how the website would look like as a very simple design. The links on the menu will will be PNG images that have furniture acting as bullets each piece of text (this rough uses the same image of the same chair, but the actual website would use different images all around). These PNG images will have a swapped image on rollover. The swapped image is the same image, except it has a back-light. The logo will be hovering over the menu bar, and will also be a PNG image.

Rough #2

This second rough retains most of the same design from the first rough. The difference is that an image is placed behind the logo. The menu bar has a solid shape placed behind it.