(Developer: Ulrike Riemenschneider)
- Introduction
- Project Goals
- User Experience
- Technologies Used
- Testing and Validation
- Bugs & Fixes
- Deployment & Development
- Credits
Creative Spaces is an art space and school in the Ratzeburg, Germany, area offering classes for children ages 4 - 14. The site is targeted towards parents who are looking for their children to expand and develop their creative abilities. The space offers special events as well such as birthday parties and summer camps.
- Find an open, inviting and versitile art space for children in Ratzeburg, Germany.
- Find guided art classes for children.
- Find an open art exploration space for children.
- Become part of a community of like-minded children and parents of artistially inclined children.
- Attract parents and their children to the creative space.
- Increase numbers of students participating in the space.
- Promote art as an invaluable developmental tool for children.
- Teach and promote artistic skills.
- Fascilitate a space for social interactions and bonding.
- Parents looking to enroll their children in art classes.
- Parents looking to find an artistic outlet for their children.
- School age children looking for a creative space to expand their artistic skills.
- Simple and intuitive navigation system.
- Find relevant information easily and quickly.
- Links work as expected.
- Easy was to contact the business.
- Visually appealing responsive design.
- Accessibility.
As a first time user, I want to ...
- ... know what services are offered at Creative Spaces.
- ... know times, locations, and types of classes offered.
- ... know how to get in contact with the business and request more information.
- ... find more information about the staff mentoring and supervising the children.
- ... get a feel for what to expect from the classes and fascilities.
As a returning user, I want to ...
- ... see the times and types of classes offered.
- ... see if there are any new classes offered.
- ... find social media links to connect with the business.
- ... find directions to the location of the business.
As the site owner, I want users to ...
- ... interact with the space, learn about the space, learn about the services offered, learn about the benefits of the service, and request more information.
- ... feel comfortable and at ease reaching out for more information.
At the initial stage the site will include the basic relevant information. It will include information on the art school and it's motivating principles. It will include a list of classes offered. It will communicate to the user the experience and trustworthyness of the staff running the space. It will make contacting the school easy and promote an approachabe image. The site will include a picture gallery full of impressions of the space and it's operations.
In future expansion the site could include a more detailed area for news and special events, such as summer camps, and art exhibits, and a pricing structure of the services offered.
The structure of the initial site will include four pages:
- Home Page with navigation features in a header and footer, a section on the motivations and philosphy of the space, a section on the classes offered and information on location.
- About Page with information on the staff and more details about the classes/spaces they fascilitate. This page will include the same header and footer as the main page.
- Contact Page with a detailed form that includes name and email fields, as well as details on the users interest in the space and the age of the child who is considering use of the space. There will be a field for a text message as well.
- Gallery Page with a wealth of images that will give a feel and impression of art produced by staff and students at the space.
- 404 Page - a simple 404 Error page is also included.
As described in the previous section with the aid of wireframes, the website includes four pages, which all have a consistent header and footer. The home page includes several calls to action, which link to the about page and the contact page. The gallery has an interactive caption feature. Here are more details of the various page features:
Screenshot of header on desktop
Screenshot of header on mobile
- Featured on all four main pages (and the 404 page).
- Includes the company name/logo and a menu with links to the Homepage, About page, Gallery page and Contact page.
- The header is fully responsive and changes to fill two lines on smaller screens.
- If a user hovers over a menu option in desktop mode an animated bar shows them which option they are choosing.
Screenshot of Footer
Screenshot of footer on mobile
- Featured on all four main pages (and the 404 page).
- Includes the address/location of the space.
- Includes links to the social media pages which the company maintains: Facebook, Twitter, Instragram, and YouTube.
- All links open in a new window.
- The footer is fully responsive and changes to fill two lines on smaller screens.
Screenshot of Services offered
- Four panels detail the services/classes offered at the art school.
- Age groups and class times are specified.
- A call to action for more information is included in each panel.
Screenshot of calls to action
- A call to action features immediately below the hero image. It links to the services offered section.
- The call to action buttons in the panels for the classes offered link to About page and specifically the teacher running that class.
- The call to action button in the special events panel links to the Contact page.
Screenshot of About page
- Features four images with information on each member of staff with a short biography and information on the class.
Screenshot of Conact page top
Screenshot of Conact page bottom
- Features a detailed form that a customer can submit to express specific interest and request more information.
Screenshot of Gallery page
- Features images of artwork created by the four members of staff listed on the About page.
- On a desktop, if the user hovers over the image a superimposed caption appears on each image.
- On a mobile device the caption will appear if the user taps on the image.
A feature to be implemented in the future is a map with the location of the school at the bottom of the home page.
The surface design of the website is aimed to convey an artistic flair, while remaining uncluttered, and maintaining easy of readability. The color schemes and font were chosen accordingly.
The color scheme is a balance of vibrant colors that draw attention and convey artistic energy. A vibrant purple color was chosen in conjunction with the hero image and a desire for them to blend together. It was used to frame all important information on the site and all clickable buttons are styled with this color. The remaining features on the site and font are a balance of a dark grey or black, as well as white or off white in order to maintain contrast and readability.
Kalam is the font used for high level heading such as the business name, text in the main body of the site and lowerlevel headings use Shantell Sans font. These fonts were chosen for the artistic character and to convey the fluency and flexibility of artistic experimentation.
- HTML
- CSS
- Git
- GitHub
- Gitpod
- Balsamiq
- Google Fonts
- Font Awesome
- ColorSpace
- Favicon.io
- W3 Schools
The W3C Markup Validation Service was used to validate the HTML of the website. All pages passed with no errors or warnings.
Home
About
Gallery
Contact
The W3C Jigsaw CSS Validation Service was used to validate the CSS of the website. The code passed with no errors or warnings.
CSS Validation Screenshot
The Lighthouse feature on Google Devtools was used to assess accessibility and performance. All pages score high on accessibility. The gallery page scores lowest on performance due to the large number of images.
Home
About
Gallery
Contact
During testing using Lighthouse issues related to performance and SEO were flaged, specifically on the Home page and Gallery page. Work to reduce these issues should continue. This will further improve the user experience.
The websites compatability was tested on the following browsers:
- Google Chrome
- Mozilla Waterfox
- Microsoft Edge
- Safari
- As a first time user, I want to know what services are offered at Creative Spaces.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Home page | Navigate to the type of art activities you are interested in | Locating information on activities offered | Works as expected |
- As a first time user, I want to know times, location, and types of classes offered.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Home page | Navigate to the type of art activities you are interested in | See classes and times offered | Works as expected |
| Footer - address | Scroll down to the footer of the page | Find the address of the school | Works as expected |
- As a first time user, I want to know how to get in contact with the business and request more information.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Contact page | Navigate to the contact page and locate the form | Find and fill out contact form | Works as expected |
| Footer-social media links | On any page scroll down to the footer | Contact via any social media platform | Works as expected |
- As a first time user, I want to find more information about the staff mentoring and supervising the children.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| About page | Navigate to the about page | Find information on the staff and their classes | Works as expected |
- As a first time user, I want to get a feel for what to expect from the classes and fascilities.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| About page | Navigate to the about page | Find information on the staff and their classes | Works as expected |
| Gallery page | Navigate to the gallery page | Find samples of work produced by teachers and students | Works as expected |
- As a returning user, I want to see the times and types of classes offered.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Home page | Navigate to the type of art activities you are interested in | Locating information on activities offered | Works as expected |
- As a returning user, I want to see if there is any new classes offered.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Contact page | Navigate to the contact page and locate the form | Find and fill out contact form for more information | Works as expected |
| Footer-social media links | On any page scroll down to the footer | See if new classes are advertised on social media | Works as expected |
- As a returning user, I want to find social media links to connect with the business.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Footer-social media links | On any page scroll down to the footer | Find social media links | Works as expected |
- As a returning user, I want to find directions to the location of the business.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Footer - address | On any page scroll down to the footer | Find address of the school | Works as expected |
- As the site owner, I want users to interact with the space, learn about the space, learn about the services offered, learn about the benefits of the service, and sign up for more information.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Home page | Navigate to the type of art activities and philosophy section | Find information on activities offered and business motivation | Works as expected |
| Footer-social media links | On any page scroll down to the footer | Contact via any social media platform | Works as expected |
| Contact page | Navigate to the contact page and locate the form | Find and fill out contact form | Works as expected |
| About page | Navigate to the about page and read about staff backgrounds and classes they offer | Read the page | Works as expected |
- As the site owner, I want users to feel comfortable and at ease reaching out for more information.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Footer-social media links | On any page scroll down to the footer | Contact via any social media platform | Works as expected |
| Contact page | Navigate to the contact page and locate the form | Find and fill out contact form | Works as expected |
While all the minimum criteria for fullfilling the user stories are met, there are several items that could be improved upon:
-
A map could be included at the bottom of the home page to give more explicit directions to the location. This would strengthen user story number 9.
-
A more explicit section or link could be provided on new services, news, or special events. This would stengthen user story number 7.
-
More information about the fascilities could be included, in the form of text about or images of the building, rooms, art supplies and materials provided at the space. This would strengthen user story number 5.
| Bug | Fix |
|---|---|
| Images framed in the philosophy section failed to be responsive at very small screen sizes. | Max-width of image was set to 90% and margins to % values also for more responsiveness |
| Header styling failed on small screen sizes | Font size of logo and menu was decreased and menu floated left to fit header on two lines |
| Spurious tiny underscore lines appeared between the social media links when using 'display: inline' for the CSS styling of the .social-networks class. | Using 'display: flex' eliminated the lines. |
The website was deployed using GitHub Pages by following these steps:
- In the GitHub respository navigate to the Settings tab.
- Select Pages from the menu on the left-hand side of the page.
- For the source select Branch: 'main' and then select: 'save'.
- After the webpage refreshes automatically a ribbon at the top will displays the following message: "Your site is live at https://uriem.github.io/art-school/"
The website repository can be forked by the following steps:
- Go to the GitHub repository.
- Click on the Fork button in the upper right hand corner.
The repository can be cloned by the following steps:
- Got to the GitHub repository.
- Locade the Code button above the list of files and click on it.
- Select if you prefer to clone using HTTPS, SSH, or Github CLI and click the copy button to copy the URL to your clipboard.
- Open Git Bash.
- Change the current working directory to the one where you want the cloned directory.
- Type git clone and paste the URL from the clipboard ($ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY)
- Press Enter to create your local clone.
Images not referenced below are owned by the developer.
Images:
- Hero image by Dragos Gontariu on Unsplash
- Smiling girl by Senjuti Kundu on Unsplash
- Pictures in the gallery attributed in the caption to Wiltrud Düll and her portrait shot on the About page were provided by her.
- Pictures in the gallery attributed in the caption to Susanne Buske-Riemenschneider and her portrait shot on the About page were provided by her.
- Pictures in the gallery attributed in the caption to Annika Riemenschneider-Melzer and her portrait shot on the About page were provided by her.
- The website was loosely modeled on and inspired by the Love Running Walkthough project and some of the code from the walkthrough project was used and adapted.
- Layout and code for the About page was modeled after and adapted from Paul Thomas O'Rirodan's Project 1 Website.
- W3 Schools was a great help in creating the hover image overlay for captions on the gallery page.
- This README file was also guided by the README file from Paul Thomas O'Rirodans Project 1 Website.
- In an initial inception of this website the gallery layout code, both HTML and CSS, was taken from Saief Al Emon https://codepen.io/iamsaief/pen/jObaoKo. Ultimately however, it was changed significantly and the final layout returned to being a masonry style illustrated and used in the Love Running project.
- The Code Institute Channel Lead Library was a very useful resource for learning for the CSS flex box styling code used throughout the project.
I would like to thank:
- My mentor Brian O'Hare for his feedback, advice, guidance and support.
- My enthusiastic contributors of material, in the form of text and images, for the hypothetical art school for kids: My mother Susanne Buske-Riemenschneider, my sister Annika Riemenschneider-Melzer and family friend Wiltrud Düll.
- Cohort fascilitator Paul Thomas O'Rirodan, for his general advice on the management of the course and pointing us to a plethora of resources to help with the projects.
- My husband, Matt, for his encouragement and support along the way.