Making websites feel good

Making websites feel good

We’ve all come across websites that just feel good to scroll through. Each element purposely placed, buttons that have impact, and animations that make you go “ooo”. At Posture we like to call this adding polish. 

Placement

Such a simple idea but placement and hierarchy is one of the core aspects that makes a website feel good. Placement of elements helps guide the eye and the sizing of your content could mean the difference between a confused user experience and a seamless flow of information. 

BAD:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt nibh id ligula tempor, vel pretium sem placerat. Quisque pellentesque fringilla orci ac venenatis. Phasellus iaculis, arcu nec lacinia consequat, mi massa vestibulum dolor, nec fringilla leo ipsum a felis. Maecenas convallis posuere purus, non finibus justo rutrum id. Pellentesque et aliquam lacus. Pellentesque malesuada leo eu ipsum dignissim pretium. Vestibulum semper velit ex, semper mollis urna pulvinar nec. Nam vitae porta lectus. Duis felis erat, venenatis nec ipsum id, scelerisque iaculis purus. Sed sodales suscipit tincidunt. Donec id placerat tortor.

BETTER:

I’m a title!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt nibh id ligula tempor, vel pretium sem placerat. Quisque pellentesque fringilla orci ac venenatis. Phasellus iaculis, arcu nec lacinia consequat, mi massa vestibulum dolor, nec fringilla leo ipsum a felis. Maecenas convallis posuere purus, non finibus justo rutrum id. Pellentesque et aliquam lacus.

Pellentesque malesuada leo eu ipsum dignissim pretium. Vestibulum semper velit ex, semper mollis urna pulvinar nec. Nam vitae porta lectus. Duis felis erat, venenatis nec ipsum id, scelerisque iaculis purus. Sed sodales suscipit tincidunt. Donec id placerat tortor.

BEST:

I’m the main title of this information section!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt nibh id ligula tempor, vel pretium sem placerat. Quisque pellentesque fringilla orci ac venenatis. Phasellus iaculis, arcu nec lacinia consequat, mi massa vestibulum dolor, nec fringilla leo ipsum a felis. Maecenas convallis posuere purus, non finibus justo rutrum id. Pellentesque et aliquam lacus.

I’m a sub-idea heading to relay importance but still part of the main content!

Pellentesque malesuada leo eu ipsum dignissim pretium. Vestibulum semper velit ex, semper mollis urna pulvinar nec. Nam vitae porta lectus.

I’m a list of ideas with my own heading and bullet points to guide the reader.
  • Duis felis erat, venenatis nec ipsum id, scelerisque iaculis purus.
  • Sed sodales suscipit tincidunt.
  • Donec id placerat tortor.
*I’m a footer annotation.


Transitions

Transitions are an important part of what gives buttons on a website presence. Without a hover/active state some buttons might not even be perceived as clickable elements! 

BAD:



BETTER:



BEST:



Call to action

Cards are a great way to create actionable content on websites. Just look at facebook and many other social media platforms they are filled with card based layouts. Cards are an easy way to show that this is an atomic piece of content that usually has built in functionality.

BAD:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt nibh id ligula tempor, vel pretium sem placerat. Quisque pellentesque fringilla orci ac venenatis. Phasellus iaculis, arcu nec lacinia consequat, mi massa vestibulum dolor, nec fringilla leo ipsum a felis. Maecenas convallis posuere purus, non finibus justo rutrum id. Pellentesque et aliquam lacus. Pellentesque malesuada leo eu ipsum dignissim pretium. Vestibulum semper velit ex, semper mollis urna pulvinar nec. Nam vitae porta lectus. Duis felis erat, venenatis nec ipsum id, scelerisque iaculis purus. Sed sodales suscipit tincidunt. Donec id placerat tortor.


BETTER:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt nibh id ligula tempor, vel pretium sem placerat. Quisque pellentesque fringilla orci ac venenatis. Phasellus iaculis, arcu nec lacinia consequat, mi massa vestibulum dolor, nec fringilla leo ipsum a felis. Maecenas convallis posuere purus, non finibus justo rutrum id. Pellentesque et aliquam lacus.

Pellentesque malesuada leo eu ipsum dignissim pretium. Vestibulum semper velit ex, semper mollis urna pulvinar nec. Nam vitae porta lectus. Duis felis erat, venenatis nec ipsum id, scelerisque iaculis purus. Sed sodales suscipit tincidunt. Donec id placerat tortor.


BEST:

I have a clearly defined title!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt nibh id ligula tempor, vel pretium sem placerat. Quisque pellentesque fringilla orci ac venenatis. Phasellus iaculis, arcu nec lacinia consequat, mi massa vestibulum dolor, nec fringilla leo ipsum a felis. Maecenas convallis posuere purus, non finibus justo rutrum id. Pellentesque et aliquam lacus.

Pellentesque malesuada leo eu ipsum dignissim pretium. Vestibulum semper velit ex, semper mollis urna pulvinar nec. Nam vitae porta lectus.


These are just a few examples of what transforms a website from good to great. Adding the polish is like putting a ribbon on a finely wrapped gift box; it’s not entirely necessary but it’s a nice touch that will leave an even greater lasting impression on the recipient.


Hello!

  • FYI... If this is regarding a new project - please go back and simply use the "Start a Project" button so we can better help you out!