Streaming live at 10am (PST)

Collaborative Blogging & Learning Academy website


#1

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)

http://capyiconnect12170604.webflow.com/

Any glitches / feedback welcome wink

You'll notice it takes a few seconds before you can scroll - that's due to iframes for blog posts loading - working on a page loader to remedy that.


#2

Neat stuff mate! Love the on-hover stuff on the "Productivity" section!
Any chance on describing how you made it?


#3

Thanks @StevenP! The hover effect was inspired by google's material design on android lollipop (the ripple effect when buttons are pressed) smiley -- 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?


#4

Awesome Interactions you got there. Great stuff! I'm interested on your navbar hover effect. Mind if I ask how did you do that? =)


#5

Thanks @joeyocaro!! Sure, you mean how each nav link moves up on hover? if so Just select
your nav link,

click "hover" from the states dropdown in the designer



& then use the last panel "transformations" to move the nav link up a bit


Now return to the normal state and apply a transform Transition.


That should do it, there go all my secrets hehe wink hope that helps


#6

Thanks a bunch Jaiden! Really Really appreciate it! =)

Question: Does it mean, I'm going to create a box for the 'Tooltip' part and set it to hidden? Sorry a bit lost there smile


#7

@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 wink (joking of course)


#8

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 smile Thanks Mate!


#9

@joeyocaro Yea theres some great effects there! You're very welcome!


#10

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.


#11

@Hamzster what web browser are you using?
Is it appearing thinner than this:

?


#12

Hey,

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!


#13

Awesome @Hamzster, I appreciate it.


#14

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!


#15

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.


#16

Beautiful site @jaidenraleach, excellent work smile


#17

Thank you @cyberdave!! blush


#18

#19