How to Photoshop is a website that instructs users on how to begin learning and utilizing Photoshop. Through 8 easy-to-follow tutorials, the website aims to equip new users with the ability to start using this complicated yet important software. Although the website itself is intended to accomplish this goal, my primary reason for creating it was to begin learning two core programming languages, HTML and CSS, and how I could use them to create a website from scratch. For this personal project, I wanted to design around accessibility and incorporate important, UX/UI principles, such as journey mapping and prototyping.
Skills:
User Research
UX/UI Design
Accessibility Design
Prototyping/Wireframing
Journey and Site Mapping
HTML/CSS
1. Problem Framing and User Research:
Concept:
Photoshop is a tool that I have been using for many years now and have become very proficient at. During the fall of 2021, I utilized Photoshop when helping a few refugee clients edit images for their business at my previous job. A few clients were very interested watching me use the technology and wanted me to teach them how to use it as well. I quickly realized how confusing Photoshop was for users who had no experience with similar technology before as I struggled to explain even the simplest functions of the application. Later that day, I tried to search very simple tutorials online that I could send them, but I failed to find any that were geared towards their level of experience. This is when I decided that I will create my own tutorials!
Audience/Context:
While I wanted my tutorials to be helpful to everyone, I realized that I should limit my intended user base to inform specific design decisions and content. I was reminded of my first time learning Photoshop in freshman year of high school in my Computer Graphics class. My teacher for the class had quit in the middle of the year, and the substitute was an elderly woman who had never used Photoshop before. I remember learning many of tools by myself and then explaining it to her before class. Because I had this prior experience of teaching the software to her, I thought it would appropriate to gear my website towards the elderly who had little technical experience.
Accessibility Research:
I began researching the strategies that designers incorporate when creating interfaces and textual content for elderly users. The following is a list of main takeaways from my research and aspects that I included in my final design:
2. Planning and Prototyping:
Site Map:
For feasibility purposes and because this website was more of a learning experience, I decided it would be best to limit the amount of content/topics I covered. I wanted to focus on 8 beginner aspects of Photoshop: creating documents, learning the workspace, using layers, playing with color, working with text, creating selections, transforming images, and using brushes. The site map below shows a list of pages that I wanted on my site and how users will be able to navigate to them from the home page.
Wireframing:
I designed wireframes that followed the accessibility guidelines I established during my research phase. Within these wireframes, I identified the overall layout of my site, which sections I wanted to include, and places for text, images, and gifs.
I designed wireframes that followed the accessibility guidelines I established during my research phase. Within these wireframes, I identified the overall layout of my site, which sections I wanted to include, and places for text, images, and gifs.
User Journey Map:
I then created a user journey map showing how an elderly person wanting to learn Photoshop might come across my site. The map also identifies the decisions and choices that users can make while on the app, as well as areas of input (e.g. buttons or forms) and processes (e.g. following along with the tutorials on each page). The task of visualizing a user's journey to get to and navigate my site helped better inform how I could organize its structure and content during the final stages of my iteration.
I then created a user journey map showing how an elderly person wanting to learn Photoshop might come across my site. The map also identifies the decisions and choices that users can make while on the app, as well as areas of input (e.g. buttons or forms) and processes (e.g. following along with the tutorials on each page). The task of visualizing a user's journey to get to and navigate my site helped better inform how I could organize its structure and content during the final stages of my iteration.
3. Final Website:
Using Glitch, an online platform for creating websites with HTML and CSS, I designed a home page, 8 tutorial pages, an about page, and a contact page. This involved weeks of following online courses/tutorials and experimenting with different properties of both languages, including grids, sections, lists, images, colors, typography, and more. I also included several animations, including drop-down animations for the "Tutorials" menu, fill-in animations, as well as instructional gifs that I personally recorded on Photoshop.
Link to working website:
