Documentation Page First Draft

@Gigusek I removed the italic style. I agree, it looks much better without it. Thanks mate.

Not gonna lie, I really like the mindset you’re approaching this with. Will help you learn better :slight_smile:
My concern was mostly on the UX side of the things. For example, the stretching menu obstructs some of the text content until it’s closed again. Here’s a screen: http://prntscr.com/lea7qz

1 Like

I see what you’re saying. I wanted to add a margin on the right side of the content when I clicked on any of the nav items. The space would be just a little bit wider than the size of the menu, which would prevent the menu from obstructing the content. This is what happens when the menu is toggled from by clicking on the menu hamburger on the top left. I couldn’t figure out how to do the same when the menu is toggled by clicking on one of the nav items. Now as I am writing this I think I figured it out. Thanks mate, will update when I make the changes. What do you think about the new color scheme?

You’re welcome :slight_smile:
I think the colors look better now, the navigation is way easier to read. I’d also lower the intensity of the shadows, they’re very heavy right now.

1 Like

@Gigusek I fixed the navigation issue and I dimmed the shadow a little bit. Thoughts?

I see you’re expanding the menu immediately on hover now, think it works way better, good job :slight_smile:

I’m still not the fan of the shadows, they make you think that the elements that drop them are really above for some reason (and the “go back up” button drops shadows only to the right). Here is an article about shadows and elevation from Material Design: https://material.io/design/environment/elevation.html
Don’t think about it too much, but see what they’re going for and why. Might give you some ideas :stuck_out_tongue: Like them, I also wouldn’t create shadows for styling purposes only.

1 Like

I really like your approach of pushing as far as you can just to learn more. I do the same thing here on FCC! :slight_smile:

Having said that though: it can be quite easy to over do something. Knowing when something is too complicated or even confusing is just as valuable as learning complicated techniques, imo.

I like the way your content is set up. The warning boxes, headers, font choice, subtle button on the bottom-right, are all easy on the eye and it is very organized! Easy to read and understand.

This is why the navigation negatively stands out to me, it seems overcomplicated for this page while the rest is quite neat and tidy. The main issue is that thetransition from icon -> text is confusing. I couldn’t figure out if my cursor was on the same item before and after I hovered over it. This is due to two effects:

  1. the transition should be instant or very smooth (it is now in between - not enough time to watch what happens, but also not quick enough to make it immediately obvious that the same items are displayed)

  2. during the collapse/expand of the menu, the text is first pushed onto the next line, which draws your eye away from the navigation itself. I would make it so that the text appears after the div has completely expanded.

Another option would be to put small icons in front of the text so that it is easier to see that they refer to the same thing!

Hope this feedback helps you, good luck!

1 Like

@Gigusek I just skimmed over that article, I can already see how it will improve my designs. I will start studying it in detail right away. Thank you so much for that. I agree, something did seem off about the shadow. I was working on it up to almost 3 this morning, I guess I was tired and just kinda went with it :sweat_smile: I will start working on it right away though. I will use the resource you showed me to make it better. Thanks a.ain mate;

@Vivovix I see what you are saying about the transition from icon to text and vice versa. I will work on making the transitions smother. Thank you, I will update when I get it done.

@Gigusek @Vivovix thank you for your input. I’ve been putting off UX/UI design in favor of learning the tools (css, html) well and learning how far I could push them both I intent to do the same when I start learning javascript. Hopefully this understanding of the limits of each tool will give me a much better, much more intuitive feel for when it would be better to us CSS vs JS for a given effect or functionality. I’m aware that many of the effects or functionality i’ve put into some of my projects are not necessary from a design and UX/UI stand point, my goal up to now has not been design. I have little to no knowledge of good design, all the design choices i’ve made so far have been based on “my gut” I guess you could say. You guys are making me realize that it might be time to shift focus at least for a couple days to learn UX/UI design, which I will start right away. Thank you guys (or girls, I don’t know… lol) @Gigusek you also gave me some pointers on my previous project thank you again.

No problem! I’m glad I helped some :slight_smile: It’ll be a lot of work to learn and practice everything, so down the road you’ll probably want to choose how much time/effort to spend on design, UI/UX, javascript, back-end etc, or maybe you already have some idea on what you’ll want to specialize in? :slight_smile:

1 Like

