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

Overlapped

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


Sketchbook

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).

Design + Aesthetics

Looking at the variety of work that I’ve produced, my brand has become tactile, colourful and playful. I want to communicate this aesthetic and visual style across my online image so I’m researching various website designs, content, mechanics etc.

My Work


I’ve gathered a small selection of different websites I’m visually interested in, below:

  • Sticky, raw Content
  • Challenging Functionality
  • Sketchy Aesthetics
  • ’90’s stylisation?
  • Flat imagery? Scanned?

After some research, I’ve come to understand a new web trend which understands my aesthetics and what I’m trying to replicate – Brutalism.

The trend came around a few years ago, however has only become largely seen recently. Brutalism partially refers to the architectural trend of the 50s, 60s and 70s, which was brash and confrontational, built with concrete materials and was uncomfortable to the eye. The Washington Post reported that “the hottest trend in Web design is making intentionally ugly, difficult sites”.

Brutalist Websites have been collecting sites that adopt this theme since 2014. They say:

“In its ruggedness and lack of concern to look comfortable or easy, Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today’s web design.”

They identify with key features such as:

  • Repetition
  • Raw Materials
  • Basic CSS
  • Disregard of Beauty
  • Harsh, Irrelevant Content

The rise of this web trend could be seen as a rebellion to the predictability and political similarity of commercial and social platforms. The idea of Brutalism reminds us the potential of the internet and to break boundaries.

It also shows resemblance to Cut & Paste aesthetics, noted in Contextual Studies  where I’ve talked about this.

https://en.wikipedia.org/wiki/Punk_subculture

http://trydesignlab.com/blog/brutalist-websites-5-things-designers-learn-brutalism/

http://brutalistwebsites.com

The World Wide Web + Usage

We are well into the age of the internet; in a world of over 7 billion people 51.7% are connected to the internet (of June 2017). The world is dominated by cyberspace, all engaging, communicating and sharing information online.

http://www.internetworldstats.com/stats.htm

Owning a website instantly appeals to the current and evolving, worldwide social and marketing trends. A list of benefits include:

  • Increasing your Local and Global Exposure
  • Improved Advertising
  • Easy Access to Customers (Contacts)
  • Improved Productivity
  • Market Expansion
  • Selling your Products and Services online
  • Personal Internet Identity
  • Linking with new Customers, Clients and Companies
  • Cheap Market Research
  • Improved Customer Service

Owning a website can be useless unless its effective, efficient, easy to use and simple to understand. Effective web design considers:

  • Responsive, Relative Design
  • User-Friendly Interface + Navigation
  • Content Quality + Quantity
  • Community + Networking
  • Personalised + Unorthodox Design
  • Regular Activity + Updates

Ineffective displays:

  • Cluttered, Irrelevant, Bad Quality Content
  • Difficult/Unavailable User-Navigation
  • Eyesore Design
  • Lack of Customer Awareness + Business Acumen
  • An Outdated Individual Image

In today’s world, we access the web from a variety of screens, solutions and locations; namely:

  • Smart-phones
  • Laptops
  • Tablet Computers
  • Desktop PCs
  • Games Consoles
  • E-Readers
  • TV Sets

Modern web devices such as smart-phones and tablets enable us to access the internet on-the-go, within reason anywhere at any time.

  • User Experience

Being able to access a website from multiple devices increases functionality and exposure to different ages and tech-knowledge of customers and clients. Also your website can respond to the different shapes and screen limitations of various devices, being clear and easy to use no matter how you view it.

Furthermore touch-screen allows for user interactivity and animated designs, attracting users to share fun and entertaining experiences.

  • Worldwide Access

We can now work from more than just an office desk, with the ability to work from home or even multiple offices etc.

  • App Collaboration

The web now allows you to incorporate and work with apps, using different apps to access, feature, develop and edit content for web upload.

http://www.telegraph.co.uk/technology/2016/11/01/mobile-web-usage-overtakes-desktop-for-first-time/


