Having finally finished a from-the-ground-up rebuild of my wife’s ecommerce cosmos-themed art website, I’m looking for constructive criticism from those familiar with RW as to how the site could be improved. For example, highlighting specific problems I’ve missed with layout, typography, flow, etc, or pointing out a blind spot I’ve failed to recognise—and why you think so—would be valuable feedback.
I built the site using Foundation and stacks from Joe Workman and others, and the Iceland theme by Jochen Abitz. A special shoutout to Adrian Jones, whose tireless support with my questions about Vibracart enabled me to finish the project as envisioned.
Here are some observations. Absolutely not exhaustive, but hopefully enough to get started. These are not intended to come over as mean spirited, more to get you to see if you have good answers and if not then perhaps some value can be unlocked from realising that.
Page by page :
Home
Almost 7Mb in size. Way too big for what it is. Slow to load and actually not clear what this page is trying to be. Is it a home page, is it the shop page, what are you trying to achieve with this page? No intro, no apropos, just bang! and we’re into putting things into carts. It’s a bumpy landing.
Possible PHP conflict with your BWD stack? Check console.
Shipping map image is almost 1Mb alone
Space effect background is distracting and adds zero - the art should be the eye catcher not some 2nd rate twinkly js.
The click or tap on image link is cheap and lacks refinement.
Had you intended to have a footer? Is it finished? Lacks structure and polish and is a missed opportunity to add whole of page structure and texture. Could be vastly more professional.
Why are the images not aligned?
There are too many images in a row - it makes it hard to give any of them focussed attention.
The cart related components are roughly styled and could be vastly improved.
What’s the story with the white band across the bottom of the artwork/image? What is that improving/adding? Why mess with the images at all? They are high impact and speak for themselves without effects, or worse still, text splattered over them.
About
What does this page do or add to anything? What is it offering?
The menu is a different style - why?
The image is cut off and doesn’t work.
Jitka page
Text is way too wide and not optimized for style or readability.
‘About’ text is over the image, why mess with the aesthetic of the image?
Lacks use of headers, why?
Submenu is broken - cannot select anything from drop down (drop down vanishes)
Displaying your painting & lighting your painting
No use of bullets - why?
Bookmark or share looks awful (blue in black) - why?
Why no picture/image showing how it should be done?
Sub menu not usable (as above)
Packing your painting
13.2Mb payload. Waa-ay too much.
Ugly images and poor typefaces, not very readable.
Sub menu works (click to activate this time)
Shipping your painting
Weird bullets. Why?
Contact form
Contact form lacks styling
Hover based sub menu works on this page
Menu font differences (size?)
Summary
This may seem a little harsh but I would recommend that you pretty much start again. If it were me (and of course it’s not which makes this entire post potentially redundant), I would be aiming for something that showcases your wife’s fantastic art to it’s fullest within a framework of visual and compositional structure which syncopates a little more pleasingly with the subject matter.
Maybe think about subtle space tones(inspired from the artwork itself) with soft, but highly legible type which is presented in bite-sized chunks. Consider compartmentalising the content in ways which draw the eye and holds the attention of the visitor from section to section. Present the content as carefully as the artwork, use the words to present each image as special. Use texture and subtle shadowing to lift the images from the page and imprint them upon the customer. Tasteful fonts should help solder the artists narrative to personal meaning provided by the receiver of the art.
Overall, my recommendation would be to go for something clean, perhaps glassy but with warm friendly narrative and per image notes from the artist closely attending crisp unadulterated renders of the images (no text flopping around on top of the images!), with subtle CTA’s. Did you consider a sectioned lightbox with descriptions and CTA’s consistently positioned? Could have great impact.
Maybe put the pages about lighting, packing and all that into single page (‘Caring for your Jitka Vesela original’), if it’s really necessary.
Anyway, you have product to die for, which is why I thought I needed to be blunt. What does your wife think of the site? Could you tell her that even a fraction of the time, attention to detail and sumptuous texture that she poured into her art, made it into that site?
A lot of what was said appears valid.
I found it a little slow. I knew what to expect from you question, but an into would be good. The topic in ‘about’ were for me interesting and could be separated from the ‘about’. I think you need a lot more about who is the artist, why and how they work, inspiration, technique, etc.
I think the key is to showcase what she does, and the selling is just ancillary. Unfortunately he style of art would suggest that the website be flash, fast, innovate, and compelling,… A bit selling Jaguars with a site designed for VW.
In addition to what @indridcold points out, the menu items are almost unreadable dependin on what image and what scren size is being used:
You need much more color Contrast between text and background. This site fails any accessibility test.
WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
If you are going to use images as background for navigation you really need to add some contrasting (a solid or nearly solid background.
