Here is the link to my final website:
As a result of this assignment, I have learned that organisation is key. Whether it be correctly labelling all your divs or properly organising your files – this can seriously save you from a headache in the end. I also learned that it is very important to keep things simple because simplicity is usually the most usable and attractive. I decided to keep my design rather minimal with a black, white, and grey colour scheme, and to not “overload” it with content. I feel as though this decision was successful and I enjoy its minimalist character.
If I had another opportunity to complete this assignment, I would have started much earlier so I could cover the basics and then have a lot more time to create a more intriguing and interactive design. I felt as though I spent a lot of time learning the basics and wish I had more time to make it awesome. Now I know that creating a website requires a lot of time and energy, and is definitely not something that should be left until the last minute. If I had another opportunity, I would have also made sure to have my original content more organised and developed beforehand. I have learned how content is the most important part of the website.
What a learning process this was! I can say that I feel much more confident now in HTML and CSS. After spending so much time on this website, I actually began to enjoy the process and seeing it all come together. It is very rewarding to know I have made something and that it is now functioning and online.
Below are some screenshots of the finished website.
I tested my website out across Chrome, Safari, and Firefox. I found that the website was very similar across all these browsers.
One thing I noticed when I first opened it in Firefox was that the Nav bar links were blue, instead of white like I had originally made them. However, after I clicked on them and arrived at different webpages, this problem disappeared and the links were exactly like the other browsers had displayed them.
In general, the alignment remained consistent throughout the browser testing. Hovering and overlay effects continued to work and the links continued to direct me to the appropriate webpage.
Here’s just an example of the comparison between the colour of the links in different browsers. I noticed there appears to be a different colour of blue. This is Firefox and Chrome.
I have finally validated my website to the point of no errors. I realised that I had a few styling codes in html, so I had to change it to CSS. I also found a few stray closed divs that were not necessary so I deleted them. I learned how important it is to validate my website because there may have been errors I would have never found.
Here you will find the screenshots of my validation results including both HTML and CSS.
I can see the light at the end of the tunnel! I am almost finished making my first website ever. I have made a lot of progress since yesterday with adjusting layouts and adding media content.
One of the aspects I struggled with most was the index page. Originally, I had three images lined up together, similar to my original high fidelity mockup. I had originally planned for the centre image to link to a demo reel video, while the other two images link to different pages of the website:
However in the usability testing, I remembered that a fellow classmate suggested that this layout was a bit confusing because there are two major sections in the website, and the demo reel is only a single video… meaning it should be placed either in the video section or on its own. Finally, I made the decision to put the demo reel video below two images (the two sections). This way, users can be directed easily two either PHOTO or VIDEO and if they wish, they can scroll down to the demo reel which has been embedded with a Vimeo link.
Now the next step for the index page will be to add text/image overlays that will be activated upon hover. The hover will bring up the option to either be directed to either of the major sections (PHOTO and VIDEO). I am also thinking of including a title on the home page so that it is easier to understand what the website is about,
Since this assignment only requires 4 webpages, I had originally planned NOT do create a video page. However, I got carried away and started to enjoy the progress I’ve made so I decided to make one. My original mockup had a cover flow design which allowed the user to hover throughout the different videos. Although this may be possible, it was a bit too advanced for the stage I am at with HTML. I decided to create a list of rows with the videos and descriptions of my video work instead. This keeps the design simple and effective.
As mentioned, there are a few last things that need adjusting but the end is near :).
The following are comments I have posted on other classmates’ blogs:
Maximilian Blank’s blog:
Zoe Kyne’s blog:
Vedant Namboodiri’s blog:
Mica Encela’s blog:
Jess Wothorspoon’s blog:
My website is finally coming together! After many minor difficulties such as resizing images and centring icons, I have finalised both my header and footer that will be used in every page and I am happy with result.
I decided to design a simple and modern logo, “gp”, for my name (Gillian Pownall). I have included this logo at the top left of the nav bar as a link to the home/index page throughout all my webpages. I feel as though this keeps the usability and design of my website both simple and consistent.
Now that I have finished the basic elements of the website, I am now focusing on more challenging tasks such as hover overlays and photo gallery flow effects. I plan to create an interactive gallery within my “Photo” page that includes multiple photos. I would also like to create hover overlays on the index page that will link the user to other pages such as PHOTO and VIDEO.
I am happy to have a better understanding of HTML and CSS. I am almost done!
After a few tedious days of teaching myself more about HTML and CSS, I am finally making some progress with my website.
Navigation Bar, Header and Footer:
I am almost finished my navigation bar and my footer which contains the social media icons that are linked to the designated social media pages. However, I am experiencing minor difficulties such as centring the icons in the footer and also resizing images to replicate my high fidelity mockups. For instance, I would like a certain image to fit within the container and occupy the space – however since the photograph is landscape and the others are portrait, it is not matching up well. This is something I will have to play with through cropping the image externally, and playing with the width and height in CSS.