Portfolio Design

This figure shows all the information that will be included within each projects of this web portfolio. Each project will have its own separate page with the information listed on the mind map. The links to the projects will be set in the navigation bar as a header and will be consistent throughout the website for easy accessibility.

The mind map has been created to gather the basic information and ideas for this web portfolio such the audience/ content/ projects/ website and consideration. Each of these points have been expanded to get further ideas.

___________________________________________

1- mind map: portfolio project

2- mind map: ideas for each page

planning

homepage

1- the logo will be placed in centre as shown on the figure. the colour scheme of logo will be black and white.

2- there will be links to my social networks including Twitter, Tumblr and Facebook. each of the social networks includes its logo to make it stand out. the colour scheme of each of these icons will also be black and white.

3- this is the main navigation bar which will include the links to home, about me and reference page. the font style will be similar to "Georgia" and will be the size of 14 with grey colour and no background colour.

4- this navigation bar will include links to the projects: Hot glue, portfolio design, personal branding, implementation, mobile development 1 & 2. these links will be inside a grey border; the links font style will be "georgia" in white and size 12.

1

2

template

3

1

2

3

4

5

structure diagram

wireframes

designs for the "projects"

The structure for this web portfolio has been created in order to show how each pages will be linked. The home page will lead the users to access through all the links and will also be able to visit any other pages they wish to as it will be consistent throughout the whole website and will be displayed as a header. In additional the links to the social networks will lead the users into its own main website.

5- The footer will content the copyright symbol and back to top link which will lead the users back to the very start of the page.

1- This is the header section which will be consistent throughout the whole website as shown on figure 4 (template wireframe).

2- Main design for the homepage which will include link to each project with small screenshot. The details of this design has been explained on the figure 6.

3- The footer will contain the copyright symbol.

Figure 1- Mind map for the portfolio project

Figure 2- Mind map to get ideas for each page

Figure 3- Structure diagram for the web portfolio

Figure 4- Template wireframe for the web portfolio

Figure 5- Wireframe for the homepage

Figure 6- Design for the homepage

This is a design for the projects section which is placed on the homepage of this web portfolio. The design was created by using the text box from the tools followed by copying and pasting the boxes so that they were equal sizes with same typeface. The most challenging part was making sure all the boxes were right size and placed with equal space which was done by using "show grid" tool. After the boxes were placed as planned on figure 5 I added different colours for each boxes to add colour into the portfolio and also to make it stand out. The colours for this design was inspired from the 3G mobile application which is on reference page.

Portfolio design has been implemented to document all the ideas/ planning and the process of building the website by using mind maps, wireframes, structures, layout and images. Each of the figures also include a brief description about why it has been created and how it will help design the web portfolio. The mind maps (figure 1 and 2) has been created to get ideas for what to include in each pages which leads to structure diagram (figure 3) as this shows who each pages will be linked. Wireframes (figure 4 and 5) were used as hand drawn plan to plan the layout structure for template and the main homepage. In additional, an screenshot of the "project" design (figure 6) has been implemented to explain the process of how it was created using the hot glue tools.

In the past I have created many websites during my GCSE and A-levels for a client where I had to document from planning to creating an technical guide which included a lot of different documents such as writing report about the good/bad examples of website and using these knowledge to plan the website, implementing, testing (gathering feedbacks), improvements made and writing an technical guide. Therefore completing this section was very familiar to me as I was able to use my knowledge from previous works I have completed. However, I have never built an personal web portfolio which includes mainly personal branding and also the fact that I had to use hot glue to build it; I found it quite challenging as hot glue has limited restrictions.