discoform


design for web.

← index

Four A's Five H's

http://www.aaaahhhhh.com/


Four A's Five H's logo

FOUR A'S FIVE H'S began as an esoteric approach to the process of branding a product or service.

There was no specific need for the brand, the excercise was to simply create the identity and then wait and see what happened with it.

I began with registering a domain name, which is a great way to excercise feelings of disappoinment and frustration. All the good names have been registered, and it seems like very few of these premium URLs are being put to any use other than to store, sell, and hoard a commodity.

I met this challenge by relieving myself of any expectations, closing my eyes, and mashing a few keys on my laptop to see what would come of it (thank you, John Cage).

The result delivered by this chance-based approach was rubbish, but it was rubbish I could sort through and organize.


AAAAHHHHH.com

After some editing and rearranging of letters, I finally landed on a concept that was amusing enough to hold my interest, and easy to spell out to anyone who might ask “hey, what's yr website again?”

If treated as an acronym the meaning could be just about anything.


Now, what's it for?

This question took months to answer, with a few false starts along the way.

For a short while it was a dev sandbox for javascript experiments, then it was a blog, and now I think it's found its permanent place in the world as a simple shop for customers of not so simple tastes.


Books on Design, new & used

I have books. Not as many as I used to have, but enough. A few of these books are design related and have duplicate content. Some of these books with duplicate content are for sale, so here is where I sell them. What do I do with all the money I make by selling these books? I go deeper. I buy more books. That's what happens when you like books...


Design & Development Tools


Wireframes and Mockups


Fig1.1
Four A's Five H's Homepage

image of four a's five h's website
Fig1.1 - The Four A's Five H's website is stricly for the purposes of e-commerce. Each product in the catalog is from a personal collection, and in almost every case the available quantity is (1).

Fig1.2
Four A's Five H's Homepage

image of four a's five h's website
Fig1.2 - The Four A's Five H's website is stricly for the purposes of e-commerce. Each product in the catalog is from a personal collection, and in almost every case the available quantity is (1).

Fig2.1
Minimalist responsive layout.

image of four a's five h's website
Fig2.1 - The layout of the site is kept spare and simply. It's responsive and mobile friendly, speed optimized through a CDN (Netlify).

Fig3.
About page with history of the brand origins

image of four a's five h's website
Fig3. - Four A's Five H's has fairly esoteric beginnings, which are detailed on the site.

Fig4.
Static HTML contact form

image of four a's five h's website
Fig4. Because the site is built with Jekyll, the deployment is static HTML, so contact form is processed by FormSpree.io

Fig5.
Orders processed through Snipcart

image of four a's five h's website
Fig5. E-commerce functions are handled by Snipcart, a lean, powerful HTML/Javascript shopping cart.

Typography


To compliment Thoughtbot's Neat grid system, I'm aso utilizing a sans-serif type system from one of their Refills patterns, with minor modifications.

Headings: Titillium Web

Titillium is born inside the Accademia di Belle Arti di Urbino as a didactic project Course Type design of the Master of Visual Design Campi Visivi.

Titillium Web

Titillium Web

Titillium Web

Titillium Web

Titillium Web

Copy: ParaType Sans

PT Sans is based on Russian sans serif types of the second part of the 20th century, but at the same time has a very distinctive features of modern humanistic design. The family consists of 8 styles: 4 basic styles; 2 captions styles for small sizes and 2 narrows styles for economic setting.

PT Sans and PT Serif were designed by Alexandra Korolkova with participation of Olga Umpeleva and under supervision of Vladimir Yefimov.

Color Palette


Simple black & white

Visual stimuli is carried by the content. The theory being that the website should be strictly functional and not do anything to overpower the already bold imagery of the content. The plain white background adds contrast to the displayed products.

  • #111111
  • #ffffff

Social Media Campaign


Following options

For now I'm linking to my own social media accounts, as I'm the current sole proprietor of the site

Optimised for sharing:

Of course, every post and page is ready to be shared with appropriate metadata using Twitter Cards and Open Graph protocol.

image of four a's five h's website
Fig1. Social sharing buttons have been optimized for rich data sharing using Open Graph and Twitter's large image summary. The merchandise sold in this shop is fairly esoteric, so sharing new arrivals between it's small audience is essential.
I want to go to there: Four A's Five H's logo

Four A's Five H's

← index