Connect Learning Academy

Community resources Show & Tell
1

Just did a relaunch of a website, Connect. One page design, full screen menu, & flat styles. Has interactive Learning Academy courses to teach technology, and the Connect blog.

I have posted a previous version of this I was working on last month - since then there have been maaany changes, and the site is now live. I’d would appreciate any feedback (or bugs found!) :smile:

http://connect.capyi.ca/

https://webflow.com/website/Connect-i55z7xnq

2

Nice!

All the white text on yellow is very hard to read. You could add a very subtle very transparent black letterpress shadow (in the shadow panel) to make it more readable.

3

I like it.

I agree with Vincent though… not so sure about the white on yellow text.

4

Thanks for the feedback @vincent @revolution! I appreciate it. We did testing with 50+ ppl and no one reported that so

1269×543 684 KB
can you tell me which area the white text on yellow is hard to read? And are you on mac or windows? chrome? Is it in the learning academy area specifically you’re both finding hard for legibility (screenshot above), or elsewhere. Thanks again :smiley:

5

Mac. The elements you point with your arrow + the Chose a category dropdown.

6

Awesome, thanks @vincent :slight_smile: I’ll talk with the team & see about darkening the fill or adding a letterpress as you suggested.

7

@jaidenraleach, well done dude!

In all a very bright site that explains clearly what you’re doing, and for a good cause too! :smile:

I’ve got some small usability-remarks.

As you use blue in the [discover] button in the header, I expected I could click this blue highlighted text as well. Maybe you could make a clear distinction between button & highlight?

I’m not a native English speaker, but this took some time before realizing what it meant:

Something strange happens when I click the Plus next to productivity:

As you can see, the dropdown opens, (I think intentionally), but your productivity section gets shoved underneith the featured post:

In this txt you start the sentence with a space, but don’t on the second and third line:

I’d replace the padding-top in .quote-p to 10px instead of 77, so you get this:

instead of this:

BTW i’m digging the hover interactions on your blue squared topics. Are they similar to the Google style design guide? Well done.

I also like what you did with the onclick:display with the link and “done” button:

You might want to give the “close” button a shade, so it stands more out from the page. (On my large screen, it’s wayyyy in the top-right".

CSS:

.close-course {
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
padding: 25px;
color: white;
font-weight: 700;
text-decoration: none;
border-radius: 2px;
background: rgba(0, 0, 0, 0.19);
1 Like
8

Overall the site is clean but the only thing that’s bothering me is the close button from the Hamburger menu. When you click it > draws menu from the right and that X or Close link/button is hard to see. Might want to give it some color like white or make it a circle close button.

9

@Diu Thanks for creating an in-depth post :smile:

  1. I see what you mean from a usability standpoint, so I might actually link that highlight as an anchor to the learning academy section to avoid confusion, that way if it is clicked it scrolls to a logical place as we don’t want to just remove the highlighting.
  2. I’ll talk over the “Hows it Work” badge with the team.
  3. Yes the Plus on the productivity opening the menu is completely normal, as is sliding down the productivity section underneath the next section, once you click on a new item in the menu the section will slide back up.
  4. Good catch on the sentence starting with a space, that isn’t intended.
  5. Good catch on the 70px padding too - not sure how that happened.

Yup the hover interactions on the blue topics are modelled after google material design :wink: Glad you liked the onclick check & done interactions :slight_smile:
Thanks again!


@joeyocaro Thanks! Yea I have that on my to-do list as well, definitely needs to stand out better. :smiley:

1 Like
10

The site can also be checked out & liked the on it’s public page: https://webflow.com/website/Connect-i55z7xnq if anyone as a minute, I appreciate it :slight_smile: