Blog 10_ Project Semester 2

FYP Project                    K00121609            Week 5 College January 2017

Blog 10:

Updated Gantt Chart:

Here is an Excel version of the Gantt Chart I have been using to monitor my progress. Currently I am Task 6 and am writing up the Presentation:

• For the user profile, I started this at the proposal stage, developed this into the research phase and furthered this for the current presentations step.
• I put together a mood-board for design inspiration from ideas and research.
• I created a navigation map diagram which shows the hierarchy of pages and for each of these there is functioning.
• I made detailed wireframes using Adobe Illustrator to combine and show how the design and wireframes work together.
• For knowledge of subject matter I have been reading over the notes and the research project.

Navigation Diagram:

This is the Navigation Diagram. Here I have set out a navigation map that shows the links between pages in terms of their functionality. There is a classification of the pages denoted using a hierarchy table and coloring system navigation keys. 

• Legend = green
• Landing/ Home Page = orange
• Forms = grey
• Main pages = blue
• Sub-pages = lilac
• About & Social Media = brown

Wireframes and Design:

• Landing Page
• Create Your Life Tracker Page
• Life Management in Media and Society Page
• Activities in <5 Minutes Page
• Seasonal Newsletter Page
• Newsletter Contribution Page

• Log In Form
• Sign Up Form
• Contact Us Form
• Newsletter Contribution Form

• About Page
• Social Media Links

Part A: Landing/ Home Page: 

Here I have to adjust the star images to the shape of the dark blue curve. There is a login / sign up, user contribution area, slider of inspiring images, a seasonal newsletter quote of the day, day/time/calendar widgets and social media bar. The slightly different layout of stars, owl and social media bar elements in the landing page and their consistent layout in all the subsequent pages defines the landing page as the source page and linked to the following pages. There are the standard title, navigation, site-map, footer details, search icon, and a color and font scheme.

Part B: Main Pages:

The features shared in Main Pages that link them together are:
a. Standard features: title, sub-title, colour scheme, font selection, navigation bar, site map, search icon and footer details. 
b. Other features: social media bar docked to the right of screen, today's quote, date/ time widget, google locator, novelty animation, images and text floating marquees.

Tracker Page

• Guide to About this Page
• information and trends in:
• Life Trackers
• Diaries
• Mindfulness
• An Excel Tutorial - to male your own trackers
• Sample trackers to get you started

Life Management Media and Society Page

• Guide to About this Page
• Information on Life Management (LM)  discussions on:
• L.M. Images
• L.M. Sound
• L.M. Podcasts
• L.M. Videos
• A windows media player used to display a L.M. relevant video

Activities to do in < 5 minutes Page

This consists of a page with 3 main buttons that link the user to an activity type. There is a sample given of each of these to introduce the viewer as to what to expect from the application. These three categories of activity are:

• Complete the quote topic
• Novelty sums to make you happy
• Watch some relaxing animations

Newsletter Contribution Page

This is an interactive page where the user can experience a direct connection with the website by making their own contribution to a Seasonal Newsletter. The user can Log In directly from the Landing Page to this contribution area. The page includes:

• Name and email address and date
• A text area to writ up their contribution
• A send, discard and save button

Part C: Forms: 

There are three forms in this project for access to the website: Log In, Sign Up, Login / Sign Up to contribute to Seasonal Newsletter.

Log in Page

Sign Up Page

Contribute to Newsletter Form (Log In / Sign Up)

Design Elements:

• Owl icon for knowledge
• Color scheme: light blue for the background page, dark blue for the top of page banner, black, blue and white stars in the sky for the top banner in landing page and right side panel in all subsequent pages. white font for headings and sub-headings, black font for content.
• All the page layouts are similar in that the upper star banner on the home page defines it as different yet closely linked to the next pages.
• Within these, the central area varies according to the particular topic.
• For the forms I included a 'film strip' image to link to the notion that designing your day and life management is about living the film and that's what they are signing up for.
• A geometric layout that is softened with the navy curve at the top of screen and the detail in the stars panel.

Creative Multimedia for this project:

HTML, CSS, JAVA, PHP, SQL

Random Quote Generator, Switch Statements

Windows Media Player – images, podcasts, sound, videos

Images, image sliders and transitions, animations

Pen and paper drawings

Project Management

Excel Tutorial

Future development: discussion forum.

Technical Components of Project:

Landing Page: Images on a transition slider (image sources and programming for this), link to user contribution area (link to programmed and styled form), title, navigation bar, site-map, login / sign up (link to database here using SQL), day/time/calendar widgets, icon, quote (random quote generator).

All Other Pages: title, navigation bar, site-map, login / sign up (link to database here using SQL), day/time/calendar widgets, icon, quote (random quote generator and switch statement), google locator, novelty animation, floating marquees, social media bar, copyright, privacy and terms and conditions, (coding and formatting for these).

Forms: Login, Sign Up, login / sign up for user contribution area access (html and css programming and link to database using SQL).

Newsletter contribution Page: name, email, address, textarea, send, discard, save (link to database using SQL).

Newsletter Page: accessed by login / sign up (html and css programming and link to database using SQL).

Activities in < 5 minutes: 3 options: Complete the quote topic; Novelty sums to make you happy; Watch some relaxing animations. (All kinds of programming here, HTML, CSS, JAVA, Jquery, PHP, Flash etc.)

Create Your Life Trackers: Guide about the page, Information and Trends (Life Trackers, Diaries, Mindfulness), Excel Tutorial – to make your own Trackers, Sample Trackers to get you started. (Programming here includes use of Excel, Multimedia tutorial software, html for charts and tables, css for styling and other functional uses.)

Life Management Media and Society Page: guide about this page, Information on Life Management in Society, Windows media player Life Management relevant video (changes with updated information in the media), images & sound & podcasts & videos for discussions on these. Future development of this part of the website as a discussion forum.

Coding:

I have been doing a lot of research on coding online for animations, widgets and more.