Final Prototypes & Reflection

Invision Prototypes

Low Fidelity Desktop Prototype

Low Fidelity Mobile Prototype

High Fidelity Desktop Prototype

High Fidelity Mobile Prototype


What did I learn as a result of this assignment/project?

I have learnt a lot over the course of this assignment, much to do with the design and development of a website. The assignment taught me what is a good website, and essentially what a bad one is. The course also helped emphasise the design and development process that goes into making a website, as well as the countless mock ups and prototypes before the final website is made. Taking part in the process has helped me understand, and get a greater appreciation for every aspect of the website, whether it is the header design, or even the hamburger menu animation.

I really enjoyed learning about how important every aspect of the development stage is. If the development is done correctly, the website should come together much easier, than if no development has been done. The importance of low fidelity design, sitemaps, mock-ups, and even research was new to me, but they are all crucial aspects to the design process. Without these parts, no design can ever come together well.

On top of these design steps and principles, I learnt basic HTML and CSS script. I found this helpful in understanding the magnitude and detail that goes into website design, but also being able to use Google Chromes developer tool. The tool was very helpful and interesting when I wanted to know how another website had laid out and coded their design.

What difficult technical obstacles did you encounter and how did you overcome them?

Initially I had to overcome high expectations of a basic website design. Before I learned basic HTML and CSS I just assumed that any design could be made possible regardless of animation, style, and layout. After some lessons in basic HTML, CSS, and web design, I realised that I had set my sights to high for what I could realistically achieve. I went back to basics, and re-designed a simplistic yet efficient website to display a portfolio of my photography work.

I had some difficulty transferring some of my ideas from desktop to mobile design. Due to designing my desktop model in landscape mode, most of my features were too long to fit in a portrait screen of a mobile phone. However, after looking at some similar websites on my mobile, I realised that I could stack my features vertically opposed to horizontally, and it would visually still work.

Finally, I had some issues with figuring out how to implement a hamburger menu into my InVision prototype. After some emails and google searches, I was able to figure out the screen overlay function, and was successfully able to implement my hamburger menu.

What would you do differently if you had another opportunity to complete this assignment?

If I could do this assignment again, I would plan further in advance so I would not have to worry about foreseeable issues such as the hamburger menu. I would also redesign my header menu and make the spacing more even, and maybe make the font smaller. I would also make my hamburger menu icon smaller as I believe it creates to little negative space, and sticks out much more than it needs too.

Finally, since learning that the development stages of low fidelity designs and sitemaps are crucial, I would have liked to spend more time working on them, opposed to working on my high-fidelity design and prototype.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s