Further & Final Designing

Final Layout Plans

On the homepage, I’m planning to place each paragraph on a separate row (to be scrolled accordingly) delivering space for more content also giving space for ‘breadth’.

To simply the visual aesthetics and to bring more attention to the important content (Portfolio, introduction) I’m planning to use a one-colour background using the pink.

To create a mixed palette, I’m planning to add touches of complementary colours through navigation.

My portfolio pages will focus on process and ideas (My selling point and design focus). This will be achieved by displaying the process of:

Initial Stages – Development – Outcomes

Navigation will sit along the top of the page, visible on every page and fixed whilst scrolling.

Initial Design

Final Design – With Navigation

I’ve spaced my homepage content across the landing page. I’ve settled on a script font (Kavivanar) that delivers the tactile, sketchy aesthetic.

Part of the homepage, spacing the content out whilst still providing the visual notions (hand-drawn GIFS – inspired by emojis)

I don’t necessarily want a single, fixed identity. To deter from the usual norm and stand away from other designers, I’m using my own hand-drawn logos that will switch (GIF).

This should suggest my ability to be flexible with types of work and my multiple skills. Also show my audience I have confidence in ideas, visually reflecting my quick and rich-thinking.

The logo is written as ‘SamJoe’, a simple abbreviation of my first and middle name.

  • Short, simple and memorable
  • Stands out in a competitive market
  • Keeps consistent and reflective with website url ‘sam-joseph.com’

My navigation is again visually ‘brutal’. This is where my ‘pops’ of colour come into play, complementing the filled background. This sits along the top of the page, centre aligned and layered top of all content.

To deliver on interactivity, I’m using hover-actions on particular home-page text.

Particular text highlights my skills and the important information. When rolled-over they’ll turn from the teal-green to yellow (An accent colour)This should again prove a memorable aspect to the audience, engaging them into the websites design and functionality. – Leaving them want to see more?

On portfolio pages, the top of the page displays a before and after image. This WordPress feature is perfect suited to my design, as it signifies and represents again my idea and process focus. The slider scrolls from one image to the next, displaying the initial stage to the resulting outcome.

To separate the portfolio stages of development, a hand-drawn arrow element will bridge each stage. Again reflective of my authentic initial hand-idea process, also providing an effective navigation element.

Advertising – Development Stage for Portfolio

Scattered content and imagery


Notion of Sketchbook and authentic design process

Uploading Content

Initial Designing

Using my research, I’ve been experimenting on Photoshop, creating a mock-up design to test composition, materials and content styles.

I like the idea of a simple-scrolling homepage, reflective of a presentation style to introduce myself as a designer and artist and give context to the audience.

I plan to utilize colour and ‘pop‘ elements, personifying and characterizing a digital, machine system.

I’m originally using a fixed background image using:

.container-wrap {
background-image: url(‘http://sam-joseph.com/wp-content/uploads/2017/12/Web-Background.jpg’);
background-attachment: fixed!important;

The image would be fixed, regardless of scroll and content on the foreground. I’ve chosen contemporary and complementary ‘funky’ colours, set as a gradient.

Is the Gradient Making a Comeback?

Pink #ffe0e5

Teal Green #12e3b9


Initial front page layout, using the presentation style format. (Greeting, talk about personality, skills and design beliefs).

Consider unconventional format?

Staggered design? Brick layout? – Suggests ‘sketchbook’ format

Examples of Own Sketchbook Work (Spontaneous Compositions) Scattered, haphazard, overlapping content.

Initial composition of how the content would look. I’ve also used a custom cursor, developing my sketchy, brutal aesthetic into all parts of my web design. Below is how I’ve taken a custom downloaded cursor, colour-filled with a complementary colour to keep brand and concept consistent and edited pixel quality to look sharp and professional.

Before & After Improved Cursor Quality

On Photoshop I composed a GIF file that introduced myself as a designer, intended to display on the homepage. This ‘introduction’ is set to include various ’emojis’ and visual icons, emphasizing the playful and contemporary intentions/ideas. Also delivering an interactive element that captures the attention of the audience, leaving a memorable and stimulating impact.

This GIF sits nice and centre within the page and fully encased within the screen size. I have used the basic font just to test how the content would sit and look according to the page, with intent to change the typeface. 

I also want this particular content to be transparent, seemingly sat against the background, appearing as it’s lifted from the page – integration suggestion – directly on the page.

Visual Composer – How The Content Sits

Testing various fonts, I found the Google font ‘VT323’ (Therefore working across all platforms used to access the page) that embodies pixelation – stressing digital, ‘raw html’ aesthetic.

To begin with this typeface was too narrow, appeared to have been compressed. I’ve adjusted this to ensure a balanced appearance (and so the text was legible). (Before and after above and below)


The final GIF

Once set on the page, it appeared I struggle to fill space and content. All the information is delivered instantly to the landing screen, compressed together in a collective paragraph.

The content itself appears as too spaced together? The viewer could do with less content, as the landing page would appear too cluttered. It needs space to ‘breath’, which consequently gives a chance for the audience to view the ‘presentation’ at a gentle and easy pace.

Quick changes to see how the information would be perceived (also in a mono-space typeface, keeping the raw aesthetic however is more naturally spaced or leaded).