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.

List Exercise Screenshots

My Website - The Soil Horizons