project 02: mockup

For project 2, we were required to make a mockup for our interface 1 project where we would design and code a 5+ page website.

Starting with the style tile, I went ahead and looked at examples of style tiles as i’ve never made one before. With the help of this video https://www.youtube.com/watch?v=3xWViyhRGd4 I had a general idea of what to include and what to show in my style tile which would help me later on.

I wanted to choose readable colors that contrast white and black decently if they were required to. Using a contrast analyzer most of these colors scored AAA or higher and were very readable in white which was used in the final design. Five colors were chosen for the five categories on my website.

The font Poppins from Google Fonts was chosen due to it’s poppy and welcoming features that I felt complimented the design I was going for. I particularly like the font in bold.

UI elements and graphic styles were inspired from flat illustration type web designs. I was interested in this style due to it’s simple but effective artwork which I have never attempted to make before and would serve as a challenge later on.

Other graphic patterns and styles were considered but would not end up on the original design.

flat illustration graphics I was inspired by

here were my attempts at flat illustration and vectoring in adobe illustrator. I am by no means artistic but I did like how the person with the gradient flowing turned out.

here is my final style tile that was used in consideration for my mockup.

using youtube videos such as this one https://www.youtube.com/watch?v=OKhG0CoyULQ I got a general idea for how I wanted to style my mockup which would be the home page for my interface project.

since i was unhappy with the wireframes i submitted for interface 1, i redesigned the wireframes in photoshop, which i would then recreate in html and css for interface with the new design styles in mind. This would be a lot more work but I wanted to use this mockup project as a basis for how I was going to design my project for interface since i was unsatisfied with my initial designs before this project.

these are my new wireframes that I will be using for my mockup

old wireframes can be seen here: http://ixd1107.firebird.sheridanc.on.ca/projectoneinterface/index.html

the general design is consistent and mobile friendly.

using the style tile as reference and the wireframes, I plugged in the content and used icons with the links and credit provided here:

https://thenounproject.com/search/?q=finance&i=998017

https://thenounproject.com/search/?q=diet&i=2574317

https://thenounproject.com/search/?q=fitness&i=1884255

https://thenounproject.com/search/?q=mental%20health&i=2686181

these icons will not be used for my final interface design and are only served as mockup.

Overall, the final design turned out alright and is clear, consistent and readable with all the information you need for a home page. The navigation is clean and linear to help users flow through the content when needed with a back to top and hamburger menu to navigate.

Leave a comment

Your email address will not be published. Required fields are marked *