IXD301 Week 2: Tasks


This weeks task is to create a high-resolution mockup on Figma of our website for review and feedback next week. Unfortunately/ fortunately for me, I left the next day for 10 days competing in European championships in Italy!!

Tasks to be done:

  1. Content of portfolio should be set.  ✅
  2. Complete two user/job stories. ✅
  3. Start to consider visual grammar. ✅
  4. High-resolution mockups of your portfolio in desktop Home Page, Case Studies, About, Contact. ✅

Task 1:

This was completed last week and can be seen in IXD301 Week 1: Tasks

Task 2:

We completed this in class with our peers and read them out loud. Here are my attempts:


I found this a useful task to help us remember who and what we are designing our websites for and the key information they should display.

Task 3:

This is something that we should consider when creating high res mockups, in my case I want to be able to portray my personality while remaining professional and employable. I will keep a minimal colour pallet along with a legible font. However, I would like to incorporate emojis and the possible use of custom cursors as I saw in my research. I would also like to liven things up with animations of the links and introduce minimal colour through accents.

Task 4:

To create my high res mockup I have created a step by step plan that will be informed by my research and help create and develop a grounded and appropriate website.

 My Four-Step plan:

  1. quick sketches
  2. development sketches
  3. digital version
  4. digital refinement

Step 1: Quick Sketches

Last week we looked at some portfolios from established designers along with a few this week that can be found in my research post (They are pretty cool). Using these I decided to start creating sketches of what I thought I wanted my website to look like. In class, we played a game called crazy 8’s in which you must design roughly obviously, 8 wireframes for a webpage in 8 minutes. Leaving you a minute per page! I found this super freeing and decided to try this myself at home to get some ideas flowing while looking at some inspirational websites I had researched.

Here is what we created in class:

These are 4 more designs I created in 4 minutes using my research as a reference:

Step 2: Develop Sketches

Out of my second set of sketches, I enjoyed my first and second sketches the most. I felt like these made more sense and looked graphically more interesting.

Step 3: Digital version

Once I had finished my sketches on paper it was time to take them to the digital realm.

Step 4: Digital Refinement


Leave a Reply

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