I Read 4 You, is a platform that aims to connect tattooers, artists, and designers with visually impaired people for bookings, consultations, and the final delivery of customized work with the help of inclusive coding for users with visual impairments.
The long-term goal of I Read 4 You is to purposely implement the proper and complete semantic language that facilitates the "README" addons and technologies that are available, like Aria Label , so that visually impaired users have a more enjoyable and successful user experience.
This conains the name of the project and a navigation bar towards the left side of the page. here there is a link to the 3 pages of the project. The Home, the Gallery, and the Signup.
With the logo in the middle. We can find important information for the users, divided into two columns. To the left information is important for the artist, and to the right information is valuable to the client.
Here is a little description of what the project is about and why I find it important.
Here there are the links to the social media that eventually the project might have. ex. Facebook page or Instagram
- Navigation Bar
The Navigation bar in this project, includes the title of the proyect and the links to the 3 secctions of the page. A Home, a Gallery and a Sign Up. all elements are styled in easy-to-read font and colors. This section is identical in each of the sections, so the user feels comfortable. It will allow the user to navigate easily back and forth through the sections wothout having to press any button.
- Main page and first impression
When arriving at the main page, there is an image of a hand drawing an ear, it is the Super image of this project and gives an artistic idea of what the project is about. It includes a small text box with an encouraging phrase and hopefully catches the user's attention.
-
Club Ethos Section
The goal of the Club Ethos section aims to emphasize the reason the project exists. it makes clear the benefits as artists, as well as a client on why you would benefit from using the platform. This should encourage and convince artists as well as users of the benefits of using the platform. as well as inspire them to create and want to acquire art.
-
About and Why
In this section, there is a little bit more justification on why the project is important, it also aims to explain roughly how it will work, what technologies it will use, and how they will be implemented.
The Footer
The footer section includes links to the relevant social media sites for I Read 4 You. These links are carefully organized and will open to a new tab, this allows the user not to lose the main page and get away from our main page. The footer is very important since it helps the user reach easily other platforms where information is uploaded and share constantly.
- Gallery The gallery will feature available artwork from featured artists. Each piece of art will be linked and connected to each of the artists' homepages and information. Each image will also include an extensive and full image description and links to references and inspirations if available. This way, visually impaired users can navigate and select desired artwork available. It will develop in different sections in the future with categories of style, the format of the piece, the material used, etc... for easier navigation of visually impaired users.
-
The Sign Up Page
Be Part page will allow the users to sign up for the I Read 4 You platform. It has 2 options at the moment, to sign up as an artist or to sign up as a client. In the future, each option will lead to a different set of questions to be submitted. It will be required to give a username and an email address.
- In the future, there will be separate forms to fill out depending on whether you are an artist wanting to submit your art, or a user trying to acquire it.
- There is the wish to create an app where the users can scan some images and get a descriptive description of the piece of art or illustration.
- As it will also help with the booking and communication between artists and clients, there will also be a chat available and a service for booking appointments.
- The platform will soon have its own logo.
-
Several tests were made on small and big screens. The site was tested in Google Chrome and was tested on iPhone screens as well as iPad Pro. Testing was also conducted with Dev tools. The headers, texts, and features adapt easily to different screen sizes when opened on as many devices as I could try around me.
-
After deploying and sharing the link to my project, all the links are proven to work properly, the media links send you to the right web pages.
- HTML
- No errors were returned when passing index.html through the official W3C validator
- No errors were returned when passing gallery.html through the official W3C validator
- No errors were returned when passing form.html through the official W3C validator
- CSS
- No errors were found when passing the complete source code of CSS through W3C validator. CSS
- This site was deployed using Github pages, the steps i followed are the following:
- Inside my github repository, i navigated to Settings tab.
- I went to the pages section, and changed the branch name from "none" to main" and saved the changes.
- Then github created my url repository succesfully, and provided me the link to it.
The live link can be found here - https://ferchapombo.github.io/i-read.4you/
- Creator: Fercha pombo
-
@ferchapombo
-
Throughout the process of creating this website, I went through different websites and forums that helped me with the html syntax of my site as well as with the styling of the webpage.
-
I read through some information available regarding visually impaired coding and how to make better web pages for it.
-
- Overall help with coding was taken from Code
- Overall help with coding was taken from Code
- The icons in the footer were taken from Font Awesome
- Help customizing my submit button was taken from submitbutton
- Adjust margins was taken from margins
- Help with documenting my Readme readme
- Howto add images to my Read me was taken from readme
- Help with background image was taken from image
- Help moving up my logo image vertically taken from Code
- Help with Responsive media was taken form code
- Help with the structure of a form was taken from [code] (https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form)
- Help with understanding hidden and non hidden control form atributes theory
- Help with how to have responsive images taken from Responsive
- The images used for the superhero image on the main page was taken from image
- The icon i used as logo until now was taken from logo
- All the images in the gallery belong to me, as well as the artwork shown.
- Documentation I read about visually impaired accesibility was taken from articles
- Documentation I read about visually impaired accesibility was taken from article
- Help with gramar and spelling mistakes from [Gramarly] (https://app.grammarly.com/)
- Help understanding the W3C validator taken from help