VML Digital Marketing and Advertising Agency’s responsive website goes from a three-column layout to a single column once it gets scaled down to smaller resolutions. Even the hamburger menu stays the same as the desktop model, like in the instance above with Rally Interactive. However, Web design agency, Deux Huit Huit, are a great example of how one can still retain delicate motion in scaled-down variations of your web site while offering the identical consumer experience.
For instance, a paragraph describing their Rewards Visa Card appears to the left of an image of the card on the desktop model. Normally, when two columns are scaled-down, the content material on the proper tends to go below that on the left. However, on this case, the picture shifts place to above the outline.
That’s to not say you can’t innovate on the design of a hamburger icon. Nonetheless, utilizing a + icon to open a menu is a no-go for us when that icon is used for therefore many other actions, similar to rising quantity, brightness, or contrast or adding items to lists. Forefathers Group is a design studio that clearly puts lots of thought and energy into the desktop design of their website. The very first thing the user is greeted with once they land on the desktop model is a silent hero video of some puppet designers hashing out their every day lives within the studio.
However, if we had one gripe about this responsive web site instance, it will be the use of the + icon to store menu options instead of a hamburger menu. Generally, utilizing icons that agree with most customers’ mental fashions takes desire over type.
For instance, the header text the person sees and the CTA button to watch the video overlap the hero video, and the button is clear. Another noteworthy side is their method to content hierarchy when cutting down their content for smaller resolutions.