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:
- Content of portfolio should be set. ✅
- Complete two user/job stories. ✅
- Start to consider visual grammar. ✅
- 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:
- quick sketches
- development sketches
- digital version
- 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