Site Maps & Wire Frames

While at CUNY: Queens College, as class projects I looked at several websites and re-designed them to simpler versions of themselves. I have organized them below by site and outlined my process in working out the re-designs.

Arbor Day Foundation

AD_SITEMAP_BEFORE.jpg

Original site map of the Arbor Day Foundation.

My re-designed site map of the Arbor Day Foundation.

AD_SITEMAP_AFTER.jpg
AD_HP_2.png
AD_HP_3.png

The re-designed website for the Arbor Day Foundation was done in Dreamweaver. To keep the site design simple the site map re-design focused on keeping the navigation menu tree to no larger than a tertiary sub-division. 

A photo gallery of natural treescapes was used as a carousel to remind the site viewer of the importance of trees in our lives and our planet. Thereby, reducing the noise the current site at the time had with too many varying call to actions.

AD_HP_1.png

M.I.T. C.A.V.S. Site

MIT_CAVS Site Map_Page_2.jpg

Original site map of the M.I.T. C.A.V.S. site. The site layout was extremely cluttered and needed to be simplified and organized.

I re-designed the complete site map and grouped sections together that covered the same topics and deleted those that were repetitive.

MIT_CAVS Site Map_Page_1.jpg
MIT_CAVS_WF_Page_5.jpg
MIT_CAVS_WF_Page_2.jpg
MIT_CAVS_WF_Page_6.jpg
MIT_CAVS_WF_Page_4.jpg

Wire frame designs for the site where I chose the color scheme and the grid layout for the site. The geometric shapes were used to add a sense of contrast as well as to highlight the fact subconsciously that the C.A.V.S. deals with the technology aspect of the creative arts at M.I.T.

Site mock ups follow below for M.I.T.'s C.A.V.S. site. The site layout was designed to keep everything central on the screen so as to avoid the site visitor's attention drifting and the need to scroll to read/ digest more information. The navigation bar color was changed from the original for when the user hovered over a menu selection so as to create a more vivid contrast between the current navigation bar and the selection the user was planning to make. The site's title typeface was changed as per group discussions so that it would be more legible at first glance.

MIT_CAV_FINAL_Page_5.jpg
MIT_CAV_FINAL_Page_1.jpg
MIT_CAV_FINAL_Page_3.jpg
MIT_CAV_FINAL_Page_4.jpg
MIT_CAV_FINAL_Page_2.jpg
MIT_CAV_FINAL_Page_6.jpg
MIT_CAV_FINAL_Page_7.jpg

ERIN WEIS Site

Site mock ups and color & typeface choices for Erin Weis's personal website for her art studio. The color palette was based off of her bright and cheery personality

Site Layout_Page_1.jpg
Site Layout_Page_4.jpg
Site Layout_Page_2.jpg
Site Layout_Page_3.jpg
Site Layout_Page_7.jpg
Site Layout_Page_8.jpg
Site Layout_Page_6.jpg
Site Layout_Page_5.jpg

WOW HUH Site

Site mock ups for our CUNY: Queens College magazine. It was a class project for our web design class.

WOWHUH_WF_FINAL2.jpg
WOWHUH_WF_FINAL.jpg
WOWHUH_WF_FINAL3.jpg
WOWHUH_WF_FINAL4.jpg

Wisconsin Register of Deeds Association

Site maps of Wisconsin Register of Deeds Association followed by wire frames of some of the pages for the site, which are then followed my site mock ups.

WRoDA Site Map_Page_1.jpg

Original site map of the Wisconsin Register of Deeds Association.

I re-designed the complete site map and grouped sections together that covered the same topics and deleted those that were repetitive.

WRoDA Site Map_Page_2.jpg

Wire frames for the website: Wisconsin Register of Deeds Association.

WRoDA_WF_Page_1.jpg
WRoDA_WF_Page_2.jpg
WRoDA_WF_Page_5.jpg
WRoDA_WF_Page_4.jpg
WRoDA_WF_Page_6.jpg
WRoDA_WF_Page_7.jpg

Site mock ups for the website: Wisconsin Register of Deeds Association.

WRoDA_Final_Page_1.jpg
WRoDA_Final_Page_3.jpg
WRoDA_Final_Page_5.jpg
WRoDA_Final_Page_2.jpg
WRoDA_Final_Page_6.jpg
WRoDA_Final_Page_7.jpg
WRoDA_Final_Page_4.jpg

Neuticles

Site map of Neuticles followed by wire frames of some of the pages for the site, which are then followed my site mock ups.

Neuticles Site Map.jpg

Wire frames for the website: Neuticles

Neuticles Wire Frame_Page_1.jpg
Neuticles Wire Frame_Page_2.jpg
Neuticles Wire Frame_Page_4.jpg
Neuticles Wire Frame_Page_5.jpg
Neuticles Wire Frame_Page_3.jpg
Neuticles Wire Frame_Page_6.jpg

Site mock ups for the website: Neuticles

Neuticles Mock Up_Revised_Page_1.jpg
Neuticles Mock Up_Revised_Page_2.jpg
Neuticles Mock Up_Revised_Page_4.jpg
Neuticles Mock Up_Revised_Page_5.jpg
Neuticles Mock Up_Revised_Page_3.jpg
Neuticles Mock Up_Revised_Page_6.jpg