Front-end complete

This weekend I have successfully integrated help pop up boxes into my web application. These pop up boxes when toggled over will provide the user with information on signing up, the home page, games page, contact page and score page. I have also coded back buttons to my quiz answer pages. These back buttons redirect you back to the previous page you were looking at in correlation to your web history.

As my front end is complete, from now on I plan to give my database relationships and then begin coding the back end of my project including: user login, user sign up, a time for a memory game and the score board to keep track of the users scores.

Quiz Answers

So far this week, I have developed 4 web pages that display the correct answer to the quizzes. The user can only access these pages if they are logged into the application and have completed the quiz. Also this weekend, I plan to incorporate the help-boxes into my code before I begin to add relationships to my database to begin the coding aspect to my project.

Memory Game

Using a tutorial available on Code Pen by Nate Wiley using HTML, CSS and Javascript, I integrated his code into my application. I have credited the author in the game and my plan is to add a timer to this game to keep track of how long it takes the user to complete the game and insert their time into the score table in the database.

As my front-end design is complete, my quizzes and memory game are integrated into my code, I will soon begin my back-end design. This will include the coding of user sign up, user sign in, contact form and inserting the game information into the database and display out to the user.

Reference: http://codepen.io/natewiley/pen/HBrbL

User Popup Boxes

For my web application, I decided to integrate user popup boxes. As my application will be used by an older generation, they may not be familiar with navigation or completing forms online. Using a tutorial available on: W3Schools, I developed a popup box.


My next step is to collectively adjust these popup boxes into my web application and add my developed quizzes to my design.

User Requirement Use Cases, Testing and Profiling

User Requirements - Use Cases

Testing (To be carried out at end of project) 

Functional Testing

Usability Testing 

System Testing

Load Testing

Profiling 

Other Profile Systems: http://www.smashingapps.com/2012/02/14/15-excellent-tools-for-profiling-your-websites-speed.html

Update

Over the past week, I have been using PHP code to develop quizzes for my project. With the help from a tutorial available on: https://css-tricks.com/building-a-simple-quiz/ , I found extremely easy to develop my quizzes. For questions and answers I used various websites and books called:

http://downloads.bbc.co.uk/skillswise/maths/ma15solv/quiz/ma15solv-l1-quiz.pdf

http://www.majortests.com/sat/test-results.php

http://brainden.com/logic-riddles.htm

Also in the last week, I have began the development of my database. My database has been created using PHPMyAdmin. I have constructed four tables, table 1 known as signup will store information when a user signs up to the web application, contact will store information when a user signs up to a mailing list, scores will keep track of each users game scores and will be displayed to the user and finally a login table will store information on user login details and will allow successful and unsuccessful logins. 

My next step is to merge my quizzes with my overall design and add relationships and join to tables within my database. 

Design

In the past week, I have been working on the completion of my overall HTML design. Each page has been designed with images, text and games. Upon designing my web application, I followed my wireframes I have previously developed. My next step is to convert all my HTML files into PHP files so I can add functionality to each page.

Wireframes

A wireframe is 'a skeletal 3d model in which only lines and vertices are represented'. For my project a developed several wireframes using the software Balsamiq. I developed wireframes to represent my index page, home page, sign up page, what my game pages will look like and how the scores will be displayed. Once I completed my wireframes using Balsamiq, I used another software known as Mockplus. Mockplus is a piece of software that allows you to develop more realistic mockups. I have chosen to design my wireframes in both Balsamiq and Mockplus to show a representation of how each web page will look and to keep a more realistic output to my wireframes.

Index- Balsamiq

Index- Mock Plus 

Sign Up- Balsamiq 

Sign Up- Mock Plus 

Home- Balsamiq

Home- Mock Plus 

Contact- Balsamiq

Contact - Mock Plus

Games- Balsamiq

Games- Mock Plus

Sitemap- Balsamiq

Sitemap- Mock Plus 

Memory Game- Balsamiq

Memory Game- Mock Plus

Quiz- Balsamiq

Quiz- Mock Plus

Score- Balsamiq

Score- Mock Plus

Project Moodboards

For my project I also developed mood boards. A mood board is 'an arrangement of images, materials, pieces of text, intended to evoke a particular style or concept for a project.' The mood boards I have develop show a representation of the overall website, its target audience and what the website will incorporate. The second mood board shows the colour scheme and fonts chosen for the application.

Navigation bar design

For my web application I have developed and designed my navigation bar. I have used a light shade of blue known as devastating loss on colourlovers.com. Below are screens of my navigation bar and its responsiveness. The first image shows what the overall navigation bar looks like when you enter the web application with the incorporation of the logo I designed. The second, third and fourth image displays drop down lists that become active when a user hovers over them. Theses dropdown lists also are a darker shade to the navigation bar to allow users be familiar with what section of the website they are about to manoeuvre to.

Colour Components and Logo for web application

After careful research of my main competitors, my next step was to choose my colour scheme and logo for my web application. The colour scheme I have chosen is called 'Devastating loss' and is available on colourlovers.com 

This palette is primarily built up using various shades of blue

Psychology of the colour blue
Colour Psychology is how a colour influences the behaviour of the user.  In a survey conducted by kissmetrics.com  the colour blue was chosen as a users favourite colour from both males and females. Purples, greens and blacks were the next most popular colours. The least popular colours chosen were: orange, brown and greys.

The colour blue is the greatest used colour on website as it develops the trust within users. The meaning behind the colour is trust, peace and confidence. Blue is traditional and anticipated colour, globally liked because of its distinguished meaning in comparison to to other colours.

Logo Design
Using the software Adobe Illustrator and Abode Photoshop I decided to design various logos for my web application. I tested out the use of different colours, images and font faces. I thought to keep my web application simplistic that I would design a simplistic logo. Using various names I thought would be suitable I began to design logos. The logo I have chosen is the Agile Ageing logo as I believe it works well with the layout I have planned to develop and its simplicity.