alexspagnuolo / ecommerce-pattern-library

A term-long project redesigning an ecommerce website focusing on making a pattern library.

name	fontURL	fonts	colors	backgroundColor	accentColor
Exhibit2	https://fonts.googleapis.com/css?family=Rubik:400,400i,500,500i	primary The only typeface used contributes to the monotone aesthetic of the website and branding. The slight rounded corners on the sans-serif letters give an inviting feel and new trend. This font is capable of become a bold statement for headers while also being a nice and readable body copy.	primary accent The primary colours are all shades darker of the lightest tone. To keep the focus on the artwork, the colours are relaxing and neutral nude tones. They should all be used in contrast with each other depending on the background. Headers are always darker than body copy unless the background is primary-medium. The accent colours are all used for specific reasons. The white is used for text on hover and focus states, light grey for regular text and black for buttons.	#e4e4e4	#4c4542

Exhibit2 hosts to enable artists to sell their work. We’re bent on making the art the true focus. Our brand is bent on supporting the world’s artists.

ecommerce-pattern-library's Issues

Final grade

This was an amazing and extensive learning experience all semester building and putting together my pattern library for my brand and eCommerce website, Exhibit2.

I'm proud of the results and it fully encompasses all the possible components that were needed to make the whole website, even the pages that I didn't make myself. My patterns represent all the possible components and variations of each are possible with class names. Each pattern is fully explained and my partner only had a couple generic questions with putting together the product details page. No components were missing or incomplete.

---

Style & design — 3
My brand and library is completely based off of cohesive design. Sporting relaxed, monotone nude colours, it provides a low-key look which allows the featured artworks to really pop and speak to the customer. This is a great marketing and design scheme to really sell the products to the users visually.

Patterns — 3/3
Throughout the whole process, I was able to refine and make all my patterns more efficient, whether by combining things by section, or by removing redundant patterns. However, I've included all imagined patterns including those not used on the template pages, such as bread crumbs. There are also class names not in use such as background colours for other people to easily access, change use the pattern library.

Explanations — 3/3
A huge part of designing is the importance to consider if other people can easily use, modify or add to your designs, whether in web such as this or things like print in inDesign. I made sure to make all explanations concise and to the point while keeping in mind that someone else may need to learn and work from them. All my patterns have explanations.

Accessibility — 2/3
There are similar tones, however I made sure to include contrast. However I feel as though I could expand on the accessibility more by adding labels. My forms include aria definitions.

Semantics — 3/3
I made sure to utilize from the broad range of HTML tag semantics to my advantage, such as divs and sections, to spans. They are all styled accordingly in my theme and the semantics are cohesive.

Responsiveness — 3/3
Using grids and units to my advantage, I was able to create grids within patterns to make a responsive and dynamic website that works well on all viewports. My website looks great on all screen sizes.

Code quality — 3/3
My code quality is all set up with logical hierarchy in order to make the most customization possible with colours, grids and other tags. There are absolutely no indentation issues and the code is set up to be as efficient as I could make it.

Git & commits — 2/3
I did write some descriptive commits, and there were valid commits for each single one, but there were a couple yellow marks on MarkBot that I could improve for next time.

---

22/24 — 92%