Alveo Land Website


A partial re-layout for the desktop version of the Alveo Land website, using the current theme and design; and a redesign for the AMP version.

Desktop Layout

The Home Page is a partial re-layout that aims to fix and re-organize what seems wrong in the current website. The navigation menu and property finder bar is patterned/stylized from the new Avida Land website, as an direct way of saying that they belong to the same group of companies.

The grid should use the Isotope/Masonry JS plugin, so that it will be responsive at all times. Admin users should be able to re-organize the tiles according to their preference via the CMS.

The Location Tiles use actual location images rather than map images.

Clicking the property finder button below the navigation menu pushes the Tiled UI downwards to show the Property Finder options.

Different Tags can be toggled from the left side to instantly filter the results in the Property Listing.

Clicking on a property tile in the listing will open a Property Preview Modal that covers the entire screen to direct the attention only to the preview/summary. Moving the mouse over the image should move the image as well in a parallax, 3D effect.

Two variations were designed for the Property Page:

The first, a single-page layout that heavily incorporates floating boxes/images, inspired by a magazine-like style. All images, galleries, videos, walkthroughs should be accessible via a single, interconnected Photoswipe gallery.

The second, also a single-page layout that uses accordion-type sections that should prevent users from being overwhelmed in a single page.

The Commtalk Online, Alveo Land’s Blog section, uses a masonry layout that does not restrict the Article Thumbnails in a 1:1 tile.

In contrast, the What’s New Page uses a newspaper-like layout. Upcoming Events should also appear in the list at the right.

AMP Layout

The AMP (short for Accelerated Mobile Pages) Layout uses a more simplified version of a mobile layout. The design prepared takes into consideration the AMP Components to be used for the website.

The Property Listing page uses the AMP component amp-list


Leave a Comment