CSS-in-JS and Design Feedback

Projects Personal Projects
1

Hi everyone! I’m about to deploy a small website I’ve been working on for the past couple of months, and I’d really appreciate your feedback.

I’m particularly interested in design feedback since that’s one of the areas I’ve been trying to improve. For example, I think the banner text looks fine on mobile devices but a bit empty on larger screens. Really though, any feedback is awesome and helps me improve.

Here’s the site: https://join-one-work.web.app/ (sort of a staging location for Firebase)

As for code, this is my first time using Emotion. I’m trying to think of better ways to extract common parts to keep the code DRY. For example, I created colors in a separate file so I could change them in one place but have them update everywhere:

styles/color.js

export const baseColor1 = `#ffffff`
export const baseColor2 = `#000b8d`
export const accentColor1 = `#40c9ff`
export const accentColor2 = `#30c67c`
export const accentColor3 = `#fabe45`
export const accentColor4 = `#f57a9d`

export const lightBaseColor2 = `#9a9ed2`

Anyone have suggestions on how they manage other variable items, such as breakpoints for media queries? Right now all of mine are manually set, and I’d like to extract them so they aren’t hard-coded all over the place:

import React, { useState } from "react"
import { css } from "@emotion/react"

const toggleStyle = css`
  display: initial;

  @media only screen and (min-width: 714px) {
    display: none;
  }
`

Any other Emotion tips (or for CSS-in-JS in general) would be great! Thanks :raised_hands:

3 Likes
2

I think the design is really fantastic, really sort of fun and professional at the same time, which is great.

I have two mini comments:

  • I think you should check the contrast of some of your color–text pairings for accessibility reasons; particularly the light-blue and white isn’t even that easy for me to read, and I have no color issues. You can use this website to do that.
  • This is a bit of a tricky one because I think your general clarity and cleanness is really good, but I think you could use some color to structure the page a little — I’m thinking particularly the header and footer could have colored backgrounds to separate them from the rest of the page, but also maybe the big banner-like section at the top of the page could have a subtle background texture or something? The background being so consistently white makes it feel a little bit unfinished or something, which is a bit of a shame when your color and font choices are so good.
2 Likes
3

O my goodness I’ve just noticed that if you reload the page the colors on the text change. That is awesome.

4

Thanks, @jonrosk089! I’ll play around with the colors to see if I can come up with a similar scheme that has better accessibility.

I think you’re right about the white. Unfinished is a great way to describe it. I like your suggestion of adding contrast to the header and footer, and I’m thinking I can find a way to add some graphics without making the design too busy.

I really appreciate the time you took to provide such nuanced feedback!

1 Like
5

Hey @codingtojoy! I really like this website. It’s a cool design and all. Now I just started coding, but you want an opinion of someone on designs so I’ll try to stem an idea for you. I think maybe adding some animations to the website or scroll features would be a cool thing but totally opinion-based. Just hoping an idea strikes you off this but some type of cool animation would be sick and really make this website stand out. For example, as you scroll down the messages will slowly fade in above the people and stuff like that. But design-wise, what Jon said is good and good luck in your project!

1 Like
6

Hi @jregan91! Thanks for the idea. Sounds like a great excuse for me to learn Framer Motion, which is an animation library for React: Production-Ready Animation Library for React | Framer Motion

As I think about a good graphic to add, I’ll see if I can add some clean animations. Great suggestion!

1 Like
7

Congratulations on building this website, I really enjoy the look and feel of it!

For the footer, I am seeing a lot of white space between the logo/address and the rest of footer info. I would recommend maybe consolidating the information a bit. Some suggestions:

  • You could consolidate all footer info into one line block
  • You could place the social media icons horizontally instead of vertically
  • You could place terms of service and privacy policy next to the logo/address, move social media icons next to it and then center this content

Good luck with your project

1 Like
8

Greg this is so clutch, everyone from team-formerly-known-as-Premium is so stoked to see how this has evolved!

1 Like
9

Thanks, Erika! Great suggestions – I particularly like your idea of orienting the social media icons horizontally to fill more of the space.

10

Thanks, O’Duffy! Seriously, I wouldn’t be here without all of you guys. It’s hard to believe I get to work on it full-time now. Lots of changes coming in the next couple of months in particular: blog infrastructure is almost complete (Gatsby + Sanity.io), then content marketing starts, then a community component based on Discourse.

Would love to hear what you guys have been up to sometime. I assume you still have my personal email, but feel free to DM me anytime.

Keep being awesome! :partying_face:

P.S.: do we need a “Codecademy Premium: where are they now?” informal reunion of sorts?