IV. PDF Documents. There are several PDF Documents on this website. Some of these are scalable because of their adaptability while others are a one off.
Note that the Module #1 PFT Assessment Sheets contain a company logo, layout of pre-existing content along with CE Images and proper footer accompanied by documentation. This type of document requires several consultation and revision sessions among the content developer and the graphic designer.
Note: Your version of your own document to record assessment feedback to your trainee in your field of expertise must be written first and designed last. This is the best way to go about it. To me at any rate.
A page can be laid out when all of the CE's have been uploaded to the website.
5. Graphic Designer, web developer and content developer meet to discuss page layout. Note how the names of the lessons, the numbering of reps/checkpoint/assessment and name and title of module have already been decided. In addition, there is a logo mark on the page.
6. The following pages need to be arranged first in order to begin testing content against website short code architecture (i.e. make the pages jump to the correct course for that particular student etc...)
- Top page
- Intermediate Student Start Page
- Start Here Page
- Lesson Page Template
- Gravity Form Question/Explanation Video Page
- Gravity Form Rep
- Gravity Form Checkpoint
- Gravity Form Assessment
- Gravity Form Feedback Flags
- Gravity Form Confirmation Page
- Gravity Form Notification
- Teacher Notes Start Page
- Teacher Notes
- Request Feedback
- Live Class Checklist
- My Notebook
All RC Images must be completed before the above pages are laid out. This is necessary because the CE Images depend on this including feedback flags, teacher marks, student teacher desk image and under construction image.
III. Page Layout. Page layout is considered a service. However, it requires a collaboration among the web developer, graphic designer and content developer.
The screenshot above is the Module #1 Train Page. Page Layout includes the location of clickable buttons, coordination of button colors with background colors (i.e right side navigation). There are other factors as well. I have elaborated on these in the manual that was given to Jogo.
The process going forward begins like this then.
1. Consultation among the graphic designer, content developer (Chief or delegates the Chief) and web developer. All agree generally on a concept and direction.
2. Graphic designer creates RC Guide Icons. Several meetings, phone calls, emails and text messages later the Chief signs off.
3. Graphic designer, content developer (Chief or delegates the Chief) and web developer meet again and plan the direction of the Type Two CE Images.
4. Graphic Designer creates CE Images. Several meetings, phone calls, emails and text messages later the Chief signs off.
By this time the web developer will have the wire frame of the website up and tested with the pages ready to be laid out.
D. Clickable Pastel CE Images. Some CE Images are more easily generated than others. The banners above follow a set pattern established by the graphic designer. Clickable Pastel CE Images require considerably more attention as they must be drawn to fit within one specific visual context (i.e. PFSchool Path).
We now distinguish two types of CE Images. Type One CE Images and Type Two CE Images.
Type 1 CE Images
These are extended concepts which require one round of consultation and revision during the process of creation through multiple item generation. These include
- Standard Buttons (Big and Small)
- Long Buttons (no picture)
- Icon without words
- Navigation Bar Buttons (With and without words)
Type 2 CE Images
These are extended concepts which require several rounds of consultation and revision during the process of creation through generation of a single item. This includes:
- Company Page Diagram
- I Need Help Page Equilibrium Diagrams
- Navigation Bar Concept
- Standard Button Concept
- Banner Concept
- Pastel Clickable teacher marks
C. Banner CE Images. These CE Images are found on the top of every page at the website. They are almost always pushed down upon by the navigation bar. Examples include
The corresponding RC Images that precede the construction of the 2nd and 3rd Banner CE Images are
Once RC Images are created, banners are generated with relative simplicity.
Thus, the RC images must be drawn first and then immediately extended to fit on the PFSchool path. This can be done in one shot since you know the maximum in s2 Member is Level 4. As a result you know how many pictures the graphic designer needs to draw and extend immediately (4).
B. Standard Button CE Images. The screenshot shows the random user homeroom landing page for students and teachers.
The Standard Button CE Images are
Some are used here again on the Sign Up Landing page (the penultimate page in the registration funnel).
The Standard Button CE Image can vary but note that the color in the longer button above is the same as the other Standard Button CE representing the same visual function.
In the screenshot below, there is a mix of RC Image (The Picture at the Top), CE Table (The table containing the already created teacher marks) and Standard Button CE Image (the big Register Button at the bottom).
This is the page leading from the White Flag on the PFSchool Path.
The RC Images in the grid are
Notice how they are distinguished from the Clickable Pastel CE Images, which are found on the PFSchool Path.
A. Navigation Bar CE Images. Once the RC Images have been established and signed off on as a set, banner and navigation Bar CE Images are generated in close communication with the web architect (the links have to go to the correct places and so those pages must exist with their own banners and navigation bar.
The process is as follows:
The graphic designer receives a concept plan.
The Chief and the graphic designer communicate by phone, email face or to face with the graphic designer creating the whole set in one shot.
The navigation bar shows the set of Navigation CE Images without words under them. Another set was created on top of this one.
II. A concept extension image must have a reason for being there. In other words, it must serve a purpose. These functions are given priority when determining whether or not a concept extension image or a set need be created at all in the first place.
- link to a relevant page
- assist with page orientation
- organize pages into sections
- strengthen branding
The screenshot above is the PFSchool Path. There are two RC images (Nico the Cat and the map itself).
The CE Images on this page include the following.
Navigation Button CE Images
Standard Button CE Images
Banner CE Images
Clickable Pastel CE Images
I. The Raw Concept (RC) is the product of an agreement among the content developer, web developer and graphic designer pertaining to the overall direction of the website as it meets the aims of the company/mission statement.
The PFT website aims to facilitate relationships among teachers, students and business. Therefore, the design must be accessible to an eclectic audience (i.e. gender, age, income bracket etc). This requires consultation, experimentation, adjustment, revision, and the final decision.
There are other factors that also affect the RC. The RC guide icons must be adaptable in the sense that they must be extended into several functional visual representations (i.e. navigation buttons, icons with no words, big buttons etc.). The RC must also consider the number of items in the finite set. When a fixed number of icons is identified at the beginning of the project, decisions about color range, style and texture can be made.
The screenshot above is the Module #1 Start Page. On this page there are 5 RC images:
The Module #1 Start Page also has three concept extension images (CE). They are as follows:
The purpose of this document is to give an idea of how the graphic design tasks on the PFT website can be broken down and costed out for the project lead (Chief). Appendix 1 provides a categorized list of items on the PFT website.
This makes project management easier for you should you choose to build a website on a PFT Framework in any field of your choice. I chose language as the field to display the PFT learning system within. It could have just as easily been ice hockey I suppose. Gotta save something for later though right?