Demo website review

Design & UX
#1

Hi all,

Please could I have a review of my latest portfolio project? This was created to further my knowledge of both flex-box and CSS Grid, while also having a bit of fun with a fictional nightclub theme.

https://clubrepublic.andrewcourtney.co.uk/

I’m looking for feedback on the general design, UX and any coding mis-steps I’ve made.

Thanks in advance!

#2

I’m really sorry, but the flashing text and moving background made me feel so disorientated I had to leave the site after a few seconds without actually seeing anything. frown

Admittedly, I wouldn’t be in your target audience for a nightclub site.

1 Like
#3

Footer box background color can be removed. Instead of it, just display the footer text without background color.

#4

That’s fair enough TechnoBear, thanks for your honesty and genuine feedback.
Do you have any thoughts on how I could maybe tone it down to make it less “flashy”? :slight_smile:

1 Like
#5

Good observation, will add it to the list of fixes, thanks logan!
Oh and welcome back - I see a notification that you haven’t been on Sitepoint for a while (last post was 4 years ago) :slight_smile:

Any further thoughts on the UX or other improvements?

#6

You appear to have problems with your HTML <h1> – <h6> elements. :eek:

  • Heading information may be used by user agents, for example,
    to construct a table of contents for a document automatically.
  • Avoid using heading tags to resize text. Instead, use the
    CSS font-size property. Headings use size to indicate
    their relative importance, but CSS is preferred for general-
    purpose resizing.
  • Avoid skipping heading levels: always start from <h1> , next
    use <h2> and so on.
  • You should only use one <h1> per page. Using more than
    one will not result in an error, but using only one is seen as a
    best practice. It makes logical sense — <h1> is the most
    important heading, and tells you what the purpose of the overall
    page is. You wouldn’t have a book with more than one title, or a
    movie with more than one name! Having a single top-level title is
    also arguably better for screenreader users, and SEO

Source:-

MDN - <h1> – <h6> elements

coothead

2 Likes
#7

I can’t actually view the page long enough to make any real suggestions, apart from this:

Animation should almost always be user controlled or very short in duration . Images that continually animate can cause the rest of the page to be more difficult, or for users with very high levels of distractibility, totally inaccessible.

WCAG 2.0 Success Criterion 2.2.2 (Level A) requires that automatically moving, blinking, or scrolling content that lasts longer than 5 seconds can be paused, stopped, or hidden by the user.

https://webaim.org/techniques/images/

1 Like
#8

If this was a TV programme rather than a website, in some countries you would legally have to provide a warning saying: This programme contains flashing images

Just making the observation, I have no suggestions.

#9

The main banner… is an accessibility nightmare. You need to provide a way to turn off (pause the video). And as coot mentioned the use of headings for stylistic purposes is a no-no.

#10

Hi, I saw your website and here are a few suggestions that I hope will help you.

Your Homepage should be a bit more engaging and innovative. It is the first place where visitors will land and you have to make it attractive and eye-catching. But that doesn’t imply you have to use those flashy texts, that’s kind of distracting.

Also, try to make other pages clutter-free. Make them organized with precise information and neat images.

This was just my opinion as a website visitor or audience. Hope it helps.

1 Like
#11

Hi all,

Thanks for the suggestions about the video/animation on the Homepage, as well as the headings.
I’ve now corrected this and uploaded the latest version on the following:
https://clubrepublic.andrewcourtney.co.uk/

Any further thoughts please? :slight_smile:

1 Like
#12

Hi, nice site - maybe I’m biased because I see you are a fellow .co.uk-er !

Just a personal observation and a trap I have fallen into before -
Your about page is nice - you have text and accompanying images. It looks great on large format. But when on a smaller device you have the first main image - then all text until you finally see all the other images at the bottom.
You have to think of overall appeal, especially first impression and retaining interest, on mobiles etc. It may be more attractive to have the text and images alternating. On a mobile you get a very dark, indistinct image followed by lots of text on a black background.
Just a personal take, but nice job
Kerry

#13

The Homepage without those flashy texts is much better.

I have a suggestion for your About Us page
If you plan to show your timeline, then go for timeline chart rather than those cluttered and big paragraphs. A precise and to-the-point timeline is more attractive and eye-catching than boring paragraphs.

I hope you find it useful.

#16

Thanks Kerry and Scarlett!

I’ve made some adjustments since I last posted (nearly 2 months ago!). Let me know what you think about the new “About” page, complete with DJ profiles and timeline. I’ve also done a minor tweak to the Homepage main banner which encourages you to scroll down (clickable down to the next section).

Thoughts? :slight_smile:
https://clubrepublic.andrewcourtney.co.uk/

1 Like
#18

Hi, I like the overall functionality and responsiveness, some nice graphic design. I do find it all a bit dark, but hey, maybe that’s the desired feel. I felt the events section was a relief - I remembered what colours were :smile:

General opinion nice, innovative design, but what is the purpose ? Is it to show a presence and contact method for people who already know you or to generate new business. The reason I ask, is that one of the first goals in sales is to earn the right. Nothing here makes you stand out except that you are new. You need to get peoples attention and sell them. Even with the events section, there doesn’t seem to be much difference between each night other than the day of the week and the prices.

I think you have some very good design ideas and implementation but you need to start looking into grabbing attention, earning the right, retaining attention and a call to action to close the deal or at least get contact info.

So personally I like the site technically, but not convinced of the efficacy as a marketing tool

Cheers

1 Like
#19

Thanks for the feedback Kerry! I’ll be honest this was just an exercise to get to know CSS Grid a bit better rather than a full-blown business idea but I appreciate the feedback massively!

The idea of the design was to make the site theme a bit “gloomy” - I was also trying to think of a colour scheme that generally took a step back so that the titles, copy and photography stood out. I admit the About page probably looks a bit too gloomy though so maybe I’ll revisit the “House DJs” imagery in particular - the green filter on the DJ photography is little much on reflection!

One thought that comes to mind about the CTA aspect is to have a pop-up saying something like “like what you see? book your place today!” but I know that pop-ups are generally frowned upon (I don’t particularly like them myself when I’m just trying to find out more about a site haha).

I guess the bottom line is that I don’t have much experience of marketing myself which is generally something I need to work on… :slight_smile: