Eileen Fitzgerald School of Speech & Drama
The Making of my First Website
This website was for a drama school that I attended in my youth. Knowing
the client beforehand and the school itself was important in understanding how the company worked
and the values it wanted to incorporate into the website. Aimed at parents and children ranging from
5 - 20 years of age, we wanted to create a website that was dramatic and fun to the eye and
appealling to
potential students of the school.
The client has an extremely impressive reputation in the area and so attracting
business
wasn't their main use of the website. The primary role of the website was to be source for
information on the school and to have a "home-base" on the internet.
At the
time of
building this website, I had been revising HTML, CSS and Javascript for 6 months through various
online resources.
Notes Upon Reflection
The black background- a big no-no for UX!
Although I had known the rule to never use the "real" black, (#000000), I still went ahead and used a shade of black for the backdrop of the content website-wide, breaking a principle of UX regarding readability. This was a discussion I had between myself and the client, and some feedback we received. It was something the client really liked and wanted to keep given the "dramatic" feel it contributed, and so we went against popular opinion and kept it anyway.
Hosting on Github Pages
Hosting on Github Pages at the time was ideal for me as I entered the world of the web. It allowed a sufficient level of security given that no sensitive data was being dealt with throughout the website, as well as enough bandwidth to manage the traffic that I could estimate from their Facebook page statistics.
The Process
Functional Requirements
- Defining the purpose of the website and what it should be used for
- Look at target audience and what they need from the website
- Define the flow between pages and information to be displayed
Branding
- Discuss overall desire of look and feel of website
- Outline the primary and secondary brand colours
- Look at examples of other websites in the industry
Prototyping
- Produce a first draft on Figma
- Look for and decide on the best UI framework for the website
- Gather feedback on the layout and design
Building the Website
- Coding the prototype into a fully functional website
- Github private repository is established and shared with the client for transparency and progress
- Feedback and communication is frequent so changes and ideas can be made early on in the process
Testing
- Client is invited to test out the website and share with a select few to gain further insight and UX feedback
- Cross-device and cross-browser testing is carried out to ensure compatibility and optimisation
- Performance testing is completed to ensure that loading times are efficient and that media materials are optimised
SEO
- Keywords are strategically placed throughout the website using font styles and high-ranking heading tags
- Title, description and keyword metadata is filled out appropriately
- Linking the webpage to the company Facebook and Instagram pages for greater credibility
Hosting & Security
- Client wanted an inexpensive hosting option and I chose Github Pages given how local the company was based and the estimated traffic
- Domain name was secured and set up on Github Pages
- Use of HTTPS through Github Pages to ensure better security and encryption
Post Launch
- Google Analytics is inserted into the website to track user activity and gain further insight if needed
- Further feedback may be given should any unexpected behaviour occur
- Content and media updates are welcomed whenever necessary to help the SEO and, of course, the users of the website!