Proposed Project Brief

Week 1  Work Placement Creative Multimedia Programming   Term 3   2017

I am interested in working in IT research which is why I approached this Work Experience from the point of view of a Research Project and presenting my findings in an e-learning tutorial. The research area I am interested in is Adaptive/Responsive Web Design. In terms of learning new software I have proposed the e-learning software of ATOMI Active Presenter. This is also SCORM compliant and in this way would link in well with LIT use of Moodle. For the design side of this course I am putting forward the idea of creating artistic posters about current topics in society.

As there is a lot of gray areas of uncertainty associated with RWD and AWD, I thought it a relevant and useful area to explore. I came across the ATOMI software and signed up for the Student Professional version, as I decided it would be an area I would like to learn about in the future for benefit of my career. I decided that this is something I could propose to learn about and use in the Work Placement module as E-Learning has become a popular platform for study in recent years.

Have been communicating with course co-coordinator. Instruction to prepare draft brief of proposed project.

9th, 10th, 11th June:
I put together an overall outline content layout of what the RWD/AWD study.

I read through the main parts of ATOMI Active Presenter Handbook, to gain an idea of the topics and layout of the software. I prepared a summary of key points for the draft brief.

I outlined the Art and Design blog/website.
________________________________________________________________________________

This brief is as follows:
Page 1:

Student Name: Sinéad Boyce

Student Number: K00121609

Course: H. Dip in Computing in Creative and Multimedia Programming

Draft of Proposed Project Brief

June 2017

Page 2:

Overview:

In the workplace in front-end-design, people may be assigned to different types of projects. In this draft brief, I have looked at encapsulating my three main interests in the subject of Creative Multimedia as: technical, e-learning, art and design. The draft brief is organised into these three sections.

·        Technical: a study on Responsive/Adaptive Web Design.

·        E-Learning: learning and use of ATOMI Active Presenter software to create a tutorial and quiz based on Responsive and Adaptive Web Design.

·        Art and Design: to create a Responsive/Adaptive Blog or Website, linked to social media, consisting of poster-like compositions and artwork, storytelling and relaying of messages.

The following is a word-cloud I put together of some key text in this brief:

Page 3:

Index

Title                                                                                                                                  Page

Cover Page                                                                                                                      1

Overview                                                                                                                          2

Index                                                                                                                                 3

Technical: A) “A Study in Responsive/Adaptive Design”                                        4-7

      Part 1: Introduction                                                                                                   4

      Part 2: Responsive and Adaptive Design                                                               4-5

      Part 3: A Focus on Responsive Web Design                                                          5-6

      Part 4: Responsive Web Design Patterns                                                               6

      Part 5: Responsive Web Design and Accessibility                                                6

      Part 6: Responsive Web Design and SEO                                                               7

      Part 7: Responsive Web Design and Current Typical Topics and Conversations  7

E-Learning: B) “e-Learning Tutorial using ATOMI Software”                                8-10

      Objectives                                                                                                                  8

      Details                                                                                                                        8

      Planning                                                                                                                     8

Editing                                                                                                                        8-9

Recording Equipment                                                                                              9

Interactivity                                                                                                                9

Screenshots of ATOMI toolbar's                                                                            9

Screenshots of ATOMI functionality                                                                     10

                                               

Art and Design: C) “Creation of an Artistic Blog/Website using RWD”                11

      Objectives                                                                                                                   11

      Ideas and images                                                                                                      11

Page 4:

A) Title: A Study in Responsive/Adaptive Design.

Part 1: Introduction:

Why build a Design System?

Web Design Trends 2017?

Objective: to research and put together a study about Responsive/Adaptive Design, that is relevant, up-to-date and useful.

Part 2: Responsive and Adaptive Web Design:

Definitions: differences and similarities between them as two alternatives in front-end development in building a modern website with maximum efficiency and organisation.

Origins/history: timeline infographic.

Pro’s & Con’s.

Responsive Web Design (RWD).

Adaptive Web Design (AWD).

