Project Management: Nav Bars

Last week we learned more about Navigation Bars. Specifically, I learned how to stylise a navigation bar with the help of the following link:

This link was a helpful tool to stylise buttons to be active or not, as well as to simply change the colour and also to structure vertically or horizontally.

I am happy we took the time to go through this because as I start building my website, the navigation bar will be the first thing that I create. This way, I can reuse it within all my webpages.

The following was also a helpful link for drop down menus:


For my webpage, I will be creating a horizontal navigation bar which will include the title of my portfolio webpage, “Gillian Pownall” along with the following buttons:

  • About
  • Contact
  • Photo
  • Video




Project Management: User Testing

Today we focused on user testing and trunk testing. We were given questions about our own website that we answered very quickly. It made me start to think of the usability of my website from a user point of view.

Then we had another classmate navigate through our website while we observed how they use it. This was very helpful exercise as I realized that my original design may not have been as effective as I thought. There were certain navigation buttons that I thought were very simple, however my classmate was a bit confused because there were some dropdown options that were mixed with one-click options. This is something I had not thought of before – perhaps because I focused more on the design than the usability.

This exercise made me realize that I need to work more on my design to ensure that its usability is appropriate for all users. I learned that my subjective opinions of my website need to be altered to a more objective and universal scale.


Links to Prototypes:


Low Fidelity




High Fidelity





This assignment taught me how valuable it is to create a website that is engaging and interactive. The most important thing I learned was to keep it SIMPLE and CONSISTENT.

I also learned about the importance of UI and UX, and how they combine to make a website that is both visually appealing and easily interactive.

I also learned that the CONTENT is the most important aspect of a webpage! If you don’t have content – you don’t have a website. I learned how valuable it is to keep your content organized.

I definitely encountered technical obstacles in the making of this assignment. Firstly, I didn’t have much Photoshop experience so using Photoshop was a big challenge for me. I ran into many tiny problems where I didn’t know how to complete tasks such as changing an object’s properties. I overcame this by searching and looking through various Photoshop tutorials.

Another technical obstacle that I faced was when my hard drive crashed and my laptop could no longer detect it. I thought that my project had come to an end but then I realized I had uploaded all my work on Balsamiq and InVision. I overcame this issue by re-downloading all my files from these websites.

If I had another opportunity to complete this assignment, I would start my prototyping way earlier and I would build my low fidelity prototypes before I worked on any of the design. For this assignment, I started my design in Photoshop before I had my prototype figured out. It didn’t take long before I got completely stuck and hung up on the look of my website rather than the actual use of it.

I would have also dedicated time beforehand to organize all of my content and download or save all the necessary media before I used it in the prototyping and design. For this assignment, I found myself downloading my work as I go – which became a setback. If I had all the material put aside and ready to use then things would have went much faster and I would have been a bit more organized.

Overall, I felt that this assignment was a very valuable experience. I realized that I actually like producing a website – I found myself spending a lot of extra time and effort into trying new things such as learning how to create a drop down menu. In the end, I found it extremely enjoyable and rewarding to create my own website.


User Interface (UI) design is nothing without a User Experience design (UX). Both, combined, are essential to a successful website.
User Interface design is the “look and feel” of a website. It leans more toward graphic design and focuses on the presentation of a brand or product, rather than the usability. UI turns the website content into a visually attractive experience of the content.

User Experience design is a process to enhance the users experience by ensuring that the usability is easy and enjoyable. It involves a consumer-product relationship where the consumer’s interactivity is the main focus.

After learning about UI and UX and their importance, I researched various portfolio websites for ideas and direction. Below are some examples of websites that inspired me, as well as others I found didn’t quite work.


This page is a perfect example of a portfolio website that is simple, consistent, and easy to navigate through.

Similar to this website, I hope to use little left and right arrows to guide through the images and videos.

One of the things I liked most about this website was the “Contact” page. The contact page will be an important aspect of my website so that possible clients can reach me in a simple way. I found it useful that she included fill-out boxes for users to type their information, as well as how she put up a little Instagram box that toggles through the pictures and directly links to her Instagram page. This influenced my own Contact page, since Instagram is one of the main sources where I post my content.

This page also inspired me because there is a large video that plays on the home page. My original idea was to include my demo reel in my website, and this furthermore made me realize it would be beneficial to include it on the homepage.


I found this website to be a captivating and modern approach to a portfolio. The design is unique, clean, and innovative. However, I noticed that there is a significant amount of wasted space and that the content is spread out far too much – making it difficult to navigate through.

I also noticed that there are no other pages besides the homepage. The homepage is designed to be swiped up and down, revealing all of their content. I do not think that this was a successful decision because it makes it harder to look through their work.

Their “Work”, “Culture”, and “Reach” buttons are directed to the side and unfortunately they become unnoticeable when swiping down and through some of their images.

This site made me realize that a successful webpage is much more than just “looking good” – It is about organized content and user-friendly experience. It’s a perfect example of how the UI design overwrote the UX design.


The Difference Between UX and UI Design – A Layman’s Guide



The main purpose of my website is to showcase my photography and videography work that I have created over the years. It is an official portfolio that presents my work and myself in a professional, creative manner – not only for exhibition, but for possible collaboration and networking as well.

This website is a great opportunity for me to finally organize and display the past projects that I have put a lot of effort into. My work was originally spread out across different media platforms or even in different bins on my computer. Now – all of my creative work will be a one-stop experience that is easy to navigate through.

It is important for me, as an artist, to have a portfolio so that my work gets noticed and future clients can connect with me.

This website will also contribute to the ever-growing art scene revolving around media. These days, working with photo and video image is extremely beneficial for anyone looking to create content or build businesses.

My online portfolio is a great opportunity for me to build my own professional brand and give people a sense of who I am and what I can accomplish.


My intended audience is creative professionals of all ages who are hoping to collaborate on media-related projects or to simply enjoy and browse through visual artistic work.

My audience will include people such as models who are looking to collaborate on photo shoots and expand their own modelling experience. It will also reach out to other artists such as photographers and videographers who would like to collaborate on projects such as short films. Furthermore, I intend to reach out to various businesses that would like to promote their services and produce new content.

Besides networking, my website will also reach out to a large platform of users who enjoy looking through photography and videos.

This vast audience reflects the mass amount of users who are looking to reach out to creative artists like myself, and also to users who surf the web daily for creative content.


My approach for this website is to deliver content in a SIMPLE and CONSISTENT manner. I have learned that these two things are what makes for an extraordinary and effective website. I will create pages that are very user friendly all while maintaining a consistent and engaging design.

The most important aspect of the website is the CONTENT. Therefore, I will assemble all my content to ensure that my website has enough substance to stand on its own.


The content featured in my website will be a collection of my artistic work, a mini autobiography, and links and useful tools to my other social media platform.

The website will feature two major sections: PHOTO and VIDEO. My photography section will include more pages such as “Portrait Photography”, “Event Photography”, and “Promotional Photography”. Similarly, my Videography section will include other pages such as “Short Films”, “Commercial Videography”, and “Event Videography”. Because I have a wide variety of work, it must be dedicated to certain sections that are easy to navigate through.

Along with these two major sections, will be an “About” page and a “Contact” page. In my About page, will be a little blurb on who I am, what I do, and why I do it. I included important aspects about myself such as “I will never stop learning” and “I am an explorer…”. This helps to personalize myself to users and connect my face to my work.

The Contact page is a crucial page for future networking. Fill-out boxes will be presented so that users can fill out information such as Name, Phone Number, E-mail, and Message. This page is a simple way for users to connect directly with me.