jiffybees / ecommerce-pattern-library Goto Github PK

I have finished my pattern doc, as well as the README file and config.yml elements. Just making the issue to confirm for marks.

If there is anything I have missed let me know.

@thomasjbradley

Navigation and logo are colliding

https://docs.google.com/document/d/1fNl8QZ8404mX0fQd-SiYw93uvWGWWX4XKWQVvc1aokQ/edit?usp=sharing

@thomasjbradley

@thomasjbradley

There should be a better separator between the cards as seen in the image below.

Additionally, make sure images selected are of a better resolution if they are being displayed that big as they look very pixelated and messy.

@thomasjbradley
My homepage is almost done, I just have an issue with putting images into my placeholders and reducing the number of displayed product cards down to one line, I'm not sure how to do this.

I finished my pattern library and fixed every problem submitted to my issues page. Hopefully, I've gotten everything done. @thomasjbradley

@thomasjbradley
I had an issue with my header and some cards on the homepage when scaling down. Firefox scales down a little bit smaller on firefox. Otherwise, I didn't have too many other issues.

Rationale
My Website cozy was made to reflect large e-commerce stores with many products and possible retail stores. Indigo and Bath & body works were inspirations to the final design, helping to create a believable e-commerce layout. I feel that action cards were a little overused in my design, limiting the design potential an e-commerce website really has. Structurally however my website reflects the hundreds of pages a real online store would have. I am proud of the code used for this website, making a consistent well-performing platform that can have content easily inserted. Though we did not send our code to other group members I feel like my website has been structured well enough for web designers to understand.

Style & design — 3

aesthetically I feel like my website could be better but as an e-commerce website, It works well to portray the real amount of pages that would exist, while functioning at all sizes.

Patterns — 3

I made the standard patterns for header, nav, etc.. but I also made extra style options for buttons and cards that would help with the other possible pages. If given more time I would have made Illustrations and more graphics for the branding, along with more seasonal ad cards but what I made now is very inclusive.

Explanations — 2

Explanations in the pattern library were very brief but to the point, items used multiple times are detailed, however. This limited explanation makes it easier to understand their usability but can be difficult for newcomers to the project.

Accessibility — 2.5

Voice over was tested as well as some amount of colour blindness, however, I do not feel like my website 100% accommodates people with other disabilities.

Semantics — 2

The standard tags were used in my code alongside some more complex tags. I used what I felt was most appropriate even if there may have been better items. I know for example sections, and mains were not often used because divs worked well and structure in an e-commerce website is very prone to change.

Responsiveness — 2.5

Almost all elements work on all pages, there are a couple of buttons and cards that are a little bit squished in between sizes.

Code quality — 2.5

Decent: most minor issues are from possible spacing and indentation issues that were missed.

Git & commits — 2.5

All git commits were made in full short sentences with title case standard and informative starting words like Fix, Add, or Removed

20/24 — 83%
@thomasjbradley

I hope you have a very good day - Vanessa R

Hey! Only issue I've found is that on your homepage near the bottom you have two banners (one for blankets and one for cups) but the images and captions don't line up. The blankets caption is on the cups image and the cups caption is on the blanket image.

The other buttons in the Header do not turn gray after being clicked on and being on the tab. Only the Home button does that.

Average load speed of 2.68 seconds.
Most space taken up by images at 89.8%.

The following images all showed possible issues with compression:
home.jpg (failed compress twice)
lego.jpg (failed compress twice)
book-1-small.jpg
book-6-small.jpg
book-7-small.jpg
book-8-small.jpg
sub-selector.jpg
mug.-sale.jpg
cozy.jpg
in-the-maldives.jpg

All 3 other pages other than the index have been made.

I'm having an issue linking the product details page to each product card but that is my only issue.

@thomasjbradley

@thomasjbradley

I am trying to fix 2 things the placeholder text not showing up and some product cards being empty. I added what you wanted me 2 but it hasn't worked.

I sent my YAML to you on slack hopefully you get it.