- Live at https://www.piratechicken.com/
The layout is based on the cover design of Penguin Classics. Like the Penguin covers, the site layout is minimalist and spacious. Sections are horizontal and cover 100% of the page width. There are no borders, but instead sections are demarcated by a change in the background colour.
The colour scheme is from a page of 'The Tragical Death of an Apple Pye', printed in the 1800s and pictured on the blog of Angela Voulangas.
- Background 'paper' yellow-y: #F2E4BD
- Background alt light teal: #BACDA8
- Text 'print' dark grey: #4B4B4B (may be darkened slightly for contrast against some colors)
- Highlight red: #750417
- Highlight teal: #528F7D
- Highlight yellow: #ECBE69
With the bookish theme, it was tempting to go heavy on the serif fonts, however these conflicted with the very clean layout. Instead I paired two full sans serif fonts. The wide loops in these fonts combined with the use of capitals, semi-bold and generous spacing meant that these two fonts retained the bookish feel while keeping clean and simple. Penguin Classics also use sans serif fonts.
- Headings: Montserrat semi-bold (weight 600), usually capital
- General text: Raleway regular
Like a book or a Penguin Classic cover, images are kept to a minimum and those that are present are mostly logos. Monochrome logos that match the dark grey text colour are preferred. IN the absense of images, the spacious page layout and alternating background colours serve to break up the text.
Penguin has a penguin. Conveniently, my usual avatar is also a bird - a cartoon sketch I did of our pet chicken, Pirate Chicken. This also reflects my personality (animals etc). To turn it into a logo I created paths in Photoshop and stroked them with a tapered brush. Then I gave it a black circle background.
Original sketch:
Sketch converted to paths and stroked:
Final logo:
In keeping with the minimalist theme and to avoid "cartoonifying" the clean layout, the logo is only used once, in the footer.
Pages should always load with the main header and the intro fitted to the screen.
On small screens (where width is generally less than height and therefore more book-shaped) 50% of the page is the big-header and 50% the intro text. On scrolling down the page, the main header is covered by the body and a smaller right justified header appears. This is not strictly necessary as people aren't likely to forget what page they're on, but it is reminiscent of where author might appear in the header of a printed page. It also means my name is always visible.
On screens wider than 768px this makes the big header overwhelming so it is converted to a smaller header with a nav bar. The bottom av bar is not shown. It has a lower yellow highlight border consistent with the small header bar that shows after scrolling down on narrower screens. (This makes the small header redundant on wider screens so it is not shown.) The rest of the screen is taken up with the intro text and this time the Linked In etc links show.
Sections are set to view height and are delineated by alternating background colour. Top paddings are set to avoid overlap with fixed headers. Vertical alignment is always centered in the flexbox.
On small screens the section content has alternating justification (right then left). On larger screens all content reaches max width and is centered.