Website Draft Images

Before I began creating my website, I first drew up some rough sketches of how I wanted the website to look. These were done simply using photoshop. I planned to have an entry page with a rollover .gif, a home page, a photo page, a video page and a contact page. Links to my social media accounts such as twitter, facebook, vimeo and my blog would be displayed along the bottom of each page. After creating an initial draft of this site, I recieved feedback from my tutor and peers, that mentioned the enter page being unecessary and so I have refined my idea for my final site. Here are the images that I have created in photoshop, to represent the pages of the website:

As you can see, the first image is the home page, which will simply contain a ‘splash image’ so that the viewer can get a feel for my photography work. From here, the viewer can navigate to the photo/video pages, which are portrayed in the second image. I plan to set out the content as thumbnails, with a short description of what the projects are about shown alongside them. When the thumbnail is clicked, the site will link the viewer to a gallery displaying all of the images within that project. This will be the same layout for the video pages, but the link will show a page with a embedded video from Vimeo instead of a gallery.

I plan to include a link to the blog on the main website navigation bar, alongside the photo and video pages. Following this I plan to create a contact page, that will show a live feed from my twitter account, and a contact form so that visitors to the site can contact me with any questions they might have.

After completing my Work, Rest and Play projects, I have decided to locate them on the index page, so that the viewer can see them instantly. After this module, the index page will be a good place to exhibit my most recent works as it’s the first thing that the viewer sees when visiting the site. Instead of having the twitter feed on my website, I have created a link to my twitter on each page of the site. This is because I believe a constant twitter feed would be distracting from the work on the site, and would look unprofessional as it wouldn’t fit in with the design of the website.

On the pages that require image displays, I have used a piece of web based software called Lightbox2 which allows for pop-up galleries that look professional and attractive. Here is the screenshot of the code that’s required to create this gallery, along with the final result:

I believe my final website isn’t too far from my original ideas, but as I have worked on it I have managed to improve it and create something that’s both visually appealing and functional to the viewer. Here are the screenshots of the pages from my site:

For each of the image thumbnails on the photo and video pages, aswell as the large WORK, REST, PLAY thumbnails on the home page, I have included interactive rollover .gifs, so that the page is interactive and entertaining for the viewer. While this took a lot longer than I had anticipated, and meant I had less time to concentrate on the other aspects of the module, I believe it’s worth it as I now have a website that I am extremely proud of.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s