Brutalist Websites — Website — OUGD602

With COP recently submitted, it has come to my attention just how much modernist and brutalist architecture influence my design.

Recently Brutalism has been given a new meaning when it is used within the context of the internet. It is a new form of web design that uses influences from its architectural counterpart. This is something discovered within the research for my dissertation.

http://brutalistwebsites.com/ classifies a brutalist website as:

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

This is a great opportunity to stand out form the noise of 'clean/minimalist' portfolio websites that are so prominently used today. It also allows a form of expression through web design rather than speaking through only the projects themselves.

Visual/Functionality Research — Website — OUGD602

To provide some form of inspiration, looking at various visual/functional approaches that could be applied within my own site is a must.

http://weareadaptable.com





This site is a great example of 100% width/height responsive design. The site fills the screen no matter the resolution, essentially allowing more content to be shown. It also features many animations which are not entirely necessary and do not add any beneficial elements to the user experience other than slowing down scroll rate.


http://flavinsky.com







A great example of displaying a menu in the form of an infinite scroll, with hover overlays featuring the title of the project on top. These can then be clicked on to be viewed fully.


http://eliastinchon.com



White on black seems to be standing out much more in comparison to the conventional black on white. The work seems to stand out much more in comparison to the former.
Again this site uses a 100% width/height containers to utilise the most screen space possible, even in mobile view the same techniques is used however elements are triggered to disappear using the media queries within the CSS:

CMS — Website — OUGD602

Content management systems are a great way for designers such as myself with little coding knowledge to build a professional looking portfolio in days.

However, there are many restrictions that comes with this strategy of gaining an online presence. Firstly, you start with a template provided by the CMS you are using, this template will essentially be the same as everyone else's, preventing you from standing out from the crowd and essentially making your online presence mediocre at best.

There are many different CMS systems to choose from, such as:

• Squarespace
• Cargo Collective
• Indexhibit
• Wordpress
• Format
• Bēhance
• Adobe MyPortfolio
• Wix
• Weebly
• PortfolioBox
• Carbonmade
• Moonfruit

The most common being Squarespace, however, it is off-putting to know that as graphic designers we are meant to exhibit our web design skills, this is extremely difficult when you use an already provided template. So rather than featuring projects that have web design within them, kill two birds with one stone and create your own unique, custom website built from the ground up, as this is essentially a piece of design in itself.

404 Bodymovin' — Website — OUGD602

To get the ball rolling in designing my own website, I wanted to teach myself a new fundamental skill within After Effects where a vector animation (SVG) can be converted in to JSON data, meaning only code is needed to produce the animation, eliminating the need for low quality GIF's.

Bodymovin' is installed to After Effects via a plugin, and just like any other animation, when you export, instead of using media encoder you select Bodymovin', sit back and let it produce the necessary files for you to import onto your server ready to go live on the world wide web.

I began by creating a custom type for my numbers within illustrator based off my own drawings:



After these were vectorised, then split into individual sections, they could then be imported into After Effects as vectors:



The resulting effect within AE:



And after transforming each slice through keyframes:



Then exported using Bodymovin':



And how it looks when it is live in a web browser:



I will continue to use this screen until the website is ready to go live, then even still this can be used as a standard 404 page.

Website — Brief — OUGD602