Anneke.Net > Work > Portfolio > Miscellaneous Designs

The following designs are not being used on live sites (unless mentioned). Rather, encompass designs I have created as redesign suggestions for the following sites, and may have been rejected or accepted. They are presented here to provide examples of my work. All designs were created using Macromedia Fireworks. In all three cases, I used the logo (or redesigned) logo provided to me, and recreated the site design from there.
High Tech High

The redesign of the High Tech High- Philadelphia web site was initiated as a volunteer project by Breakaway Solutions for the new charter school. The client provided the new logo (in the upper-left corner of the redesigned site), and I used it to create the yellow and blue design seen in the second image, below.
Home Page, before redesign (Screenshot)		The home page of High Tech High, before it as redesigned. Compared to the redesigned screenshot, below. Poor elements of design include: Badly formed HTML. Notice the hanging comment tag visible in the left nav. Overly large/wide top navigation bar. It takes up almost a third of the page, with very little informative worth. The poor choice of images within the top nav; most pictures of people show businessmen and women; no high school-aged students in casual dress. The ugly, hard-to-read polka-dotted background in the left navigation bar. The school's name in the upper left-hand corner does not link back to the home page; there is no way to reach "Home" from within the site.

Home page, after redesign (Screenshot)		The design (created in Fireworks 3.0) for the new High Tech High site. The blocky, modernistic design fits well with the very logo (provided by the client), and the exchanges of blue and yellow squares between the alternate-color navigation bars are representative of the exchange of information in a learning environment, as well as 'bits' of technology.
Arioso Quartet

The Arioso Quartet is an excellent string quartet based in the Delaware Valley (near Philadelphia, PA).
Home page, before redesign (Screenshot)		Design and site inconsistencies include: Font use (in their header/logo) inconsistent with the font used in their letterhead. Unevenly applied colored (navy or black) borders surrounding links; looks chunky and unprofessional. Random, irrelevant imagery; the hand-drawn quartet is beautiful, but the circular asian image doesn't fit well, and has a mismatched background. The slightly spotted background is barely noticable, but doens't match the white background of the logo, which causes the latter to stand out and look awkward. The layout of the navigation is poor. On the home page, most links are spread out along the side. On all pages, the two lines of navigation links are at the very bottom of the pages, forcing you to scroll to the bottom of the page to navigate, if you notice them at all.
Home page, after redesign (Screenshot) For a one-page "working" version of this site, try this redesigned home page.		In this particular design, I strove for something consistent yet elegant, which might provide a bit more information about the group, its members, and relevant information, coherently organized. Arioso already had two elegantly simple hand-drawn pictures on their site, so I used these images to set the tone for the new site. Improvements made include: I matched the font found on Arioso's letterhead and business cards, and used it in their logo and home page header (title). Javascript rollovers were used to change navigation color, although this unfortunately only works in Internet Explorer. To work in both browsers, the navigation would have to have been images, which I avoided for the reason listed below. I kept the navigation text-based, to help reduce load time by minimizing the use of images. The navigation stayed prominently featured at the top of each page, allowing easy access to the entire site, while providing better site organization, with some categories (such as About Arioso and Pricing) that were left out of the original site. I used a cascading style sheet (CSS) to maintain font color, size, and style consistency throughout the site. A single reference was used in the right column, to provide an example of the praise Arioso has received, without going overboard. Kept the page width to 760, to prevent scrolling, even in 800x600, and tried to keep the page short enough that top-bottom scrolling can be prevented as often as possible as well. Limited the content (on the home page) to short sentences; long unbulleted descriptions discourage reading. Linking the important phrases encourages the reader to delve deeper into the site.
Precious Petals

Precious Petals, also based in the Delaware Valley, is a florist who primarily works on weddings.
Home page, before redesign (Screenshot)		Precious Petals had a great (albeit somewhat large) logo. I used the logo and the floral image to create the new design, below. Poor elements of design: A virtual cacophony of font colors, the main text in this site changes from light purple, to red, to blue, indescriminately. The background also changes from a swirly floral background to white within various portions of the pages. Consistency (although it doesn't need to be black) would be better. Although pages should be relatively narrow for 800x600 resolutions, this page is too narrow; with all that white space, they are missing out on content space. Some of the navigation links on the subpages are broken. Many of the "personal flowers" photos show bridal parties, with bouquets too small to be examined. The up-close photographs of flowers should be used on the web just as well as in album viewing the florist does in person.
Home page, after redesign (Screenshot) For a one-page "working" version of this site, try this redesigned home page.		The same three-column design is used here in the Precious Petals design as in Arioso's, above, but with entirely different color schemes. This redesign, unlike Arioso's, uses the left column for navigation (a 'left nav'), using images to take advantage of a more professional, anti-aliased font. If you would like to see them, the Javascript mouseovers work in the one-page demo. Improvements made: Used more complimentary pastel shades (blue, green, pink, purple) to maintain consistency with the logo. Put the nav on the left side, spaced out a bit, where it doesn't interfere with the content. Measured out the home page content into short sentences, with links highlighting important sections of the site. Used a style sheet (CSS) to maintain aesthetic consistency throughout the site, such as use of font, color, and size. Added a single reference to the right-hand column, to encourage visitors of the site regarding the worth of the florist. Took advantage of the white space by widening the page to 760 pixels, which fills the page while preventing the need for left-right scrolling within 800x600 resolution, still used by a large percentage of the population.