Lunacy Logo update 2

After a long blog post about coming back to your work and realising what is wrong with it, I came back to my logo and saw what was wrong with it.


Moon far too big, not transparent.


nice trimmed and resized image, the moon covers the L enough to stand out with the black letter, I’m really happy with it.


I did have a slight problem with the implementation, as it increased the size of the navbar container, the css style ‘contain’ was ineffective.


However with a fixed height of 40 pixels and the width inherited, it was fixed.

This simple fix was a major personal milestone in web designing as I was not at uni and there was no team around me, and although it is simple, having the ability to fix minor problems like this off my own back quickly felt very rewarding.


Checkboxes or buttons?

After spending an eternity working out the checkboxes, another battle between design and functionality began.


The checkboxes are easy to use but lack the visual information that buttons give, especially as the site is centered around nights out, if one happens to forget the name of the club they were in, a logo may prove useful.


sixtymillionpostcards yates lost garden barme_logo_small2

All clubs have very different themes and logos, and trying to make readable, symmetrical, functional buttons from them proved ineffective.

We stuck with the checkboxes.

Lunacy update

A big issue being a designer first and foremost is the battle between something looking pretty and actually working. Translating ambitious mock ups into working websites comes with much sacrifice, something I learned the hard way.

One of the main visual aspects of the website was to have the inclusion of a moon, either in the logo or as the background.


“flashy designer mock up”


“messy integration into php”


even when I managed to center it and it seemed to look acceptable;


it came with the issue that the image was ‘contained’ in all of the containers, which meant it continuously tiled.

Also the visual cluster of white text and a light grey/white background was not appealing, the clean, solid blue look is much more user friendly, and keeps in line with the angular, ‘metro’ style of todays technology.


Inspiration for Lunacy

Lunacy is similar to other social media sites such as Twitter, FML and Reddit, where it is easy to see the most popular posts in a specific timescale.

FML, for example:


The voting system is unique as it does not focus on good or bad, but rather if the statement one makes is their own fault or the faults of others, though it can be said that ‘You deserved it’ essentially equates to ‘bad’.

This does make for interesting conversation on each post, and the ability to comment on each post extends the scope and usability of the site massively, as the comments section acts as an ‘other’ opinion field.

This kind of voting/comment system could be useful for Lunacy as it will not limit people who feel negatively about a story can do more than vote it up or down.

HTML Workshop 1

Working with freeware Brackets, we successfully created a basic web page in HTML 5, which we combined with an exported ‘Processing’ file of our choosing.


Everything is inside another bracket, and inner brackets are indented for easy viewing.


The two dummy text paragraphs shown within the ‘div’ (division) brackets under the sub ‘p’ (paragraph) bracket can be seen in the live preview of the web page below.


Though somewhat easy to follow, it is easy to get lost in web design, especially as the designer in me does not want to spend time working out pixels, but the result if patient is satisfactory.