1 / 15

Interactive Interface Design

Interactive Interface Design. Brief . JLS Photography Brief JLS photography is looking for a complete overhaul of its website. The current design is not of a professional standard and lacking in most areas

frayne
Download Presentation

Interactive Interface Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Interactive Interface Design

  2. Brief JLS Photography Brief • JLS photography is looking for a complete overhaul of its website. • The current design is not of a professional standard and lacking in most areas • The new design will show a clear Information architecture and interactive environment with clear navigational elements that are not ambiguous. • The use of technologies is at your discretion (JavaScript, j query etc.)

  3. Research

  4. From the previous site it became apparent that the colour schemes where deliberately devoid of colour, this is so the photos on the site keep maximum impact in terms of contrast. The navigation varied from site to site but most let the user know what page they were on through the use of visual cues

  5. Wireframes My Initial idea for the site design using a 3 coulomb layout with header, logo area and navigation bar

  6. My next thoughts on the layout of the site with some ideas of content layout. Changed this design to a two column layout

  7. Logo My initial idea was to create a logo incorporating the clients initials into the design as seen in the top image but on presentation to the client he had trouble decoding the graphic and decided he wanted just letters and no graphic so went back to the drawing board and designed the bottom image.

  8. Wireframe 2

  9. Took the three wireframes back to the client who liked the concept. It was then decided that due to the amount of content that the site should be a single web page. I then decided that I could mimic a 5 page site using JavaScript and Jquery with a Gallery, Hints and tips (hidden content) and a guests Gallery as well. The client liked the black version best so that’s what I ran with.

  10. Wireframe Gallery

  11. Lightbox The light box took a bit of work in Firefox, working out what CSS was for what. The icons for the next screen, previous screen, loading and close went missing after I copied the code into my site after a bit of thought I went into the script and fond that all was needed was a change to the file path so they could be called from the JavaScript. I re-used the code for the guests page and same layout.

  12. Wireframe Hints and Tips

  13. Spry Widget The grey tabs were created using Dreamweaver's spry widgets. On click they drop down revealing the content contained within them, the content was hard to style because every time I tried to put the images in a div the whole thing fell apart so I ended up just calling the image with ‘img’ ‘ src’ selectors but on the turn of the coin I was able to use a div tag for the text box!!. The script for the widgets has (to my knowledge) go at the bottom of the widget section or it fails

  14. Comparing the old with the new After the site was completed I looked at the old and the new to see what the differences were. The main factor was the alignment of elements, contrast was better due to the background being one colour and not a gradient, tabs are smaller so not shouting at he user and looks a lot more professionally done.

  15. Finished Product

More Related