DIDE Development: mike-nunn.com


After exploring lots of different portfolio driven designers’ websites, it became clear that the best way to arrive at a consistent, thematic website that encapsulates and advertises me is to centre my website around my work.


Collating some of my recent graphics projects (both college and professional) I saw a bit of a “black and white” theme emerging. I’ve always been fascinated by black and white design (photographs, etchings, geometric designs) so I felt this was an appropriate place to start.


Reversing out the standard white background to a slightly pastel black allowed my work to spring to the foreground and look a lot less clunky.


Inspired by Yul Moreau (http://y78.fr/) I wanted to try an animated landing page that was fullscreen and created a theme or an atmosphere. So following on from my branding work, using stock footage of embers as the background, the “enter button” becomes visible as the embers pass over it.

Whilst this created an interesting effect, I feel like it may put people off if they have to wait for entry to the website to become apparent and may serve to only turn people/potential clients away. Instead I tried contrasting the vast blackness with a transparent white button that springs to the eye right away. I also experimented briefly with mimicking Yul’s use of 4 emblems on his landing page (seen here http://y78.fr/)  that give a sense of summarising him as a designer. I picked 3 temporary ones of my own (a laptop for my design work, the Cancer astrology symbol to represent my personal projects and unique approach to things and the guitar to represent my music).

This format creates a vast and quite aesthetically pleasing mood by creating depth, but as I was keen to create a work-centred/split portfolio website, it needed a personal touch. I approached branding myself as I would a product/company and initially played around with simply editing and shaping my name (as it is already the domain I’ve purchased)

Through some experimentation with low-poly designs, I arrived on an ‘M’ over ‘N’ design that created a tall, totem like design when I used the negative space to form a rectangle.

I refined it to make the design as clean as possible, so all gaps were of equal width.

The shape worked nicely in black and white and reversed out and with paler grey iterations.

However it looked boldest in block white against a black background.

Acknowledging the symmetry in “Mike” and “Nunn” (as far as the number of letters is concerned) I decided on a monotype font to equally space them. However this did begin to make the totem logo just a little too blocky.

After some further experimentation with negative space and extending the space, I realised offsetting both sides by 2 letters opened up the type and left a strange, but interesting a-symmetry (below)

I returned to my landing page to revisit my “split portfolio” and realised the 3 segments of my logo appeared to build the different shapes of my personality and approach to work and creativity; they all slot together and work in tow with each other to create myself as a whole.


Using the cascading images salient option I created this self building logo. I laid out the 3 segments in photoshop on separate layers and loaded them in on top of each other using said cascading images feature. With some minor animation the logo forms to create an interesting and personalised landing page for my site.





On a mobile device, the arrows act as a prompt to scroll and the option to click on each symbol to find out more information about that section of my work is added as a link to the entire column. (Below)