• Portfolio

  • What is HotGlue?
  • Portfolio design & implementation
  • Processing
  • Mobile Application
  • Reading Materials

Designing a Webpage

In the first Web Design studio session I was introduced with the Hotglue platform to experiment how different tools work.

This screenshot represents my first attempt in making a web page. I used drag and drop method and linked a video from the Youtube channel.

In the second session we discussed pros and cons of using Hotglue. The websites were tested on different devices including iPad, iPhone, Windows phone, etc.

It was found that many students had issues in using their phones or tablets. Some of the common issues were;

*Videos were not loading.

* Broken pictures.

*Website took a long time to load on the mobile device.

This was my original layout for the portfolio made in Hotglue.

During my second week I decided to imrove my website by changing a background and a layout.

I drew some wireframes to structure the content in the webpage.

HTML5 UP website helped me improve my design, buy considering simplicity and user-friendly approach in building my own web page.

I decided to put the drop down menu to enable users navigate easier whilst reading a content.

Class presentation

In one of the lectures we were shown a presentation of how to make a user- friendly webpage considering text and colours.

There are many web pages such as Adobe Colour Kuller,colour scheme designer, etc where it is possible to create different colour schemes considering colour rules and types.

Drop down menu

For the drop down menu I used and un-ordered list element to organise the drop down items as list elements. Which on page load are set to “display:none” in CSS then on hover are set to “display: block” to allow the user to select a particular item.

[Main concepts to consider in designing a website]

Implementing a Website

[Website for working with colour pallettes]

[RGB colour scheme]

[http://html5up.net/]

[Drawing wireframes for the main layout and navigation]

There were some issues at first using the drop down menu. At first the portfolio section was placed just after Home section; however in some pages the dropdown menu was overlapping with other elements
or some sections were dissapearing. I then decided to place my dropdown menu to be as the last element