Affordance
Making things easier to understand
These buttons change on hover, that’s affordance.
What is affordance?
Affordance is a use or purpose that a thing can have, that people notice as part of the way they see or experience it: In design, perceived affordance is important — that is, our implicit understanding of how to interact with an object.
Not on mobile!
I set the examples on this page to display on desktops and laptops only. Some of these effects will work on mobile, but because you don’t have a mouse, hover effects are not as noticeable.
Grow on hover
The boxes below grow when you hover over them. This gives you a hint that you can click them. That is one instance of affordance. These are demo boxes so I’ve disabled the links, but you get the idea.
Different layouts for different category archive pages.
View the blog and category archive pages, note the different designs for each archive page.
Subtle hover effects.
Good web design is subtle. You don’t need garish distracting effects.
Sepia on hover.
This image changes color slightly on hover. I set the effect to only happen on desktop devices because mobiles don’t have a mouse and users don’t hover over images before clicking.
Swap image on hover.
This effect is great for showing before and after photos of work you’ve done. For instance, a painter could show a house before and after it was painted.
Box Shadow.
This photo has rounded corners and a subtle box shadow. These are small details but do make the page just a bit more interesting to look at.
Animated icons
Item one
Adding movement and color to these list items makes the whole layout look more interesting and appealing. And lucky for us, it’s easy. Link Here.
Item two
Adding movement and color to these list items makes the whole layout look more interesting and appealing. And lucky for us, it’s easy. Link Here.
Item three
Adding movement and color to these list items makes the whole layout look more interesting and appealing. And lucky for us, it’s easy. Link Here.
Image & icons
Interactivity
Aenean bibendum pulvinar felis sed pretium. Fusce sodales ante sit amet mi imperdiet luctus. Aliquam sed velit dui. Nunc vitae justo non nunc cursus dictum.
Quisque pretium cursus ipsum, non consectetur metus bibendum et. Sed enim leo, placerat at suscipit eu, ultricies id nisi. Aenean vulputate eros a egestas lacinia.
Camping
Bonfire
Trips
Grow on Hover
Donec finibus volutpat enim sed ultricies. Ut in justo sed nulla ornare consequat at non ante.
