Don’t Forget Design! (Pt. 3)

Time for more design features! Woot!

Photo Realism 

The simplest implementation of this is the practice of giving the site a high-res photograph as a background, and mapping links to different coordinates on the page.

More advanced examples of photorealism include visually impressive bits of UI that are made up to look like objects.

Image result for cupcuff website

Icons

Though icons seem like an afterthought, they have become a major part of every site on the web now, and are often used as a central design feature.

The following are the standard social media icons. These are the standard versions, but they show up in several different flavors and colors. Take a look at the social media icons up in the CupCuff website for an example.

Image result for social media icons

There are plenty of places for more generic icons, however, which can serve as a much better version of bullet points. Several icons have animations that can be set to play on mouse-rollover or scroll-down. The effect can look great, in a way that doesn’t even hint to the average user that you are using generic icons.

Image result for icon gifs

Guided Navigation

This is the term that I give to designing your site so that the user is guided in a certain direction, especially if that user is visiting for the first time. If you know what the majority of your users will be coming to your site to do, this is a good way to design your landing page. For example, the designers of the Bootstrap page know that most of the people coming to the page will be coming to download Bootstrap:

Image result for bootstrap website

This approach can also be useful if you want to elicit a certain response from visitors. Putting a giant login button front and center isn’t going to bring Netflix any extra revenue, but putting such a button aimed at first-time visitors might do just that:

Image result for netflix landing page

Tiles

Basically, make your website look like Windows 8. Or Pinterest. It can be accomplished through pure CSS, or a framework like bootstrap. It can be kind of jumbled together is a sort of on-purpose random way, or much more consistent.

Image result for tiles web design

Image result for tiles web design

And we’re done! Yay, design features!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s