In relation to Front-end design, their application relevance in terms of:

Past state -> Current state -> Future state.

Use Statistics.

Their contribution and role in design particularly UX Design.

Different screen size applications.

Adaptive Design: (device specific design), show how it works/implementation, in programming code examples, explain about break-points.

Responsive Design: (one-size-fits-all approach), show how it works/implementation, in programming code examples, front-end workflow, application of fundamental concepts, explain about %’s set to elements/objects and how to use them in HTML5.

Look at use of:

·        Sass, Note, Gulp, Autoprefix.

·        BEM Methodology.

·        Creating a Responsive Grid System.

Considerations:

·        Audience.

·        UX.

·        UI.

·        Screen-sizes/Appropriate devices.

·        Accessibility.

·        Labour investment.

·        Role of effective advertisement display.

Part 3: A Focus on Responsive Web Design:

Introduction: in this section I will focus on Responsive Web Design while also making reference to Adaptive Web Design for comparison purposes.

Schools of thought within Responsive Design.

Front-end frameworks (or CSS Frameworks): CSS source code for positioning of different elements making up the design, CSS classes for styling advanced components of the interface, typography style definitions for HTML elements, browser incompatibility solutions.

Devices you need to support in using RWD: e.g. computers, mobile phones, tablets, wearables.

Design and Coding for RWD: e.g. media types, queries, mobile first, the viewport Meta Element.

-RWD Grid systems: flexbox, CSS grid layout, using frameworks to simplify grid development e.g. using Bootstrap, golden-ratio in design.

-RWD text: adjusting their typography properties in CSS, fixed and relative sizing.

-RWD images and video: dimensions, suitable images for different devices, picture element, video element.

-Responding to a User Context: API’s, time based, geolocation, ambient light, device orientation.

Considerations:

Site speed, responsive can be slower than adaptive. Improved if elements are optimised.

Objective that the site fits all screens that access it. Also, importantly, that the design must be usable at all screen resolutions and sizes.

Attention to the visual hierarchy of the design as with responsive design the screen shuffles its content around to fluidly fill the device window. Composition in artwork and photographs is a long-standing field of study where many of its theories continue into web design.

A significant advantage of responsive design is that when complete site maintenance takes less time as would an adaptive design where the developer would have to maintain separate HTML and CSS codes for each layout.

Popularity:

RWD loses in the battle for load times by comparison with AWD, as in this test of a website designed using AWD and same website designed using RWD, carried out by “Catchpoint”:

However, this can be overcome using media queries.

RWD wins over AWD due to being the best solution currently on the market to the heavy maintenance that AWD demands. This leaves room for improvements to emerge in both areas of RWD and AWD. Which will win out? Only the future will tell.

Part 4: Responsive Web Design Patterns:

This section contains Sources and Examples of Web Design Patterns. As an example, this following link is to a collection of pre-defined RWD patterns: http://bradfrost.github.io/this-is-responsive/patterns.html

Here the main topics are shown in bold font and the sub-topics listed. In the website for each of these topics there are layout examples with corresponding programming code.

Layout: re-flowing layouts, equal width, off canvas, source-order shift, lists, grid block.

Navigation: single-level, multi-level, breadcrumbs, pagination.

Images: responsive image techniques such as: basic fluid image, picture element, screen-set resolution switching, art direction.

Media/Data: video, iframes, tables, charts and graphs.

Forms: basic forms including: fluid search forms, search with filters.

Text: lettering, footnotes.

Modules: carousel, tabs, accordion, messaging, lightbox.

More specific categories of use from other website sources include: fluid layouts, mobile first, responsive, variable columns, nestable, fixed gutters.

Part 5: Responsive Web Design and Accessibility:

Issues of accessibility in Web Design, standards, current thinking, future requirements to look at.

Part 6: Responsive Web Design and SEO:

A well-structured page is very important for responsive design, and helps with accessibility and SEO.

Google Analytics detection methods for good RWD and instructions for RWD for SEO.

