Research – Websites

Job Websites
The following 3 websites I looked at are the websites which are related to jobs for students. I looked through these websites to see what other companies have done with there web applications.

E4S: http://www.e4s.co.uk/
I looked into this website for the design aspects. It’s a basic website with all the features that we want to put into our website. The colour scheme of the website it Blue, White and green with hints of other colours, the way the website is laid out its easy to read and follow. It has all the details that the company wants you to know and how the website works, it has easy location for the login buttons and its easy to navigate

Just Student Jobs

Just Student Jobs: http://www.student-jobs.co.uk/
I liked the colour scheme for this website, I liked the way it was presented and I thought the logo was great. however it was visually appealing the shapes and the design was similar to the idea I had in mind. the colour scheme of blue grey white & black go so well together and the colours aren’t too harsh on the eyes. The layout of the website is straight forward, it also gives the option for recruiters to post their jobs on there and it gives them a price, so they aren’t shocked by what the prices are.

studentjobs

Student Job: http://www.studentjob.co.uk/
This was one of the popular websites for students to find jobs. The colour scheme for this is orange, black and white, its a good colour combination and looks professional. I like the way the website is laid out, it has a search engine as soon as you’re on the page. The nav bar is basic with an underline with what page you’re on. The homepage tells you what the current top employers are, which makes it easier for the students using the website to know what to apply to.

Net Neutrality

Net neutrality is the principle that internet providers should allow access to all content on the internet regardless of what is on there without blocking any of the content on the web pages. it preserves our rights to communicate freely over the internet.

Without net neutrality companies could carve the internet into fast and slow lanes, which means that they could potentially slow down the isp of other competitors blocking content they didnt agree with.

2435556186_1d9eaafe36

In the image above it tells us who is for Net Neutrality and those who aren’t. the people who are for it are the people who own big companies or starting there company, the ones who are against it are free market tanks, large broadband networks and special interest groups

net-neutrility

This image explains how the internet would be with and without Net Neutrality. The internet today we have ISP and we can aaccess any website and download information at the average speed no matter what website you are on. how ISPs would like to be like they want to be able to control a huge amount,block contents etc, and want a a cut from everywebsite

Tuesday 24th March – Meeting 9

Today we had completed all of the PHP to the web application. We spent today in the workshop with Kyle to help us with the small parts we didn’t understand fully, just the hide function of the message output and also hiding the job form submission until the user had logged in.

also I had been working on the log in and sign up button trying to put them on the homepage, and Mark and Luke helped me try to style it with a little bit of help from Kyle. all that’s left to do is connect the pages to the buttons so that they lead to the pages relevant.

Buttons Research – Designs

I wanted to look into the different designs for the buttons we were going to create. I looked into various designs and the coding for them to help me with how to display the buttons.

Rounded Button

login_signup button

Me and Mark looked into the round buttons, however we thought they would look quite odd as the rest of our web application didn’t have anything circular it was all just blocks and rounded squares.

Square Buttons

squre_buttons

These buttons were more of what we were looking for, however the style just didn’t seem to fit right with the look that we were going for, so it needed to be a little bit more modernized and have a great hover effect to the button.

Outlined button

official button

This design is something that we were looking for that fit into the modernized design of the web application we made.

code for the above;


<div class="container">
  <a class="button" href="#">I'm a button</a>
</div>

