Early Website Design & Clickable Prototype

When I started thinking about my website, my first challenge was understanding who it was for. The next challenge was clarifying why I am right for them. This takes a little bit of personal reflection, and questioning myself why I want to be getting into this industry. Having a personal awareness of what my own drives and desires are in design, allows me to form a very clear message; something that I am keen to craft in my branding.

What Sets Me Apart

I started trying to write down a range of words and phrases that could be used to describe me, to help me begin to visualise what my brand tone or approach could be. Although some of this written content is total nonsense, getting my thoughts down helped me begin to put some ideas together.

This slideshow requires JavaScript.

When I narrow it down in its simplest form, there are a few key things that I feel that I can bring to a company as a new designer. There are the “soft skills” such as:

  • Copywriting
  • Personas and User Stories
  • Rapid Prototyping
  • UX/UI Wireframing
  • Design thinking

Then there are the more traditional production techniques and skills:

  • High/Low Poly 3D Modelling
  • Lighting and Texturing
  • 3D Animation
  • Video Editing
  • Basic HTML & CSS

These two areas highlight my ability as a designer from the thinking stages right through to the production. These two areas of skills are just as important as each other, and either one would not be the same without each other. For the early ideation, I have developed some skills in writing and brand messaging that have shaped the ideas and foundations of projects that I’ve worked on. The technical skills that follow them have allowed me to bring these ideas to life through animation and interaction design.

Communicating My Strengths

In clarifying what I have to offer I started to sift through all of my work to date, to see what projects would showcase the best in those strengths.

With a few of these in mind, I began to think about how to communicate things like my personality, or my general approach to design. Maybe this could be shown through little easter eggs in my site, or maybe it could be shown through the thoughtfulness of the layout, or through the process I show in my work?


I started to draw a number of wireframes to get some ideas on paper. Referring back to the layout of the company websites, I wanted to mimic the clear messaging in my work. I thought the grid layout was interesting for portfolios, as it gives the user a hint of each project before selecting one or two.


When I got a few iterations I was interested in taking forward, I drew up some sketches in Illustrator and added them to Marvel App; a quick and easy prototyping tool. Below is an example of the first design.


Test the prototype here


Next Steps

This design isn’t working just yet for me but it is communicating the essence of what I would like my site to be like.

In this layout I like the large bold statement that greets the user. It will communicate a confidence that I have in my work and as a person. It is also a way to bring a little bit of fun or delight to the homepage and as an aspiring interaction designer, this is important (Davidson, 2009). The minimalistic “skills” section forces myself to be concise, in order to communicate my strengths quickly and clearly.

On the other side, this layout is a little too cluttered for my taste. In my next iterations, it may be a good idea to separate the sections with pages instead of having a full scrolling page. In addition to this, being more selective with the work that is displayed may be a stronger way to approach the portfolio, as I can’t see too many people viewing every project. I want to make sure that whichever project the user clicks upon, that it is a really great one. Eliminating weaker projects allows for this.

As I move forward with this design, I will be building on these findings to create something that showcases my work in the best possible light.


Davison, J. 2009, “The New Design Imperative: To Satisfy and Delight”, Design Management Review, vol. 20, no. 1, pp. 16-22,64-65.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s