Styling the Web-App

Standard

The majority of the code had now been written and I had decided to have a play around with the CSS and styling of the site as it had been quite plain.

Amy and I found a couple of different colour schemes online (specifically the sitehttps://color.adobe.com/explore/newest/?time=all) to start off with to get some inspiration:

Screen Shot 2015-03-17 at 17.07.06Screen Shot 2015-03-17 at 17.05.45Screen Shot 2015-03-17 at 17.05.30Screen Shot 2015-03-17 at 17.05.19

We also found this tile background from http://subtlepatterns.com/ that we could potentially use. This was our background till we decided that we needed to properly style the site.

geometry2

We also had the idea of creating a “cloud theme” background so I put together a basic cloud background in Illustrator and we placed it into the site and decided that it didn’t work at all and we decided to leave the styling to the end of the project.

Screen Shot 2015-03-17 at 17.15.35

cloud backgroundJosh hadn’t contributed much towards the code so we gave him the job of styling the site. He came up with the Mary Poppins inspired logo and used purple and grey as his main colours. After changing the CSS to fit this scheme (for example changing font colour and border colours). However after changing all of these elements and uploading them to the dakar I thought that the scheme didn’t really fit our audience. We had set out to make a modern and aesthetically pleasing website as that made our site different to our competitors. I spent some time playing around with different layouts using the colour palette Josh had suggested but I thought that it didn’t really suit out site. Below is some images of all of some of the layouts I tried.

Screen Shot 2015-03-23 at 19.10.10 Screen Shot 2015-03-24 at 14.16.51 Screen Shot 2015-03-24 at 14.42.27 Screen Shot 2015-03-24 at 15.36.40

After this process I decided to completely start from scratch. I thought that we should have a dark background with some bright colours. I had a look online and found some relevant colour palettes that I could use:

In the end I found one that I liked and used it to create the banners below (found on the carousel).

greybanner1 greybanner2 greybanner3

I also decided to make a small logo for our site. As we had named this web-app Sitter Search I was trying to combine the idea of children and “finding something”. I had the idea to combine a baby rattle and a magnifying glass. I wasn’t completely happy with the result but I didn’t really have enough time to perfect it.

Screen Shot 2015-04-18 at 15.42.04

This is what the site looked like once I had adjusted the CSS and elements like the carousel images:

Screen Shot 2015-04-18 at 15.58.23

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s