Web Design – Portfolio Website

After receiving feedback from the first website, I decided to go back to the drawing board for a total redesign. The main aim was to focus on a one page website where the colour theme is continuous throughout and the layout of the gallery is structured and responsive.

Having completed a vast amount of research, single page website proved to have greater advantages than those with multi pages. Here is an example of my research of one page websites : http://www.dtelepathy.com/blog/design/8-reasons-why-pageless-design-is-the-future-of-the-web

The main beneficial advantages from a designers perspective of having a one page website is that one page websites uses story to compel visitors to action, it is seamless intuitive and easy to digest and update which simplifies amendments and changes.

Here is an example of a one page website which heavily influenced my own design creation in terms of structure: http://tobialatino.com/.

This is the home page for my website it includes a main image - on a slider as well as a my name (title) positioned central over the image slider.
This is the home page for my website it includes a main image – on a slider as well as a my name (title) positioned central over the image slider. In addition I have also included my logo design to the right hand corner of the image. The image slider I used includes arrows left and right of the image as well as circular buttons to the bottom centre of each image, these icons/buttons allow users to go back and fourth through my home page slider the slider is also transitioned so that it will flick from one image to the next over a certain period of time. In doing this gives great benefits to visitors to my site allowing them to choose which Image they would like to view on my home page slider (Interactivity).
This is a preview of image 2 on my home page slider.
This is a preview of image 2 on my home page slider.
At the top right as you can see there is a navigation bar when clicking on each link on the navigation it redirects you to the spot where 'contact', 'porfolio', 'about me' and so on are located on the page.
At the top right as you can see there is a navigation bar, when clicking on each link on the navigation bar it scrolls up or down to the point where ‘Contact’, ‘Portfolio’, ‘About Me’ and so on are located on the web page. In my Portfolio section I have incorporating sections where different pieces of work are located such as ‘design’ and ‘photography’ . When scrolling over a image it highlights in this green colour as shown above.
When clicking onto a image it comes up on the same page but in a different box. The box includes a caption as well as arrows forwards and backwards allowing users to scroll through my pieces of work.
When clicking onto a image it comes up on the same page but in a different box. The box includes a caption as well as arrows forwards and backwards allowing users to scroll through my pieces of work.  The preview window gives a great view of each piece of work sizing accordingly to each image.
This is the About Me section I have included an image of me as well as a key paragraph of me and my interests. One thing I could look to include in the future is a downloadable CV allowing potential employers the chance to download my CV before contacting me.
This is the About Me section I have included an image of me as well as a key paragraph of me and my interests. One thing I could look to include in the future is a downloadable CV allowing potential employers the chance to download my CV before contacting me.
This is the contact section on my page I have included an email form as well as a couple contact details. If the boxes are not filled out correctly an error occurs when submitting, this is good incase a user mistakenly does not fill out one particular area.
This is the contact section on my page I have included an email form as well as a couple contact details. If the boxes are not filled out correctly an error occurs when submitting, this is good incase a user mistakenly does not fill out one particular area.
I have also included at the end of the page social networking icons which link to my twitter, linkedin and my blog. In addition there is also an arrow located to the right hand bottom corner which navigates a users back to the top of the page.
I have also included at the end of the page social networking icons which link to my twitter, linkedin and my blog. In addition there is also an arrow located to the right hand bottom corner which navigates a users back to the top of the page.

I am delighted with the overall outcome of my web design. Possible future improvements of the web design could include a twitter feed which displays my latest status on the web page as well as including a downloadable CV link in the ‘about me’ page.

My website is designed for all viewers however with an emphasise towards potential employers.

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