Week 11: Day 1 of Work Experience at LIT
Week 11: Day 1 of Work Experience at LIT
Website:
Working on website this morning and it looks like this so far.
Report:
I got report bound and handed up today.
Website:
Further work on website from this morning.
Completed coding of updated website (prototype 2).
Added demonstration video links, one per each of the above cards. The on-hover overlay contains: the video title, some descriptive information and button with on-click brings the student to the website. I have added modal code here, so that the video will open in its own screen. This I think is better than adding a series of index pages, one for each video and the code and the visual effect is more dynamic, cleaner and tidier.
Design problem: to fit approximately 25 videos on a touch-screen where there is no scrolling. Design Solution: I came up with was to add a Chevron arrow and link it to another same template page layout. In this way on the 1920px x 1080px screen, they can be distributed evenly across the page. I removed the pagination from the base of page and replaced this with the chevron arrows. This represents this website better in this new format, where there is a clear Call-To-Action (CTA), that on-click of chevron arrow leads to the next page.
The first home page has one chevron arrow being page one of the video tutorials. The next page of videos has two chevrons (right-direction and left-direction). Here, the left one leads back to the home page. The right one is set to the index of its own page, so that on-click stays on the same page. This will be useful to enable simply by adding a link to a third or more video pages.
The video tutorials and the contact page are in the navigation bar. I re-adjusted the contact page to fit within the parameters of the target video screen.
I have added the titles to the blue overlays and area for adding descriptive information.
Next to add:
a. images: to represent the video content.
b. text: video title.
to the front of each of the cards.
I have made a short Camtasia video as a brief outline of the website process.
(Will bring up the microphone tomorrow to do an audio and screen-capture in sync).
In the website itself the flow of the marquee text is smoother than in the video next. Also, the screen on which it will be displayed is 1920px x 1080px. The following is a link to this video:
Kiosk Website Demo Video
Website:
Working on website this morning and it looks like this so far.
 |
| Figure 1: website video page I'm working on this morning. |
Report:
I got report bound and handed up today.
Website:
Further work on website from this morning.
Completed coding of updated website (prototype 2).
Added demonstration video links, one per each of the above cards. The on-hover overlay contains: the video title, some descriptive information and button with on-click brings the student to the website. I have added modal code here, so that the video will open in its own screen. This I think is better than adding a series of index pages, one for each video and the code and the visual effect is more dynamic, cleaner and tidier.
Design problem: to fit approximately 25 videos on a touch-screen where there is no scrolling. Design Solution: I came up with was to add a Chevron arrow and link it to another same template page layout. In this way on the 1920px x 1080px screen, they can be distributed evenly across the page. I removed the pagination from the base of page and replaced this with the chevron arrows. This represents this website better in this new format, where there is a clear Call-To-Action (CTA), that on-click of chevron arrow leads to the next page.
The first home page has one chevron arrow being page one of the video tutorials. The next page of videos has two chevrons (right-direction and left-direction). Here, the left one leads back to the home page. The right one is set to the index of its own page, so that on-click stays on the same page. This will be useful to enable simply by adding a link to a third or more video pages.
The video tutorials and the contact page are in the navigation bar. I re-adjusted the contact page to fit within the parameters of the target video screen.
 |
| Figure 2:website index.html Home Landing Page & Page 1 of video tutorials page. |
 |
| Figure 3: page two of video tutorials page. |
 |
| Figure 4: Contact details page. |
Next to add:
a. images: to represent the video content.
b. text: video title.
to the front of each of the cards.
I have made a short Camtasia video as a brief outline of the website process.
(Will bring up the microphone tomorrow to do an audio and screen-capture in sync).
In the website itself the flow of the marquee text is smoother than in the video next. Also, the screen on which it will be displayed is 1920px x 1080px. The following is a link to this video:
Kiosk Website Demo Video
Comments
Post a Comment