The visual Design of this portfolio could be arranged into a number of key parts. The overall aesthetics, the function of the navigation and the display of the content.
I started by creating a list of what will need to be on the site and from this initial list it became easy to work out the navigation. I discovered early on that you have the ability to 'target' something in HotGlue and then use it to anchor a link to a part of the page using HTML. I knew this would be useful, it was kept in mind to improve the navigation for the user, especially in a long page of information.
Below are my initial notes, flow diagrams and wire frame concepts for my portfolio.
To guide me in my decision I mocked-up a few of my ideas in HotGlue as 'live wire frames' so I could see them on the screen. Then I could ask for feedback and assess whether or not they would be functional.
Personally I liked Fig.5, I took inspiration from the Windows Tiles you see on the Start Menu on Windows 8.
But in the end I stayed true to my first layout as seen in Fig.1. Although I have the freedom of HotGlue to place anything anywhere, this common layout of side bar, header and main content makes it easier for the user to understand. I'm certainly not breaking the mould with this layout, but it's a good starting point I feel.
Above - Development of chosen layout, the Home Page.
The position of navigation is an important decision. As seen above the navigation was placed on the left hand side as a menu. I liked how this looked visually with the increased tracking and choice of Typeface gave it a modern feel.
But as reviewed
here, there are issues with the responsive dynamics of any HotGlue site. Logically the best way to reduce any issues would be to remove the left side bar menu and replace it with a navigation bar at the top of the page. This will shift all the content closer to the left of the screen and reduce any issues on smaller screens.
So I went to work on creating a navigation bar at the top of the screen using HTML and inline CSS to achieve this.
I used the < table > tag inside the < div > tag. But as I have learnt in another module: Web Platforms, this is not the best way to achieve a navigation bar as it relies mostly on HTML elements rather than CSS.
Here are some screen shots, building using Google Chrome's built in editor:
Design over Function?
This nav bar was a functional option, it responded with screen size as I used percentages instead of pixels. But I decided to revert back to the side bar due to aesthetic reasons. I am still not sure if this was the best thing to do. It's a decision I may have wrongly made.
Aesthetically, I understand the importance of keeping continuity throughout all pages on my site. It's professional and creates an overall feel for the brand.
But within my portfolio I will be slightly diverting from the recommended. The background colour, position of navigation and the typeface will remain consistent throughout. But for each section of my portfolio the design within the content area will reflect that topic. For example on the HotGlue page I've designed it to appear similarly to as if you are gluing pieces of paper together, they overlap, there is no alignment or symmetry intended. This reflects the value of HotGlue, place anything where you like, you aren't limited to a column layout.
This has also given me the opportunity to develop my design skills using Adobe Illustrator and Adobe Photoshop to create the desired design I would like.
I've decided to use a neutral background colour across my website. I am a fan of minimalism and not to overcomplicate a design. I chose this colour (#EFEBEB) in particular as it's subtle and will not clash with other parts of my website. Very rarely in my opinion is the use of many bright colours affective. Due to the lack of it, more colour could be an improvement I would make to my design, if I were to improve this site in future.
Take a look at my video demonstration below explaining how to link to a specific area on the page using HotGlue and no code. I used this method in the navigation for my site.
This video comes with an audio guide - please ensure your speakers are switched on!