IXD301 Wk2:- Designing High Resolution Mock-up

With my site content created, it was time to start considering and designing a high resolution mock-up.

In class a challenge was done called crazy 8. This challenge was played by drawing 8 different possible portfolio designs in 8 minutes, one design per minute. This was so my creativity could be let out with no limit.

Afterwards I decided that I wanted to recreate this and I started sketching out more options for potential site designs.

Once I had different sketch designs I picked the one that I felt held the most value and the one that I preferred, then I began creating the different page designs in Figma from my initial sketch.

I had to start considering the colours that I was going to use for my site. Last year when I created my own brand the colour that I ended up going with was a cornflower blue shade that was a really lovely pale blue colour but with the creation of my site I decided that maybe I would play around with different colours and see what works and what doesn’t.


I tried various colours and shades matching different colour options to see what I liked and what I felt worked well.




Since I had previously used a blue I felt that I wanted to maybe try something different, another colour or shade. I decided that I maybe I should have another look at the colour consideration that I did for my personal brand.







After having a look at this, I felt drawn to the colours orange and green, specifically orange-red and a dark green-blue.

I felt that theses colours both stood out well on their own and went well together.

With my colours chosen, content written and a design in mind I then began creating my high resolution mock-up.

High Resolution Mock-up:

While creating my case studies pages I created looped arrows as it was my thinking that it would help add something special and different to my case studies and it would draw the viewers attention downwards through the page.



One thing that I realised while creating my digital mock-up was that it was hard trying to place everything and have it be seamless and look like they should be there. I found that sometimes my image positioning and content placement looked out of place. I felt that what other websites did seamlessly looked almost purposefully disordered in my mock up. In order to help me resolve this I continued on looking at other sites similar to the one that I was creating to see what they had done and what I could emulate. ( This is something that I will be working on greatly through the creation of my site in order to gain some insight and develop the skill)

Leave a Reply

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