Week 7: Day 4 of Work Experience at LIT

Week 7
Day 4 of Work Experience at LIT

Reviewed yesterdays work and the plan for today is to work on the Kiosk Website.

Kiosk Website:
I have been developing the "Contact page" today. Here, I added content of contact details. Also I made an animated GIF that consists of rotating images. These images related to the helpdesk kiosk and add life to the page. I set the: image order; image/canvas sizing; timing; duration on an infinite loop, and placed in the HTML page with CSS for the placement.

I added the "freshservice" as an image I took a screen of from the official LIT website. Then I used an anchor tag with its web address as a live link, coding the image and the link together. Then I placed it on the page by inputting margin settings into the CSS stylesheet.

Infographic:
This is a screen of an infographic summary from an email I received today from the "dotmailer Team," on key elements of a successful email:

________________________________________________________________________

Kiosk Website contd.:

Rotating images:

 

index8.html, CSD Contact Page designed today:

About this Contact page:

On-click of the "freshservice" Helpdesk Customer Service Portal icon above, brings the user to this part of the LIT website.

To base of screen is a table I coded in HTML and CSS of the "Opening Times" for CSD. This highlights each row in light-gray, as the user hovers over the table.

Image to the center is an animated GIF I made, of which images rotate.

There is navigation at the top in the black bar. There is also pagination navigation from pages 1-8 at base of screen. All navigation works.

The blue text "Produced by Computer Services Department, LIT," is coded as a "marquee," where it moves from right to left of screen continuously.

In the footer, there is a "Sign-up" section, for users to sign up to the "CSD Helpdesk monthly Newsletter," which will start this next September term. Also, in the footer is the Copyright.

Design:

I put a clear title heading to introduce the page, where the rest of the page flows in a triangular format from this.

I planned a tri-columnar layout for the middle of page, to which I added a strong base to visually support the middle content, in particular the GIF, which is a dynamic changing element. 

There is restful visual white space, at the top of the middle section of page. On view statically as above, I would consider adding another element to here. However, it works with more balance when viewed as a working website, in the layout as it is: where the restful white space is a balance element, with the moving GIF. 

_______________________________________________________________________

Next Page for Kiosk Website to design is Frequently Asked Questions (FAQ's):

I have started this this evening with putting the structure and coding in place for this type of page. The page is organised as a list of "Questions and Answers by Topic". On-click of the "Question goes here" text, the answer appears as a drop-down, from the question. I have started the CSS styling on this also. In this next image, the first Question text has been clicked and has a corresponding answer placeholder.