Marketing and advertising is more or less produced with the web in mind, seen to be a staple for businesses and services to be actively online. There are a variety of websites that can be utilized to suit the needs and demands of certain people:

  • Social Media

Arguably the most commonly known and most used form of website, it was reported last year that the average internet user owns 7 social accounts, twice the average from 2012.

We use them as an online communication channels to create personalised online profiles, share content, collaborate and interact with one another.

Types of social platforms include:

  • Microblogging (Twitter, Tumblr)
  • Forums (Reddit)
  • Social Networking (Facebook, Instagram, LinkedIn)
  • Social Curation (Pinterest)
  • Wikis (Wikipedia)

http://blog.globalwebindex.net/chart-of-the-day/daily-time-spent-on-social-networks/

http://whatis.techtarget.com/definition/social-media

  • Photo Sharing

Usually paid for by online advertising, there are potentially hundreds are sites dedicated to photo sharing, namely Flickr.com, Photosite.com to name two. Digital cameras and phones alike now come with apps that enable you to create digital slide-shows and presentations that can then be uploaded.

Instagram can be classed as a photo sharing website however is more inclined as social media due to its chronological time-line and other similar nature.

  • Blogging

A huge trend for marketing and advertising, blogging is a method of journalising and documenting a day-to-day life. Sites include WordPressBloggerSquarespace, Wix to name a few.

Vlogging is also a largely popular trend, main-streaming from video-sharing giant Youtube. A demand for video-generated content, ‘vloggers’ have developed a personal brand that extends to product endorsement and their own range, depending on content (e.g. Beauty content – beauty products)

http://www.bbc.co.uk/newsbeat/article/24726895/meet-the-vloggers-self-employed-and-worth-a-fortune

  • E-Commerce

Businesses small and large use online shopping to sell products and services. Advantages include time, money, streamlining operations and lowering costs.


Self-Promotion relies on dedication, persistence and an understanding of marketing on social media and other platforms. In context of the creative market, today a plethora of free platforms is available to use such as:

  • Facebook

Targeting more of an older, localised demographic. Your profile should revolve around sharing and talking about all things design related. Perhaps even a brand page showcasing your work and progress, sharing articles and industry thoughts?

It can help establish credibility and notability within your working area, also where you can find your prospective employers and clients.

*Pin a video or post as a first-impression introduction to these people, or showing your passion and knowledge of the creative industry?

  • LinkedIn

Designed for professionals, the network is a powerful and staple resource for career prospectives, seeking new employers and linking to the professional, creative community (depending on your subject).

Your profile appears as a CV and application for work, you can be recommended by others and also upload video and photos.

*Use multimedia uploads as a video testimonial, demonstrating your commitment and understanding of creative work.

*Make presentation decks of your work, showcasing a PDF portfolio accessible to employers, clients and recruiters.

  • Twitter

Opposite to Facebook, Twitter connects to a variety of audiences (Mainly a younger market) and engages direct worldwide access. This allows you to build relationships and talk to individuals quickly and efficiently.

It is also a large listening and research platform where you can see trending topics and find important and leadership information about employer and company profiles.

*Build conversation, share posts and comment questions. (Develop a personal or professional rapport)

  • Instagram

Instagram is a crowded place for creative’s displaying their work, however you can utilize geo-tagging to localise your work to attract clients and companies. Comment on other accounts and specific subject and brand content that grabs attention and builds rapport.

*Upload a time-lapse of a creative project, create a professional video of your brand and image.

*Play with post interface, your profile can aesthetically express your visual identity and service/work if you create a composition developed around for example a 9 post frame (square).

https://www.americanexpress.com/us/small-business/openforum/articles/4-rules-for-networking-and-promoting-yourself-online/


SEO (Search Engine Optimisation) is a method of improving quality and efficiency in search result rankings. Google displays links to pages it considers relevant and authoritative, measured by quality and number of links from other web pages.

Businesses can use this to improve visibility amongst multiple results and searches (e.g. When ‘graphic design’ there is a possibility your business could come higher up within the relayed results)