.button {
  display: inline-block;
  color: #5c6769;
  line-height: 50px;
  height: 50px;
  padding: 0 50px;
  outline: 5px solid rgba(255,255,255,0.15);
  text-decoration: none;
  text-shadow: 0 -1px 0 #fff;
  background: #f9f9f9; 
  background: -moz-linear-gradient(top, #f9f9f9 0%, #e5e5e5 100%);     
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e5e5e5)); 
  background: -webkit-linear-gradient(top, #f9f9f9 0%,#e5e5e5 100%); 
  background: -o-linear-gradient(top, #f9f9f9 0%,#e5e5e5 100%); 
  background: -ms-linear-gradient(top, #f9f9f9 0%,#e5e5e5 100%); 
  background: linear-gradient(to bottom, #f9f9f9 0%,#e5e5e5 100%);
  -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,0.05);
  -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,0.05);
  box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,0.05);
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  transition: all .3s linear;
}
.button:hover {
 	outline: 5px solid rgba(0,0,0,0.05); 

Monday 23rd March – Meeting 8

Today we met up to carry on with the PHP and add touches to the CSS. Me, Mark & Grace finished up on the php after making all the functions work. we needed to add in the Log in message on the every page which lets the user know they are logged in to their account ‘welcome (username), Log out’ this would also allows the user to Log out.

I had figured out the code, but Mark and Grace were helping me trying to figure out how to hide the message and Log Out until the user had logged into the account. we spent a few hours trying to figure this out however we couldn’t quite understand what to do with the code.

Luke and Mark were also working on the CSS to the rest of the web application. Ashley was doing more research but was also helping us test out the website.

Wednesday 18th March – Meeting 7

As we have been meeting up everyday, we had decided to keep the meeting on Wednesday and keep it short, just to catch up on what everyone had been doing. Me, Grace and Mark, had been getting the PHP done and as we had most of it done. The login & sign up were connected to the database & the submission job form was connecting to the database.

Luke had been working on the CSS for the contact form and contact page.

Ashley had been collecting job information and researching on job pages.

I then thought it would be easy for the sign up page to redirect to the log in page. so we spent most of the day trying to get it to work as there seemed like there was a problem that kept turning up so we constantly when through it, we also asked Kyle to check it through to see what was missing or where the code was going wrong.

Wednesday 11th March – Meeting 6

Today’s meeting we met up with the whole new group which merged between two groups. so our group was now 6 people;

    – Nibia Waheed
    – Mark Lucas
    – Luke Clarke
    – Grace Miller
    – Ashley Howatson-Tout
    – Nic Baxter

After the merge and the first meeting, we decided to go with the idea myself, Luke and Mark had come up with (Jobs4Stduents web application) as there was more done to the application to go ahead with.

Me and Grace then started on the PHP for the web application, this was so that we can finally get the back end done to the web application so that Mark and Luke can carry on with the CSS after the main part was done.

As I had done already done the sign up page PHP & CSS, Then grace had helped me do the login page which had already the CSS done to it as it was the same CSS to the sign up page.

Research – Login Pages

as I was doing the PHP for the Login Pages, i decided to look into the CSS of other login pages and see how they were set up. i looked into 3 different sites and the login pages all looked familiar with slight differences.

Google login page

loginpage1

I liked the google page for the login as it was quite straight forward and wasn’t too confusing for its users. its simplicity and the fact that the page didnt have anything else on it apart from the login form.

WordPress login

loginpage2

The same reasons as to why I liked the wordpress, the simplicity. however this gave the user the option to go back to the web tools, which meant this gave the user the option to login or go back. what I realised that on none of these forms there wasn’t an option to sign up if the user hasn’t got an account, taking into account that they must have clicked on to the login button, although the buttons are easily located on both of the websites.

WireDrive

loginpage34

I loved the way that this login page was set up. The background made the whole page a lot more interesting, I like the way the logo was used in the background not only this but it didnt have a seprate box for the login form it allowed it to be on the page and behind the form the background image is kept simple so that there isnt too much going on for the users to be distracted from what they were looking for.

Logo – Web Application

For the web application we’re making I was asked to make the logo.

logo2

This was the first design I created for Jobs4Students, it was the most simplest logo and it would be something customers would remember the logo. After I had created this logo I didn’t like the way it looked, there was a lot of room for improvement.

Screen Shot 2015-03-16 at 15.34.06

this logo was the second logo I made, it was a lot more interesting, we wanted to keep the purple scheme as we thought that it worked well, but while doing research we reaslied there were a few websites that had that colour scheme so we wanted to do something different.

Screen Shot 2015-03-23 at 14.00.36

Final design for the logo, this was the last change that we made which was the colour of the previous design. this design fitted what we wanted our website to be about. The logo design was something that customers would remember, and by using a phone/location icon it made it more modern and allowed students to know how easy it is to use the web application.