UX Design iterations for Lmahoney.com
- Learn to create a website using HTML and CSS, photo gallery, forms...
- Create different galleries for artwork portfolio, photos
- Provide access for ux resume and portfolio
- Accessible design, font, color, alt text...
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 by the header.
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.
Current Appearance Specs
1024 x 660 px
960 grid system
5, 185 px columns
5 px gutters
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
Created a logo that would work for diverse projects..
fine art signature
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.
This "L" is my signature initial. Shape held within the "L" is a logo created years ago,
for collaborative pieces created by my mother & me for our family and close friends.
7. This sprite is the latest iteration.
A lesson in accordion menus
8. Color indicating state of navigation. Red is the selected state,
blue is rollover
9. To strengthen hover state and bring consistency to navigation,
the color bar has been repeated. Because the is only on hover, it doesn't conflict with gallery images
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).
empty thumbnail images
15. & MORE