ixd103 week 09 reflection and tasks

Portfolio Sites

S.W.O.T Analysis (30 mins)

Outlining your strengths, weaknesses, opportunities, and threats.

This is very useful when undertaking any project. It helps consider what we want to project into the world.



–        Research- visual e.g., mind maps, mood boards, sketches.

–        Creative, can bring unique ideas to my projects.


–        Spend more time on my coding skills, bring more quality into my portfolio website.

–        Make time to research more informative than visual.


–        Code (HTML & CSS)

–        Time management e.g., presenting work onto blog, lack of informative research, late nights etc.

–        Typography – not very diverse with my options.

–        Writing to much where it becomes babbling and not effective writing.


–        Time pressure

–        Self-doubt

–        Being easily distracted at home.

–        Late nights



The Goal

What is the purpose of the project? What problem are we trying to solve in putting a portfolio together?

Write a mission statement for what you are trying to do. One sentence, ten minutes, put it onto Miro board. Include examples of what you are trying to achieve, and everything you hope to accomplish.

Bullseye placement of function for site

Primary – display and promote your work and be contacted.

Secondary- Reputation for brand, gain more exposure and reputation, research and writing case studies.

Tertiary – To be unique and memorable, generate level of professionalism.



What can you include in your site design? What would be good practise/ conform to web standards? What would improve the UX?

Recommended reading – Adham Dannaway article on BBL – https://www.smashingmagazine.com/2013/06/workflow-design-develop-modern-portfolio-website/


Content Planning

Element Collage from last week will help for interactive/design elements.

Think about what a viewer’s first impression will be. It’s about first impressions and introductions. If it’s one page it will likely be in sections. What do you include in each of these etc.

Consider the formatting and placement of elements.

Projects to include? In what order? Text to include? Informative/ for tone/ Bio? Contact Details? Any other additional details/ links?

Is your site going to be text led? Image led? Have a hero image?


Don’t start with ‘Hi there’ or anything similar, it is used a lot and you have explored better writing practise from the start of the semester. Tone of voice provides an opportunity to be more unique.



It is simply a plan of a web page to work from. They don’t have to be pretty.

Start on paper – quicker and easier. Lots of ideas. Start small and fill the boxes.

Create a key for UI elements (v=videos etc).

Pause and pick, then repeat the process, drawing the promising ideas out again in higher fidelity and in larger boxes.

Next could be …

  • Paper prototypes
  • Digital wireframes
  • Digital prototype



Simplify things. Look objectively. Don’t try make idea one work, make connections on what works and what doesn’t work.

Use current website from ixd101. Map your brand to it and modify what you currently have to it. Change some imagery and text, adapt the structure.


Idea Generation – Osborn Checklist

  • Scatter
  • Combine
  • Adapt
  • Modify
  • Put to another use.
  • Eliminate
  • Rearrange

Look on Miro for S.C.A.M.P.E.R Board Template.

Be ambitious.

Explore options and opportunities.

Consider Web Standards.

Hand in – 7th May @ 11am



  • Bio and brand dictionary
  • Monogram
  • Wordmark
  • Visual marque
  • Brand guidelines
  • Website design
  • Website build
  • Research blogs


Gantt Chart – Do one of these for your remaining weeks. A simple way to plan out your time and block in tasks. Need to be seen on blog.


Next week is Easter. Daniel will be looking at research blogs and sending out feedback on these before the end of the week.

Have site prototypes complete by the first week back ready for review.


Below is my quick website wireframes, I did 16 per page, giving me 32 total.

From these I narrowed them down to 14 of my best or favoured ideas

Then I narrowed it down to a top 4, I think I’m going to go with number 3, as it’s the one I like the best and I think it will utilise my work and brand well.

Site Prototype

Below are my digital wireframes of what I want my website to look like, I think it is very consistent and on brand.



So far I think I’m doing well with wireframing and making digital prototypes, I’m slightly concerned over my ability to code to the design standard. I’m hoping if the actual coded site doesn’t match up then my detailed designs will still reflect my work and brand. In the upcoming weeks, I plan to really focus on my blog posts as I haven’t put up everything required. I also need to start to tie everything together and think about final presentation. In preparation for all of this, it has been suggested that we create a Gantt Chart to help manage our time over the upcoming weeks. I decided to keep mine simple so I’m not overcomplicating anything or making myself flustered everything I go and read it.

Gantt Chart

Leave a Reply

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