Squarespace - D&AD New Blood 2017


Web Design / UX&UI


May 2017


Apto is a minimal template with a purpose, to tailor around your content and help you showcase your work to its full potential. It’s full width asymmetric layout, contemporary design and contrasting typography create a subtle aesthetic which you can customize to fit your needs making it ideal for creatives.

View project on Behance

A simplistic approach tailored around content.

The asymmetric layout of the work page allows the designer to upload any width or height of image that they want. This results in a very editorial-like layout that sets a fixed margin of 200px after each element to create even spacing of content. The addition of a full width fluid layout also allows for the images to take up the maximum amount of real-estate of the users screen creating a more impactfull first impression.

Fluid layout & typography

The design was created around screens of 2560,1440 and 414 pixels on a 12 column grid with 20px gutter and 75px margins on each side. The system calucates the screens width and creates the column width.

Google fonts is the main and source for fonts for the template. With a maximum combination of two fonts the system can achieve great results due to the contrast and impact of varying type.

The about page brings a more conventional approach to the overall design system but also introduces column offsets and customisable sections that the designer can use to showcase their sets of skills and experience. It is also very important to mention the social media integration element which uses Facebook, Instagram and Twitter posts to create a feed that gives a very personal feel to the whole design.

A blog is essential to any pro-active designers portfolio website. This particular page creates a more conservative approach to the asymmetric layout previously shown. It uses fixed width images and fixed margins that can be either 1x or 2x sized. This creates a more standard layout that can be either used for blog features or portfolio pieces.

The blog post page introduces a lot of new elements that sit within the design system. It features the social media share interactions as well as typography elements that help pull out certain parts of the copy and helps them make a statement. In addition, it also allows navigation to previous and next blog posts to keep the potential user engaged.

The case study page shows the consistency in grid, layout and typography with the rest of the design system. It uses the format of the blog post regarding copy and social media interactivity but also incorporates the asymmetric layout featured on the portfolio page to create a more impactful and bold result.

The contact page and all its elements just like the whole design has been kept simple to allow the designer of the template to create their own style for buttons and form inputs. It also features variations on the block of copy elements that the designer can utilize to provide a different information.

Back to top