HTML and CSS coded while working for Medical Managment Associates:

Old site:

www.wghfw.com

Site redesign

Old site:

New Site:

http://www.phoc.com

These are the 9 steps to the birth of your site:

1. Research

2. Design

3. Content

4. Code

5. SEO

6. Publishing

7. Marketing

8. Analytics

9. Adjust

A technically challenging site that uses CSS transparency, absolute positioning with z-index layering, and javascript curvy corners script for rounded corners.

The swoosh element in the logo was repeated throughout the site. The large swoosh intermingles with the large main content and wraps around the sidebar in an effort to re-instate the company branding and adds an element of flow for the eye to follow. The same element is repeated as page indicators for the 3 buttons on the utility nav, and also the element is seen as a background image in the hover state.

The transparency is used when the content conflicts with the design element swooshing around the page. Additionally, the element can be moved behind the content if too cluttered. Each swoosh senario (behind, in front, and transparent) was coded as different layers in CSS and named as a class, so that the placement of the design element could be moved easily on the fly while creating the page and content.

Rounded corners are used on the right corners only, to mimick the roundness of the right side of logo.

Flash was added to the homepage to accommodate client wishes to have these 5 statements on the home page that additionally link to the rest of the site.

Site URL: http://www.apngroup.com

Client decided to remove the “swoosh” design element from the body of the page.

This is an html site built with a dreamweaver template. Contact form uses .asp.  Quotes in the header are using a javascript random script. Background patterns are a separate graphic with “repeat-x”.

 http://www.ashenden.com

This is a study I did on email campaigns and how different email  clients interpretted the message. I designed a postcard and a newsletter for 5 Seasons Brewery, then took screenprints of how they appeared in different clients.  Check out the powerpoint presentation at the bottom of the page.

http://www.sandynichols.net/blog/email-marketing-best-practices/

This site was built in one day; just needed a quick site for informational purposes.

Live site: http://www.dunwoodycandidate.com

More pics of portfolio show and graduation on flickr: http://www.flickr.com/photos/sandynichols/sets/72157605583874995/