Design Update: Visual Styling

[thebearingedge]

Hey Steve, as we discussed on Slack, here's some notes I have about the app's appearance. It's not comprehensive, but it's a good start.

Before tackling any of these, please take a look at our new effective-css guide.

• [x] Horizontal alignment should be consistent. Stuff on the left should line up on the left and stuff on the right should line up on the right.

• [ ] I don't know what to do, use a "hamburger menu" icon and don't let it disappear.

• [x] The drawer is too narrow, try 275px.

• [x] The menu items are too close to the left border of the drawer, add left padding to the drawer

• [x] Your border radii are all over the place, try just using 0.25rem everywhere you want rounded corners. Also, add rounded corners to your inputs to match.

• [x] Lose the colons, they're just adding visual noise.

• [x] Button alignment on the forms should be right-side.

• [x] Too much padding is pinching your contact form inputs

• [x] Areas of the page that are next to each other should at least at the same spot down the page.

• [x] Use consistent vertical spacing. Err on the side of "more" vertical space rather than "less".

• [x] This contact form page is having trouble deciding what it wants to do.

https://user-images.githubusercontent.com/7432943/127341670-7cca8d6b-7039-445a-8b2e-e5d25772b2e8.mp4

[Smith-Steve]

Mistakes:

1. Did not demonstrate understanding of how Visual Styling in CSS should be applied. For example, for Border Radius - should have had a single CSS selector that it was applied to, so that in all cases I needed to use Border Radius, I could apply a border radius to any given element and it would be the same throughout. A. If I needed to make individual adjustments, I could apply those individually and separately.

[Smith-Steve]

Review CSS Field Guide. Not sure About what to do about Color Schema. Too Dark

[thebearingedge]

@Smith-Steve The colors are ok! 👍 I think it's consistent enough to proceed with for now.

[Smith-Steve]

There is no input-container on the contact form, but there is an input container on all the others. This is probably because the input component was set up as two columns, and then all the other ones were set up was as one column and followed a more standardized format. However, as a result of this, the other components are utilizing padding from both the FORMS directly and the input-form container. CHANGE THIS.

[Smith-Steve]

To Ask Tim When complete:

• Does the titling along the top need to be evenly spaced (as in pushed over to the right/left as well?)

• A.) Hamburger Menu, I don't know if I'm a big fan of this idea. B.) Original idea was, to set up CSS to make the whole backround look actually like a door, so the styling that is presently there would look like an actual slot in a door. I attempted to start it at one point before the career demo, but quickly realized it'd take too much time (for me) and decided to push down other avenues. Is this possible? How could it be texturized to look like an actual 'classic' front door? [https://i.pinimg.com/originals/2e/2d/15/2e2d150e2a04a43c67fe0a91e4881315.jpg](classic door) Given this idea, A, is it possible/worth my time? B.) If so, would you choose this over the hamburger menu? I'll go w/ the hamburger menu if you think it's better.

1) How should I finish this APP? Currently, I have the feature to add users at the bottom tier, I'd like to add that all the way up, install users. MAYBE add companies for users as well, and then attach contacts to companies, so their viewable across companies and then call it a wrap. I have no idea how to add a company to a user accept to repeat the argon2 user process, except at the user-company level. That seems a little crude. Do you think that's too much? I'd at least like to get users in, and then finally call this thing caput. I feel I'm dallying on it and its not getting done. I'd like to add react hooks also. I shouldn't just keep adding things. Will write out list tonight/tomorrow to give more refined ideas to tim on what a 'finished' product would consist of. Time to move on from this.

[thebearingedge]

@Smith-Steve Hi Steve!

Hamburger Menu, I don't know if I'm a big fan of this idea.

The goal is to not do anything unexpected with your app. The 3-bar menu/app drawer is a well-established idiom that people will understand.

Original idea was, to set up CSS to make the whole backround look actually like a door, so the styling that is presently there would look like an actual slot in a door.

This idea seems cool and i recommend pursuing it on its own branch to at least see if you can do it and what it will look/feel like, but I don't recommend taking design risks like this for your portfolio projects and it's definitely not worth delaying the completion of the app.

Is this possible?

Yes

worth my time?

No

If so, would you choose this over the hamburger menu?

No, I'd stick with the conventional hamburger/app drawer to avoid surprising users.

How should I finish this APP?

The best thing you can do for the moment is finish up the app with its current feature set. Removing all bugs or UI inconsistencies is highest priority. When you get an MVP or solid Proof-of-Concept done, it's important to make it look and feel "finished". Software is built iteratively and once the core functionality is there, the team continues to work on it and gradually release additional features.

Once you have a nice consistent user flow and ui you can continue to plan out your additional features with Figma and a Github Issue w/tasks etc. It's much better to have an incomplete list of polished features than it is to have a complete list of unpolished features. Does that make sense? It's kind of a mouthful.

I'd at least like to get users in, and then finally call this thing caput.

Yes, I think that's a worthy high-priority item, but I don't recommend working on it just yet, until your menu is fixed.