I want to focus on front end development mainly javascript, but I want to be better than average at css html and at least good at UI/UX. I know it’s hard goal but I work really hard at it. I also want to learn React but only after I have a firm grasp on vanilla javascript. I will only start applying for jobs after I am comfortable with vanilla javascript with a few javascript projects on my portfolio. I’ve played with bootstrap before, I’ve gotton to a point where I am more than comfortable with it. Dabbled a little bit with jQuery but I can’t honestly say I know jQuery, ive also made a couple functioning websites with Django but nothing I could be proud of :sweat_smile:. Python is by far my favorite, it has taken a back seat for now but I have been playing around with it since my late teens. It was my first programming language, i’ve only used it to make small programs for fun. Being a full stack developer is my real goal but my short term goal is to learn front end development mainly vanilla javascript.

I’ve cleaned up the navigation @Gigusek @Vivovix. Let me know what you think.

hi @zebedeeLewis.

This looks much better! It’s much easier to keep track of your cursor and what you’re pointing at. Good job!

One thing that still bugs me is that the content on the right jumps when the div expands. This (again) makes the text change lines, which causes a really messy effect. I would change the content div’s width. Either make the nav div expand into empty space, or make sure that the content div has some space on the right to move to. Either way, the text shouldn’t jump lines (it says the same when the viewport size is much smaller, which makes it easier to read than the desktop version).

Finally, the drop shadow on your navbar is nice, but imo a bit overdone. @Gigusek already linked to the material guidelines - and I agree with his point of view. A smaller shadow would make the nav blend in more seemlessly with the rest of your page.

I think you really nailed it with the timing on the nav bar’s transitions - so keep it up!

1 Like

@Gigusek @Vivovix I fixed the shadows. I think it looks a lot cleaner now. I also fixed the problem with the main content jumping to the right when the nav menu is toggled. I’m still going over material design but I think I’m learning how to use shadows more effectively. What do you think? Anyone else’s input would be much appreciated. Thanks

@zebedeeLewis This looks much, much better. I definitely agree that it is cleaner! The amount of shadow is still a bit too much, imo, but it is now becoming a matter of personal taste.

Small issues: sub-nav items don’t jump to the right section (e.g. http-message, clicking on request brings you to general structure). Moreover, expanded items stay expanded when the nav div collapses (this could be a design choice, for technical documentation this could actually be intended but I’m not sure if you did! :wink: )

You could also add

html { scroll-behavior: smooth; }

just for the extra oomph.

1 Like

The shadows definitely keep looking better with every update! :stuck_out_tongue:

Vivovix mentioned scroll- behavior, it’s nice but unfortunately not really supported outside of Firefox and latest Chrome versions (https://caniuse.com/#feat=css-scroll-behavior) so javascript is still needed here for full smooth scrolling experience. Not that you shouldn’t add that 1 line and cater to 67% of internet users that will indeed see the change.

I also noticed a small problem with your burger menu icon, it doesn’t do anything on big screens since you’ve made the navigation extend automatically on hover. You might leave it like this if you want, remove it on wide screens or apply few small changes - remove the hover effects and change the cursor to “default” on hover to remove any indications that the button is supposed to do anything, while leaving it on smaller devices exactly as it is.

2 Likes

Yeah this was a design choice. I wanted the user to be able to go back to the navigation without having to repeat the same steps to get to a state they had already entered. As for the mismatch b/w the anchor tag text and their targets, I’m not focusing on that right now since the content isn’t final. I’ll put in the scroll-behavior shortly. I will keep working on the shadow. I’m sure I will get it just right. Thank you for your help @Vivovix.

On larger screens the burger menu is meant to lock the navigation menu in the open state when activated. I created an two new svg icons to represent this intent. Let me know if it makes sense.

Hello Zebedee,

Great job! Looks cool and I like all the gizmos, movement, shading, etc. I’m with you:
the more gadgets you throw in and (try to) bend to your will, the more you learn. : ) Probably not what you’d do IRL, but a great stretch exercise for a portfolio project.

Your colors seem fine to me although I am NOT strong in that area, but I do know what I like. : ) Typically I go to https://www.materialpalette.com/, click two colors I like, pick a couple more from the helpful color palette that pops up, and call it good…

Also, the lock/unlock icon seems backward to me. My thinking is the slide out menu would “lock” in the open position? Could be just me…

AND (my 2 cents) not sure you are going to get your dream job right out of the gate: Instead of waiting to hone that last bit of tech you want to get under your belt, you might want to consider starting to apply now. You certainly have skills (your documentation project is awesome!), but it might/could/potentially/maybe take longer than you think to land that first gig. Once that happens I’m sure you will be off to the races, but until then it might not hurt to toss a couple around. If you’re not ready or it doesn’t feel right, you can always decline…

I like your attitude and how you interact/listen to other people’s suggestions/comments. Critical skills when you begin building real solutions for real clients… : ) I think you’re going to be very successful!

Do good. Work hard.
-djb

1 Like