DIDE Research

Adam Hartwig: http://www.adamhartwig.co.uk

Adam Hartwig creates a beautifully interactive, yet clean portfolio site. His bold colours manage to feel unobtrusive whilst being bright and attentive. Everything you rollover is interactive and changes colour or texture in this playful, animated style.

He displays his skills creatively with this orbital design. Hovering over each planet displays a skill he has.

His about me section invites you to explore his brain via an outline that morphs and changes and informs you as you delve into his head – literally.


Alexander Rochet: http://www.alexandrerochet.com/project/givenchy-15

Alexander’s style is less playful and more serious, but still maintains a sense of breaking from the norm with his avant-garde style.

Blueprint style borders animate in with fading and drawing styles. These faint guides artistically overlap the projects.

It reflects the avant grade and quite trendy big companies his work has. Pastel black/grey colours leave us feeling dreamlike and give a premium feel to him as a designer and his work.

Titles of projects scatter and this somehow gives a sense of exclusivity; we already know what we’re looking at, so we don’t need it spelled out for us. He plays with this and spreads the lettering creatively to add to his existing elite aesthetic.


Bert: https://bert.house/en/

Bert presents bold designs that echo a neon lit night.

Image driven projects speak for themselves, often relying only on a white logo and a bold background image of each project that fills a row, with minimal buttons overlaying.

Creative paint streak loading screen – Bold, interesting, to the point, doesn’t give you more information than you need


y78: y78.fr

The front page’s video background intrigues us with its 80’s style grain/VHS style meeting with an anime mixed with Blade Runner retro futuristic feel.

Yet in this busy intro 4 nice clean white icons depicting his 4 style, influences and personality indicators over the top, and some text in a typeface that stays constant throughout, ground us in the chaos.

However some of the downsides of overcomplicating each page can be issues such as loading times on slower internet connections and a general feeling of the page being too busy. A simple layout seems to be the way forward, but the trick is not to make it too boring or formulaic that it feels like every other wordpress portfolio website out there.

It seems the best websites for portfolio design specifically have a consistent theme that you are able to play with but keep looking fresh. Inject just the right amount of personality into the layout and content, keep it focused ON the content and keep it consistent within itself.


In my oh so humble opinion, websites need to be:

  • Functional: This means all links need to work, everything must serve a purpose and everything should load within a reasonable time, any bugs need figuring out and any changes need to be tested until they work in the same way as everything else.
  • Ergonomic: Websites need to be easy to navigate. This is in the interest of both the owner of the website and anyone hoping to look at it. The owner is usually advertising something and hoping people will stick around to look at it/engage with it.  If it works, it should look like it works. If it’s “coming soon” it should either not be there or look totally different and inaccessible.
  • Informative: There’s no use having an easy to navigate website if you have no idea what you’re looking at. It can be very easy as a creator to overlook simple labelling and descriptions of projects that you might be very familiar with, but others may initially be confused. Even projects that speak for themselves can suffer from being represented badly; besides this is a full image we’re trying to bring across.
  • Concise: A busy website is often worse than a vague one. Bombarding the viewer with information can often be very negative and alienate them from your work. The whole idea of a portfolio site is to be able to breeze in, get a brief overview of a designer, see some previous works and figure out, fairly quickly, if you enjoy their style.
  • Representative of the person/company/owner (ie. brand consistent): It needs to reflect the style, ideology and feel of the owner of whichever site you’re on.

Websites can be:

  • Innovative: Sifting through designers can be fairly laborious when all the pages are tidy, clean, ergonomic, functional.. but completely boring. Injecting some personality into a portfolio can make it memorable and even showcase some of your skills as a designer etc.
  • Fun: Building on this innovation, why not make your website fun, or even funny. Just anything that makes your portfolio memorable, accessible and sharp.
  • Interactive: Interactive elements can add to this unique edge.

However with these styles you have to be mindful not to become too self indulgent. It’s far too easy. I did it way too much.


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)

Due to some issues with scrolling going too fast and confusing some users I tested it on I decided to reformat the homepage to an anchor driven menu style. In keeping with my sparse and unconventional aesthetic I kept it to different sized buttons kept simple down either side of a slightly redesigned animated title.

I decided to house the previews in small “picture frame” background images as seen below. This allowed them to hang a little better, rather than floating in space.

The mouse based parallax background created a fun, if dizzying graphic that would form the basis for my titles. By this point everyone knows where they are, but a fun title is a nice landing reminder.

With some 50% opacity .png images this created some interesting perspective overlap with additive colour mixing.

As for content, the nectar slider provided the best display for my work as I could use the white logo for each project at the centre of each banner in a field of black so as to be intriguing but unobtrusive.

Sliding each project further opens up examples of my work and invites you to scroll further.

For the music segments it felt right to invite clicks with some small, recognisable logos (youtube, spotify etc.)

These links open up either within the page or link to the relevant information.

I decided to carry on with this white on black motif that had carried through the rest of the website and change the parallax background to some 50% opaque white .png files.

Layering 5 files on one created a fantastically dizzying and fun title.


After a lot of issue with these text based navigation tools (“Back to home”) not appearing, I decided to go with some intuitive “home” “back to top” and “contact me” icons.