SWATCHED GALLERY WEBSITE
SUMMARY
For this project, the challenge was to combine my love for textile and fashion history with my digital knowledge of web design and user experience. I chose to focus on textiles from the 18th century in England, France, and Italy. A problem I saw with the subject is that textiles were hard to find on museum websites, and they were not formatted in an exciting layout. My solution was to design an exploratory site that used visual influences from historical swatch books and encouraged visitors to peruse and learn.
YEAR
2022
PURPOSE
School
TOOLS
Figma
STYLE GUIDE AND REFERENCES
The design system focus was to combine standard practices with styling that contextualized the website in the 18th century. I used a spacing system composed of 8px multiples for consistency. Overall, I designed the home screen, and 36 swatch screens, each with a pop-up view as well as an extended view. I started with wireframes and an initial design system, and then expanded on both simultaneously.
The color palette emulated old paper and faded material in order to contrast with the colorful swatches, which were sourced from museum archive websites.
​
Visual design elements included the lined background, buttons with a hover state, pop-ups, and hand-drawn icons.
BKND
#D1BC99
TEXT
#000000
ACCENT 1
#402A11
ACCENT 2
#F4EEE7
BUTTON DEFAULT
BUTTON
SELECTED
POP-UP
ICON
INITIAL WIREFRAME
The first deliverable of the project was a wireframe to start thinking of ways for the viewer to look at the information provided for each fabric swatch.
VISUAL DESIGN APPLICATION
Once the usability and structure were determined, I applied the visual design system in its final form, with a textured background, color palette, styled buttons and icons, pop-ups, and Pantone swatches.
REFLECTION
This was a semester-long project, and I am really pleased with the way it turned out. I was able to spend time on every step of the process from research to inspiration to wireframes to visual design application. If I redid this project, I would begin user testing earlier in order to get great ideas and feedback before doing a lot of design-detail work and having to go back and change each swatch page, since they all followed the same format. Other than that, I think I managed my time really well and kept on track of the project progress throughout.
SECONDARY WIREFRAME
After user testing, I concluded that some people might like to view the basic information as a pop-up over the home screen, whereas others want to view all of the text along with it. To meet both needs, I decided on an initial pop-up view, and then a "learn more" button that takes the viewer to a full page on the textile with all of the historical information. Concurrently, I began developing the visual design system since it was the primary focus of the project.
