Hi could anyone please take a look at my documentation project. The content isn’t final, I will start putting in the content shortly. The design however, is final. There is one issue where the “jump to top” button does not work on internet explorer and safari mobile. This is because position sticky does not work on these browser. I am working on a fix for this one, will include it in my final draft. Please let me know what you all think.
p.s. I haven’t done any major optimization on the site either, aside from the data SVGs. So you may notice it loads a bit slow.
Shade of green you’re using with the white icons and background does not have enough contrast. I’m having a hard time seeing the icons against that background. It looks better on the top of the page than it does in the side navigation, but it could be better still.
Navigation is probably a bit over complicated for a project of this type. No need to have all the animations and stretching the div just to access the nested categories.
Also, I hope the end-product won’t have all the font in cursive
I like the navigation, it’s just that color combo hurts my eyes. I really like how the navigation responds for a mobile view. That’s neat!
One more thing I noticed, you should change the cursor to a pointer in the CSS for the clickable elements on the page.
This is actually one of my simpler designs. The most important goal with my projects is to push as far as I can push beyond where I previously was skill wise. If I learn 2 new things then mission accomplished. If I learn 10 new things then I’m over the moon. The whole idea is to learn and to challenge yourself I think. My challenge to myself is to implement all functionality on my projects using only css and html until I start learning Javascript. I’ve created 5 projects with only css and html so far, and the things I have learnt by pushing css as far as I can keeps blowing my mind. I never even imagined they were possible without javascript, but I never would have learned them if I hadn’t tried to build projects that were beyond my skill level when I started. My second priority is to build something from scratch that I would be proud to show in my portfolio. With the navigation I just didn’t want it to jump from collapsed to expanded in the blink of an eye. It felt a bit too jarring. Thats why I added the transitions to smooth it out a bit. Then my last goal is to pass my FCC challenge
@LisaLoop I used the tool you suggested to come up with a better color scheme. I also applied the cursor rule you suggested. I really like the final result. What do you think?
Not gonna lie, I really like the mindset you’re approaching this with. Will help you learn better
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
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
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.
I see you’re expanding the menu immediately on hover now, think it works way better, good job
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 Like them, I also wouldn’t create shadows for styling purposes only.
I really like your approach of pushing as far as you can just to learn more. I do the same thing here on FCC!
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:
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)
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!
@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 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 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?
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 . 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 will start working on it right away though. I will use the resource you showed me to make it better. Thanks a.ain mate;