Website Initial Development

I began the development process by making a plan of whose is the website? (mine) what do I want in it? In this case its a website that I am creating as a personal portfolio. I want to include an about me page to give a little description of myself, possibly add a skills section demonstrating my strengths, a portfolio page being the most important thing displaying my work and a contact page allowing the viewer to get in touch with me; being the desired outcome outcome of having an online portfolio. The other two questions were,.. who is the website for? (the client) and what would they want to see in it? A potential client would be looking for the work of the designer first of all, the work has to be easily accessible and displayed in an appropriate way. Some ‘personality’ of the designer being communicated can be important, this can be demonstrated by the about page and skills section, I think this is important as it gives a little insight as to how the designer works and also puts a face to the website and perhaps makes you more approachable. A contacts page is essential as you want the potential costumer to get in contact if they would like some work done. It has to be accessible by allowing multiple ways of contact as well as social media connections where they can further view information and work about you to build up trust.

When beginning the design sketches they where all based on websites that I liked and a lot of the good website portfolio follow similar designs such as the grid display of the work or image banners.

DSC_0173I began the development process by sketching out a few website ideas.

Website 1 is a one page scroll down website, I wanted to try out a one page design. It consist of having a large banner image displaying latest projects with a header within. A logo and some navigation buttons on the top corners. When scrolling down a small ‘about me’ blurb accompanied by an image of myself with some icons representing my skills. Scrolling further down you find the portfolio section set up in a 3 by 3 column grid, when selecting one of these images a larger image would open below the grid with a description of the project below. Scrolling further down a contact page with different social media icons for communication. On the footer of the page a hamburger navigation button would be found.

For ‘website 2’ the concept is similar except this wouldn’t be a scroll down navigation it would be a series of pages or horizontal navigation. Using the same banner to display work at the top with navigation buttons centered on the header of the page. When selecting a specific portfolio piece, you would get redirected to its page, displaying a large image at the top of the page with a project description sitting just beneath it, just under that would be other work pieces related to the project below it as the viewer can scroll down and view them.

For the ‘website 3’ I wanted to try having a navigation bar on the left side of the page running down the entire left side of all the pages. A smaller header and/or logo placed at the top of the navigation bar. The home page would use the common grid format displaying my work as I have seen on many websites. When selecting a specific page the navigation bar would leave the selected page highlighted to act as a header at the same time. Each specific work page would use the similar large image at the top and below sitting the description of the work aligned to the left with the other related work images running down the right side. It would include a footer with navigation buttons to further facilitate the navigation through out.

‘Website 4’ I wanted to try something a little different, I would have the main section of the website sit in a frame within the page. I can utilize the outside of this frame on the header and footer to add navigation buttons and possibly a logo and header. The rest of the website would follow similar design to the previous ones utilizing a large header image with heading with in and a grid style work gallery except possibly trying different shapes for the gallery not just squares or rectangles. Having the website framed off like this is something I saw in a few websites, I like how the page looks more organized in a way and if done correctly it looks more sophisticated than a plain grid gallery spreading across the entire page. This extra space around the frame allows for navigation buttons to be placed and kept from getting in the way of the rest of the website. I would also include some on the footer of the page as well as contact icons.

I havent decided what design I am going to go with but I will try out at least two of these designs and see how they develop, but at this moment im thinking I would most likely go with design 3 or 4.



Leave a Reply

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

You are commenting using your 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