Teamwork

Standard

This project was very reliant on teamwork. Amy Wichelow and I had never really done much coding before let alone PHP! This meant that we had to work together a lot to get the work done and to be able to understand what the code did.

We spent a lot of time in the labs, both working on the same computer trying to fix errors. Amy seemed to understand the PHP more than I had done so she took me through the code and helped me understand this. I did research on another elements we could add to the site like the timestamp and trying to let a user delete a post. I had some prior knowledge on HTML and CSS so I did a lot of the styling and in the end ended up designing the whole site.

Amy and I communicated a lot outside of the labs if we were trying to get some code to work. I asked for my group’s opinions of the design.

Amy and I tried to stay organised by creating to-do lists on the elements and parts of the coding we still had to do. I took charge of uploading the project to GitHub and installing the Wiki onto the server.

Overall Amy and I worked well as a team and I feel that if we did not work as well we may have not finished the project to the deadline, as we spent a lot of time together trying to fix the code. We weren’t afraid to ask Kyle if after a while of trying to fix an error we were still stuck which helped us understand PHP and PHPMyAdmin in a lot more depth.

Advertisements

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