Bram Stoker
Website Intro
Abraham Stoker was an Irish novel writer and a theatre manager, he was the creator of the fantasy novel Dracula as you probably already know or read it on my website (link below). The website aims to educate and offer an introduction into the life of Bram Stoker and his masterpiece creation novel, Dracula. The website also serves as a promotion to Bram Stoker Festival which is celebrated every year in Dublin, Ireland on Halloween. The festival is largely organized by Dublin City Council.
The website is live on Github Pages Linked Here
Index
Personal Set Goals
Before starting the project I have set a number of set goals with the purpose of learning.
-
The website was built entirely by myself, I didn't use the love running as a template, and only followed instructions from the course walkthrough. Doing it this way, served as a very good practice for me to learn html/css:
- I planned, to overcomplicate things and learn how to simplify and debug them.
- I planned, to introduce a greater amount of content.
- I planned, to make a greater amount of content accessible.
- I planned, a side navigation bar for larger tablets and desktop size screens.
- I planned, to have the navigation bar appear on top for small devices (mobile phones, smaller tablets).
- I planned, wireframes
- I planned, the Landing page to have an introductive summary with links for people who want a deeper understanding.
- I planned, the Career page to express general life works and most notable works.
- I planned, the Festival page to make the user feel well informed and comfortable about the event.
- I planned, the Contact page to be about the site author, website purpose, and offer credits to the picture authors.
UX Design
The UXD was made taking into consideration "The Five plans" presented in the course.
The Strategy and the Scope Plane
- Taking culture into consideration I decided to use an Irish relevant subject:
- Bram Stoker was one of the most renowned Irish novelists and I think he does not get enough appreciation.
- An undersaturated product has better chances of selling.
- Also taking into consideration culture since I am Romanian I grew up with stories about Dracula who Bram Stoker has made popular worldwide with inspiration from Romanian culture.
- This had a good impact on me as a beginner for research purposes because the subject matters to me.
- Promoting a local culture product will have a greater impact and thus increase chances of selling the product.
- Bram Stoker was one of the most renowned Irish novelists and I think he does not get enough appreciation.
Target Audience
- Users that are fans of Bram Stoker's writings.
- Users that are fans of fantasy novels.
- Users that are fans of vampire stories.
- Users that have an interest in festivals and outdoor events.
- Users that live in Dublin and Ireland.
- Users that plan to take a trip to Dublin on Halloween or are tourists.
- Users that maybe are not accustomed to who created Dracula.
The Structure Plane
User Accessibility
- As a user, I want the design to be eye-catchy.
- As a user, I want the information to be easy accessed.
- As a user, I want the content of the webpage to be meaningful.
- As a user, I want the content not to be overwhelming.
- As a user, I want the content to have a balance between pictures and text content.
- As a user, I want to have a way to get in touch with the website author and event organizers for feedback or troubleshoot contact.
- As an event organizer, I want the user to be well informed.
- As an event organizer, I want to promote our social media channels.
Website Accomplishments
- The website provides, a summary of Bram Stoker's biography and career.
- The website provides, useful links about Bram Stoker's life and most notable works.
- The website provides, links to the image's original location to offer a full-size view and thank the authors.
- The website provides, meaningful information about the festival with pictures, videos, and means of contact with the event organizers.
- The website provides, an all-time present navigation bar to make navigation of content easy to find.
- The website provides, a newsletter system for users to subscribe and receive the latest news.
UI Design
Taking into consideration the "Five Planes" I have used the "Skeleton Plane" and the "Surface Plane" to make the UI design.
Wireframes
To follow a pattern and make my life easier before I engaged in creating the website, first I drew wireframes using draw.io. I made two sets of wireframes, a top part, and a bottom part because if I were to present these sketches to someone else, they would not know where most of the content resides.
-
Desktop wireframes:
-
Mobile phones and small tablets:
After I learned more practical use of HTML/CSS, I decided to make some modifications to the initial wireframes to offer a clearer view into the background image by moving down and off the screen the initial content containers and replace them with a call to action indicator in the bottom part of the screen.
I also learned how to make the aside container display alone on the screen on the initial page load to include it better in the theme along with the background-image.
- New and final wireframe versions:
Common Features
Colors
- For the colors used on the website, I decided to use variations of dark-red to pink-white on the background of snippets. Black for general content text with orange for links. Pure white for snippets and general content text background.
- As I learned the use CSS better, I decided that I can combine the red color variations in a gradient nice look and feel.
- In the earlier versions of the website I tried to use pure white text over a pure black or reduced opacity background but the look and feel were not satisfying.
- I used the a11y color validator to make sure the contrast is not out of balance.
Navigation bar
- The navigation bar appears on all 6 pages (including dracula_story.html and contact_feedback.html).
- Contains links to Biography, Career, Festival, and About page to facilitate navigation within the website.
- It is fixed to the left side on desktops and larger tablet devices and at the top on mobile phones and smaller tablets, and this way eliminates the need for a "scroll back to top button".
- Each of the four buttons has an animation on hover, fade in and fade out.
- Once a button is pressed will fill in the animation to mark the current page the user is exploring.
- Navigation bar has dark a red image to fit into the vampire theme.
Call to action
- On all pages there is a call to action indicator designed to get the attention of the user to take action in scrolling down.
- The indicator is comprised of two symbols (up and down) at the top and bottom with the message "Scroll to read more" between the symbols.
- It has an infinite animation scaling in and out 20%.
Right side sections
- On all pages, on the right side, a section related to the current page's content can be found.
- Its purpose is to complement every page's theme.
- It has a title, text content, and pictures.
- Shadows around the edges give it a 3D appearance and make it stand out.
Main sections
- On all pages, the article content is delivered in structured sections.
- Each section has a title, paragraphs, and pictures with relevant content.
- Each paragraph and picture sits on a red gradient wall board attached to a white wall plane, with shadows around the edges to give it a 3D feel.
Page by page Features
Biography - Landing Page
-
This is the index page, also called the landing page or the home page.
-
The page has useful links marked in orange leading to Wikipedia, in case the user wants a more in-depth read.
-
Here the user becomes comfortable about the general meaning of the website.
-
The large striking background image of a vampire nearby Bran Castle is stating that the website might be about Dracula.
-
The side section on the right is meant to complement the background image and assure the user that the website is about Bram Stoker by presenting a short introduction about his life and most notable work, Dracula.
-
The large eye-catchy background is meant to also catch the user's attention and make them comfortable to stay and explore the website even if they might not be fans.
-
As soon as the user answers the call to action, at the bottom of the screen the user is presented with a concise introduction about Bram Stoker, along with pictures to keep the user entertained.
Career page
- The career page is a summary of Bram Stoker's early career to later in life when he became famous for the immense success of Dracula.
- Theatre was Bram Stoker's life and to emphasize this, the background image tries to make the user immediately understand that is referred to the Theatre.
- The section on the right with the title "Theatre life" complements and seals that this page is referred to a career in Theatre before the user has read any content.
Dracula's story page
-
At the bottom of the career page, a short introductory section can be found with a link leading to a summary of the book in case the user does not want to read the book, but a summary would suffice.
-
This page is complementary to the career page and has a summary of the book in just 9 total sections.
-
In addition to Wikipedia links, here the section on right side, there is a section that leads to Wikisource for a full read of Dracula book, in case the user wishes to do so.
-
The background image is reverted to the one from the landing page to make the story fit better into the Dracula story theme.
Festival page
- This page aims to promote the festival with striking pictures, videos, and warm quotations from the past years recordings and articles to make the user comfortable and decide to give the festival a try.
- The striking background picture wants to instantly depict a festive feeling.
- The section on the right means to complement the background image and inform the user.
- The videos on this page have a facade to speed up the page's loading time and also the user has the option to load the video on demand if they wish to do so and save resources this way.
About page
- This page offers a means to contact festival organizers via the form on the right-side section.
- The form is made to be simple and intuitive, with a section for username, user contact information, a text area option for feedback, and an option to subscribe to a newsletter system and receive the latest news about future events from the Dublin City Council Events Unit.
- A big stylish button to the bottom of the form inverting colors on hovering, so the user can submit the form after is done.
- Right under the form, a small section presents details in case the user wants to use their own email service to contact the events unit.
- The background represents pretty much my present skills in animation in CSS.
- The skewed element's animation is to start expanding from the top-right corner in diagonal.
- To stick to the theme I have chosen a pinkish gradient color and on top a skewed element with a red gradient background.
- Answering the call to action can read about the website, website author, and its purpose.
- There is a section for credits and research as this website does not have any real affiliation with Dublin City Council and is created for education and learning purposes only.
About page form thanks feedback
- After the form is completed and the button is pressed, the form is replaced with a small snippet thanking the user.
Footer
- At the bottom of every page, the Footer can be found.
- The title has a red color with a black outline made using text-shadow with a crossing border under it.
- Links to all social media websites related to the festival can be found here with imported icons from css.gg.
- On the left side of it there is a small snippet to follow the author of the website on GitHub.
- It has a stylish gradient background, starting dark red color to a pink whitish color at the end of it.
Testing and Debugging
- During development, I constantly tried to think a couple of steps ahead and tested the website on multiple web browsers to clean it up of errors. Please click on the following .md link for the debugging and performance document TESTING AND DEBUGGING.
Deployment
To deploy the website on GitHub pages, I used the following procedure:
- From inside the website's repository I clicked the last tab, "Settings".
- In the "Settings" tab to the left-hand side a menu with the title "General" can be found. Here in the second group "Code and automation" I clicked the last option, "Pages".
- Inside "GitHub Pages" and right under it there is a section with the title "Source" with 3 options:
- Select Branch: main
- Select Folder: /(root)
- Click save: your website will be deployed.
Credits and Research
Special Credit
During the developing process, I engaged in the slack community channel project-portfolio-1 with a few questions and received valued feedback:
-
Dick Vlaanderen - my assigned mentor by code institute who has vast experience and a great attitude towards his mentees. Many Thanks to you Sir!
-
David Bowers - who offered feedback and tips with a very welcoming attitude and dedication. Especially the guidance I took to write this readme. Many thanks!
-
Simen Daehlin - who answered on point to the questions I posted on slack.
-
Also many many thanks to my friend Robert who is already working in the IT industry for Yahoo. He has been answering all my newbie questions and guiding me in great detail to make sure I understand. He is like a mentor and tutor at the same time and I am sure I will continue to abuse his knowledge moving on with the course. Happy to have him as a friend!
General reference:
Besides the course's material I also used W3schools, MDN web docs, Stack Overflow, and youtube (Youtube channel WebDevSimplified, Youtube channel Kevin Powell) for general or a more in-depth reference.
Content and Research
The content used came from the public domain, and news website articles from where I took and adapted key sections and phrases to fit into my website's theme and deliver a more compact summary:
-
All fonts linked from - Google Fonts
-
Icons used in the footer and to the call to action snippet linked from - css.gg
-
Favicon - made using gimp from two letter "V" and two letter "w" (VwwV)
-
Landing Page / Biography page:
-
Career Page:
-
Festival Page:
- The content of "Bram Stoker Festival" section and the first paragraphs of "About the Festival" was written by myself to offer a better introduction to the Festival page.
- Other sections used were inspired or quoted from the following articles:
-
About page:
- The content of this page was written by myself.
Media
- Landing Page / Biography page:
- Pictures from Wikimedia Commons:
- Pictures from William Murphy:
- Career Page:
- Pictures from Wikimedia Commons:
- Pictures from David Sury:
- Pictures from Jesús Corrius:
- Pictures from Henning Supertramp:
- Pictures from Martin SoulStealer:
- Dracula Story page:
- Pictures from Wikimedia Commons:
- Picture from William Creswell:
- Picture from Kim:
- Pcture from Jamiecat *:
- Picture from Mark Nockleby:
- Picture from Charles Rodstrom:
- Festival Page:
- Pictures from William Murphy:
- Picture from BFS Man:
- Videos from Youtube:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
