0

Description

I am currently designing a website where, for the hero section in the desktop version, half of the page is used for the company's value proposition and call to action, and the other half of the page is used for an interactive 3D animation. The height of the value proposition takes up a half of the halved section (a quarter of the page), and the height of the animation will take a majority of the halved section. Users will be able to click and swipe on the interactive animation.

The layout looks like below:

Layout of Website

Problem

I am attempting to add responsiveness to the website for different users. For the mobile version, where the width of the viewport is significantly less than the height of the viewport, this design will struggle; neither the value proposition nor the interactive 3D animation will fit in only half the width of a phone.

How do I reposition or redesign the layout of the value proposition and animation such that I can 1) still interact with the animation and 2) see the value proposition simultaneously?

Thanks in advance.

1
  • 1
    The size and space that the animation occupies are clear because it's a single element, while the value proposition is not, how many elements make it up? What priority does each have? A real mockup would help to elaborate an answer.
    – Danielillo
    Aug 23 at 9:45

1 Answer 1

0

You have enough data to solve the design, perhaps you should gather all the constraints and create some new design guidelines for the responsive screen interface:

  • The animation must occupy the entire screen width, the only way a user can interact with it

  • The Value Proposition should occupy the screen width since it is an important piece of information

  • Both CTAs must be visible since it is the immediate action of the screen

  • The only element that offers some permissiveness in terms of freeing space is the description, personally I would make it interactive, removing it from the main screen, and creating the visible/hidden option.


The Value Proposition with an info button that flips the panel to see the information behind it plus a Go back button

enter image description here


A third lower hierarchy CTA with the VP description popup

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.