Still in the relatively early stages of this site, but would appreciate any input or constructive criticism.
This is a one pager for a organization I work for’s blog & also a little “learning academy” that’s being put together.
(again - the learning academy especially is NOT done [doesn’t have all the courses added/correctly linked] & has some placeholder content, so looking for input on design - not content)
Thanks @StevenP! The hover effect was inspired by google’s material design on android lollipop (the ripple effect when buttons are pressed) – It’s basically a link block thats set to relative overflow hidden with 220px by 200px dimensions, then another div inside that for the circle: set to absolute -50 top -45 left with a width/height of zero, opacity of 0% and a radius of 200px - then on hover using the interactions the circular div expands to fill the link div with dimensions of 320 x 320 & opacity 100%~ kinda complicated to explain – would it help if I PM you a read only link so you can take a look in the designer itself?
@joeyocaro Oh didnt know you wanted to copy the tooltip part - my bad, yes that is basically just a text div with opacity none and then on hover set to move up and opacity 100%. No cloning my design now (joking of course)
haha! I have found similar effect from one of the tympanus hover effect collections but I could not make it to work with WF. That’s why I ask you since you already have it running Thanks Mate!
Just something I thought I should suggest. Your h2 font is really thin. I was having trouble focusing on the little fonts with the bright backgrounds. I would suggest perhaps using a 400 typo or making it bold.
It looks like that on my retina macbook; but on my windows desktop it looks really thin. Still super thin both ways though. I’ll take a screenshot later and post it to show you what I see!
I have attached a screen shot from my windows computer. I am running windows 8 on a dell XPS 8700. 1920x1080 resolution - latest samsung LED monitors.
I feel like the ‘learning academy’ is realyl thin and my eyes have to look for them in the blue and when I focus on them the blue overwhelms me. This could be just me though. Does anyone else see it that way?
Right now your font size is 38px and your weight is 100. Try 200 or the next level up available on your font. Also, one more thing I notice is that the pink on white has the same effect - ‘learn freely’.
Generally, I like the way your have laid out the site. Hope my feedback can improve it even more!
Thanks @Hamzster I’ll look into the possibility of using another font weight - though the team doesn’t want that - we shall see - just typical crap font rendering by windows it looks like - I’ll see what can be done. Thanks again, really appreciate it.
– It’s basically a link block thats set to relative overflow hidden with 220px by 200px dimensions, then another div inside that for the circle: set to absolute -50 top -45 left with a width/height of zero, opacity of 0% and a radius of 200px - then on hover using the interactions the circular div expands to fill the link div with dimensions of 320 x 320 & opacity 100%~ kinda complicated to explain – would it help if I PM you a read only link so you can take a look in the designer itself?
Thanks Mate!
