Brand design

With the research revealing three main styles: all green, all pastel, and all colours, I wanted to play with the all-colours version but stay with colours commonly associated with vegetables and fruit. The vegan lifestyle is still (here in Norway, at least) a thing for the young adult population, so playful and vibrant would suit my project well.

The name n.eat is a clever title – similar to a portmanteau (think Pokemon = pocket + monster), or at least a play on the words neat and eat. Neat means “clean, nothing added, orderly”, which is a good description of vegan food. I wanted to stay with the idea of neatness when I designed the logo and the overall look and feel of the design (no intricate illustrations or busy patterns). I do have an affinity for Japanese design elements and tried out different style brushstrokes for the logo. I ended up with a clean (neat!) version, but there is still a possibility for playing with the look – for instance for seasonal concepts etc.

For the font, I went with a sans-serif, rounded font from the Google font library; Quicksand. It’s legible, freely available, and comes in multiple weights – plus, the rounded look adds just the right amount of playfulness to the look.

File and folders, naming conventions

I usually put all main files – HTML or PHP – in the root folder, then add a subfolder for each type of asset: images/graphics, stylesheet(s), fonts (if self-hosted), javascript, linked documents, etc. The structure would then look like this – note that I’ve not expanded the images folder due to the multiple files inside:

When working in a team, it’s essential to agree on a file and – more detailed – a CSS property naming convention which will make sense to all. This will make it easier to work independently within the team, and it will also make a potential handover to other developers easy. I’ve personally spent way too many hours trying to nest my way through the maze of files created by previous webmasters who for some reason or another have left a client.

• An HTML file containing information about something should be named in a way that suggests what’s inside: contact.html, menu.html, etc.
• A CSS selector should be named indicating what effect this has on the design or based on which section of the HTML it belongs: div#menu-header, section.menu-items, div.menu-image, etc.

Note: the symbol # indicates an ID, or a selector which can only be used once in a file. This property may also be used to target a single element, for instance, an anchor link on a long scrolling page. The symbol . indicates a class, which is a selector which can be used multiple times throughout the HTML. For this assignment, the food menu items should typically all be assigned a shared class.