Web Design
Wanamaker
Entertainment Group→

Cranksgiving→

empty
  • Web Design for Wanamaker Entertainment Group.
  • Web Design for Cranksgiving Philadelphia.
  • Blank
    Wanamaker Entertainment Group

    Wanamaker Entertainment Group
    Website Layout Redesign Project
    Link: www.WanaTix.com

    Objective
    Old Site Layout
    The old site layout had become cluttered and awkard to navigate, so a redesign was in order.


    Process
    The Redesign Process
    After consulting with staff and surveying customers, a requirements list was created. Requirements gathered, then began the process of developing and revising possible layouts with the goal of simplifying the design to make for a more efficient user experience, as well as to better incorporate more up to date branding. After much sketching and wireframing and revising, a finalized design was formed, tested, then put into production.

    Technique
    • Layout Developed in Photoshop
    • Consolidated the the navigation into 3 categories
    • jQuery dropdown navigation
    • jQuery/XML-based image slider to highlight specific products
    • Geotargeted event listing in 3 categories
    • Rearranged site content for simpler layout, moved less-frequently used content to footer
    • Layout based on 960 Grid System

    Blank
    Full Layout of the new WanaTix.com design

    Full Layout Preview
    Note the relocated content to the footer, cleaner design for the central slideshow, and consolidated navigation menu.

    Social Media Links

    Social Media
    Moved the social media icons, as well as added the previously non-displayed icons into a less conspicuous location.

    Redesigned Navigation Layout

    Redesigned Navigation
    Reorganized the navigation into categories now found in three dropdown menus that animate with jQuery.

    Blank
    Featured Product Slider

    Featured Product Slider
    XML-populated, jQuery-powered slideshow displays a series of slides showcasing featured products.

    GeoIP Product Highlighting

    GeoIP Product Highlighting
    Displays a table of events in 3 categories listed based on GeoIP data.

    Footer to Clean Up Clutter

    Page Footer
    As yet another measure to clean up clutter, the footer was redesigned as a catch-all for the rest of the content.

  • Blank
    Cranksgiving Philadelphia

    Cranksgiving Philadelphia
    Site Design & Development
    Link: www.CranksgivingPhilly.com

    Objective
    Site Layout
    In order to help promote the event Cranksgiving Philadelphia, we needed to create a website to highlight not only information on the upcoming event, but details on last year's event.


    Process
    I first gathered the details of what wanted to be presented on the site. After coming up with an outline of the content, I then sketched a few potential layout ideas, followed by mockups in PhotoShop. After desigining all of the graphical elements, it was then time to move into DreamWeaver to code the actual layout. After developing and testing, the site was finished and ready for public release.

    Technique
    • Layout Developed in Photoshop
    • Single-page layout for simplicity
    • jQuery sliding navigation
    • jQuery image slider to highlight specific content
    • Social Media inclusion
    • PHP & XML based photo gallery

    Blank
    One Page Scrolling Layout

    Scrolling Navigation
    In order to keep the layout simple, I went with a one-page, scrolling layout. After selection a section in the top navigation, the link is clicked and the whole page is scrolled to the section.

    Blank
    Photo Gallery

    Photo Gallery
    In order to maintain ease of use, I used PHP to develop a photo gallery that, in order to keep updated, requires that photos simply be uploadd to a directory on the web server. Upon page load, a PHP script does two things, 1) reads the contents of the photo directory and 2) generates a thumbnail of any photo in the directory that does not already have a thumbnail. Upon reading the directory contents, it generates an XML file which is then used to populate a table with the source image and associated thumbnail.

    Photo Lightbox

    Photo Lightbox
    As an attractive way to display photos, a lightbox is brought up to display photos after their associated thumbnail is clicked. Lightbox includes navigation controls.