CAPSTONE PROJECT - DESIGN DECISIONS AND OTHER CONSIDERATIONS

COLOUR

I wanted to convey a feeling of optimism and new opportunities, so I chose a mild blue and yellow palette, reminiscent of blue skies and sunshine. The blue backgrounds are all semi-transparent shades of the same blue, overlayed upon one another to increase impact where needed, while avoiding the garish, overwhelming, appearance often caused by deeply coloured layouts.

TYPOGRAPHY

For the fonts, I avoided serifs, because I felt that these would convey a more traditional sentiment, which would be better suited to older schools than this new, modern, institution. So I opted for three sans-serif fonts. I didn't want the fonts to be narrow or tall; I wanted the letters to look wide, rounded and spacious, in order to impart a feeling of openness and approachability. For the body text, I opted for a font that is naturally a bit dark and heavy, to make it more readable against the coloured backgrounds without resorting to higher weights or sizes. Above all, I tried to choose fonts that were congruent with one another.

EFFECTS AND TRANSITIONS

I took a conservative approach to effects and transitions, because I feel that excessive use of effects can be distracting for a user whose intent is to gather information as efficiently as possible. Also, extreme effects with long durations can look overdone and amateurish, so I chose to exercise some restraint and only apply effects where they would improve the user's experience, not detract from it.

ACCESSIBILITY

I installed the NVDA screen reader application, and used it to gauge the accessibility of my webpage to vision-impaired users. I found that for the most part, the intent and content of the page is discernable to the audio user; however, I did need to add a few 'aria-labels' to elements that were not read out correctly by the screen reader. I also ensured that I used semantic tags where possible, and 'alt' attributes on every image. I still have much work to do, in order to understand and apply the WAI-ARIA specification correctly - this is an ongoing task for me.

RESPONSIVENESS

My webpage responds to five breakpoints. I discovered each breakpoint by slowly shrinking my browser's width until an element or section 'broke' or began to look unattractive. For the final (fifth) breakpoint, I've implemented the mobile solution as stipulated by the project wireframe. My responsiveness code seems more reactive than proactive, and it seems that I still have much to learn in this area.