Part 7: Responsive Web Design and Current Typical Topics and Conversations:

These would be derived from sources such as: blogs, websites, tutorials, community forum discussions and commentary associated with blogs/websites/tutorials.

Example: Blogs like the following on related relevant topics for responsive design on “aspect-ratios”:

https://css-tricks.com/aspect-ratio-boxes/?ref=webdesignernews.com

B) e-Learning Tutorial using ATOMI software.

Objectives:

·        To learn how to use the e-learning Atomi Active Presenter Software.

·        To compile a tutorial/quiz on my findings from the Responsive/Adaptive Design study using Atomi Active Presenter Software.

·        This would be an original aspect to this draft brief.

Details:

The edition of Active Presenter I have is the Professional Edition. Main uses of this are:

·        Demo videos.

·        Documentation.

·        Interactive Training, with score-management.

·        This is as a Learning Management System (LMS).

These can be ‘Exported’ to: Images, Video, M.S. Word, Excel, PowerPoint, PDF, HTML Slide Show, HTML5 Simulation, SCORM 1.2, SCORM 2004, Tin Can API.

Planning:

Exploration and decisions on type of presentation and target audience.

Decision on some possible outcomes of deliverable project I want to create:

·        Video: presentation, group training, demo.

·        HTML5 Simulation: Interactive e-learning content with branching, quiz, score etc

·        PDF, Word: Brochure, handout for a lecture/exhibition.

Preparation of an Outline and Storyboard.

Top-level topics->sub-topics->and so on in that hierarchy.

Identify content and sources.

Content Creation.

Editing Process:

·        Project-level editing: adding and organising the slides.

·        Slide-level editing: fine-tuning of each slide e.g. insert objects (shapes, text, interactions, video clip, audio clip, highlight, closed captions, etc.), and add voice over (commentary). Adjust properties of each object on the canvas and properties pane e.g. language, description, canvas size, durations, background-colour. Timeline adjustments (timings of entry and exits, milliseconds, and sequence manipulation of slides).

·        Advanced editing:  

o   Making the project interactive:  involves inserting questions, adding actions that deal with correct and incorrect responses from viewer.

o   Making the project accessible: for different user types, e.g. visually impaired (perception, understanding, navigation and interaction), text appears or reads aloud using: autolabel, name and description.

Alignment, z-order, working with layers, transition effects, voice-over, sound-track.

Adding navigational elements such as mouse-click interactions, hotkeys can be inserted using key-stroke interactions.

Selecting and setting up of recording equipment: very good microphone required (high sensitivity figures), USB microphone rather than analog record best and use less computer resources, stable base, wind shield. Keep microphone away from keyboard and from nose and mouth.

Add background sound-track separately-to adjust its relative volume precisely.

Interactivity: vast scope for adding interactivity using objects and events to enhance the user experience. Actual interactions are set up using an Event Editor e.g. on-mouse-click triggers and event, e.g. drag-and-drop for quiz questions and answers, of images/text etc. Use of timelines for duration setting. Reports can be exported to HTML5 Simulation, M.S. PowerPoint Presentation, M.S. Excel Worksheet, M.S. Word document.

The following are screenshots of some of the ATOMI toolbar's:

·        “Annotation” toolbar:

·        “Interaction” toolbar:

·        “Export” toolbar:

The following are screenshots from the ATOMI Active Presenter website as indicators of its functionality:

C) Creation of an Artistic Blog/Website using RWD.

Objectives:

·        Blog/Website featuring poster-like compositions with a new message for every day of the week.

·        Here, I would use my own photographs and quotes from literature and poetry as well as my own quotes.

·        Software I would use are: Adobe Illustrator, Adobe Photoshop, Paint, Toonytool.com.

·        This would also be an original aspect to this brief.

The following is an example of an idea:

Also, I have an idea of designing and drawing out characters and meme text, to display story-telling of important issues in society, and to combine these into a series of cartoons each leading onto the next and depicting a part of the story with messages.