Project Development – Website Interactivity

Throughout the design and development of the Explore:ldn website I have aimed to push the levels of user interactivity through using the latest browser enabled technologies such as CSS3 animations. This will enable me to engage users through an additional perspective without needing to implement additional JavaScript frameworks/libraries that crucially add to overall website load time.

Circle Hover Animation

The “Features” section of the “About” page is a clear example of this advanced user interactivity/engagement. When the user hovers over a circular image, the element is animated with an overlay of additional text, link and background colour.

The circular animation is achieved through using a combination of CSS techniques such as separate division containers, transforms/transitions and use of pseudo classes. Each circle is embedded within a traditional list-item unordered html layout. Within each list item is a containing division alongside another division that holds further information that is displayed when the user hovers over the list item.

The inspiration for the circular animation effect was based on a CSS hover effects article from www.Codrops.com.

Border Menu – Navigation

The navigation and border menu style implemented within explore:ldn is central to the unique style of the project.

When initially designing the website, I wanted to provide an “application” type look to the navigation experience. Moreover, I was keen to implement a minimalistic layout that ensured the content could take precedence over navigation options and therefore make the most of the screen space available. The border style navigation that is centred on an overlay concept therefore proved the most suitable solution for my design criteria.

The border menu consists of three major aspects including:

The overlay border

This forms the border that overlays the major website content. The overlay is animated using CSS3 transformations alongside the use of CSS Z-Index to overlay across content.

The navigation (including icons for mobile users)

The navigation links work much like traditional responsive website navigation incorporating a hamburger menu as a “call to action” and the use of icons when the website is viewed from smaller devices. This functionality is achieved through the use of CSS media queries to identify screen size changes.

The icons seen within the mobile navigation were implemented using the IcoMoon App. This is an online service that enables developers to create CSS based icons that can be inserted within their personal html designs.

The content panel

This section of the website is where all major content sits. As the user navigates throughout the different sections, the content within this html division is altered through the use of JavaScript by hiding and displaying specific content when required.

Advertisements

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 )

Google+ photo

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

Connecting to %s