UX Design iterations for Lmahoney.com
Special thanks — gabdesigns.com bullet image jlm bullet image toolsbydesign.com
Lmahoney.com welcome page Lmahoney.com welcome page Lmahoney.com style guide Lmahoney.com header iterations
Lmahoney.com left navigation Lmahoney.com contact form Lmahoney.com assets
Welcome Page
Keeping the index page simple it includes only the header, footer and one featured image.
This feature will be any image that inspires or entertains.
When all galleries are complete, these featured images will link to the appropriate page. For now the user is urged to delve deeper into the site via the header.
Gallery Page
Gallery includes accordion left nav, default main image, image title/description text and eight thumbnail images.
If a sideshow has more than eight images, the far left and right thumbnail images will become a previous and next arrow link - seen below with other site assets.
Appearance Specs

    1024 x 660 px 960 grid system 5, 185 px columns 5 px gutters

Font Specs
    Trebuchet, Arial, San Serif contrast ratio 4.5 or more

Keep grid specs to multiples of 5 pixels as possible.
Consider contrast ratio as you choose your color palette
Design to view on iPad
Header Iterations
Created a logo that would work for diverse projects..
    website resume/business cards fine art signature holiday projects

1  Dividing functional areas visually simplifies. Using hand drawn rules keeps the feeling casual and friendly.
2  Using the full name was too much for all projects.>
3  Added web-safe color bar and icons indicating different states to the users.
4  Enabled
5  Hover/Rollover
6  Current/Selected/Active
7  This sprite is the latest header iteration.
"L" is Laurie's signature initial. Shape held within the "L" is a logo created years ago, for collaborative pieces created by Gloria Lobaugh & Laurie for family and close friends.
Left Navigation
A lesson in accordion menus
8  Color indicating state of navigation. Red is the selected state, blue is rollover
9  To strengthen rollover state and bring consistency to navigation, the color bar has been added. The color is only on hover and doesn't conflict with gallery images
Contact Form
10  A typical form seemed too traditional for this site. There must be a way to use this image but not see text fields on top. This is yet to be figured out.
11  To soften the look, the text fields have rounded corners. My thanks go to "moz-border" and "webkit-border" CSS. (Still waiting for IE).
Asset Iterations
    division banners

    previous next empty thumbnail images

    address book background enabled/rollover submit sprite

14  & MORE
    division banner headline banner