Home
Portfolio Process
To make this portfolio I used -
HotGlue allows you to easily create a website without needing to have any knowledge of code and you can edit right in the browser. Although it has many flaws, I like the fact that HotGlue provides you with a 'blank canvas' giving the user a great deal of freedom when creating a website. You can set up a free account and then easily start adding text, images, and videos.
Before starting my portfolio, I created a practice website to become familiar with the functions that HotGlue provides. Using the tools buttons below, I added random text, images, and videos to see how it all works. The small function bar can be accessed by clicking anywhere on the page and allows you to add text and upload files. The bigger function bar can be accessed by double clicking and allows you to change the style of text amongst many other features like going back to see a list of all your pages.
Additionally, as a class we tested HotGlue on different platforms to see if it is responsive. We came across a few problems mainly involving videos because sometimes they wouldn't play or took a long time to play, and on the iPhone the YouTube app wanted to open rather than playing the video on the HotGlue website. On the Toshiba Ultra, the Vimeo video didn't even appear and there was just an outline of where it should have been. Therefore, once I have created my portfolio I will need to test it on smartphones to ensure that text and video can be viewed and I may need to add notes to say that if the videos aren't working then use a desktop computer rather than a smartphone.
When I started the development process I began by sketching out wireframes so that I had an idea of how I wanted it to be structured. The first sketch was my initial design idea but when I actually started implementing this structure I didn't like having a vertical navigation bar so I did another sketch with a horizontal navigation bar and preferred this design instead. I wanted each of the pages to have a consistent navigation and header to make it user friendly and I chose to use mainly grey, silver, and white to provide a professional appearance. The flow diagram illustrates the layout of the website and how I want the pages to be connected. There will be a 'home' page linked to the 'about' page and the 'projects' page. The 'projects' page will then contain links to all the projects that I have completed.
To start creating my portfolio, I first made all the possible pages that I needed and created the header, footer, and navigation bar through making coloured text boxes. I then found a suitable background image -
I put a large white text box in the middle of the pages that required content but left space on the home page to add media later on. I then started putting content onto the pages by creating textboxes and overlaying them on top of the white textboxes. By using the gridlines they have it made it easy to align elements and I have tried to ensure that the website is partly responsive by putting all the content to the left-hand side so that people with smaller laptop screens will be able to see everything.
However, during the implementation stage I came across a few problems with HotGlue. Firstly, it is very frustrating that HotGlue doesn't have an 'undo' button so if you do something wrong then you have to do it all again, although you can view previous versions of the page. Therefore, I decided to write most of the content in a Microsoft Word document first so that I could easily recover information. Additionally, we were given instructions on how to embed Processing sketches but this didn't work because HotGlue didn't recognise the website that was given in the script code. I overcame this problem by making videos of the Processing sketches using recording software, uploading them to YouTube, and then embedding them into HotGlue by using iframes,
e.g. iframe width="600" height="350" src="https://www.youtube.com/embed/U-Jht8-GPBc" frameborder="0" allowfullscreen>
The videos weren't always easy to move around but I have managed to place them where I want them to go. I also used code to implement external links, for example, a href="https://hotglue.me/">https://hotglue.me/
At the bottom of the pages with lots of content, I have put 'Back to the top' links to reduce the amount of scrolling that the user has to do. I did this by linking the text to the relevant webpage.
The 'Home' page has been re-designed a couple of times and I started with having images of some of the work I have produced but then I didn't like this appearance and the user wouldn't know what each image is representing yet. Therefore, I decided to go with the design I have now to use the 'Home' page as a way of introducing myself. Furthermore, I also couldn't decide on the layout of the 'Projects' page. I started with just having a list of the projects linking to the relevant pages but this was boring so I used transparent circle shapes to make it look more interesting and to go with my background. In reflection, I think that I could have carried out some more development work before starting on the actual website to think about the design of each individual page.
Overall, I have found that despite HotGlue having many problems, it is really easy to add text and images to the pages and you can create something that looks good without having to use a large amount of code. I like being able to move all the elements around to place them exactly where you want them to go. If I was going to use HotGlue again then I think that I would go with a design that is left-aligned rather than centralised to make it more suitable for people with different sized screens but I'm happy with my final portfolio.
Introduction to HotGlue
Portfolio Design
Portfolio Implementation
HotGlue Homepage
HotGlue functions
Portfolio design sketches
Functional Diagram
Kelly Copas
Web Design Studio Portfolio
Projects
About
Back to the top
Conclusions
