• €455

• 27 designs

• 6 designers

---

Landing Page Design Brief

We need the development of 5 interactive and optimized web card templates, each designed specifically for a different type of topic. These templates will initially be displayed in a chat client on both desktop and mobile devices, and subsequently shared across major social networks. The cards will serve as response balloons in the chat for queries related to various topics such as local business searches, news, history, sports, etc. Each template will be tailored to optimize the presentation of specific content for each topic.The goal is to create cards that capture user attention through engaging designs, easily readable text, and light animations, while ensuring excellent cross-platform compatibility and rapid loading speed both in the chat client context and across various social media video formats. The content of the cards should be designed to be effective in a chat card loop, providing an engaging and informative user experience.The cards will be used in specific video formats for platforms like Facebook Feed, Instagram Reels, YouTube Shorts, LinkedIn Video, and TikTok, with detailed technical specifications provided below. The project requires the use of modern web technologies, such as HTML5, inline CSS, and JavaScript, with a focus on performance optimization and adherence to web accessibility standards.

We require the development of a web page that meets the following criteria:

Responsive Design: The page must be optimized to adapt perfectly to the resolutions used by the most popular social networks, ensuring a smooth and consistent user experience on all devices (smartphones, tablets, desktops).
Text: The page should contain easily readable text, which may include rather lengthy texts.
Images: Inclusion of standard images and panoramic images (360 degrees).
Animations: Use lightweight animations to enhance interactivity without compromising page loading speed.
Inline Styles: Prefer the use of inline styles for better management and performance.
External Scripts: The use of external scripts is allowed as long as they are hosted on reliable CDNs. However, it's essential that these scripts are lightweight and do not negatively impact the page loading speed.

The page should be lightweight and designed with a strong focus on loading speed.
Implementation of optimization techniques such as lazy loading, image compression, and code minification.
The page must comply with web accessibility standards.
Ensure that all content is accessible and easily navigable.
The cards must be created in HTML5.
The CSS must be inline and compatible with:

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
Inline JavaScript and fast CDN-loaded scripts are allowed and should be executed on 'DOMContentLoaded' of the card (include a loading spinner).
All cards must be responsive.
All cards must respond (via CSS media queries) to a specific format related to the social platform and the video format to be created.
List of social video formats:
Facebook Feed Video:
Recommended dimensions: 1280 x 720 pixels for both landscape and portrait
Minimum width: 1200 pixels
Supported ratios: 16:9 (landscape), 9:16 (full portrait)

Facebook Stories:
Recommended size: 1080 x 1080 pixels
Minimum size: 600 x 600 pixels (1:1 aspect ratio)
Aspect ratios: from 1.91 to 9:16, with gradient-colored bars above and below videos less than 9:16

Facebook Reels:
Resolution: minimum 540 x 960 (540p) (recommended 1080×1920 or higher)
Supported aspect ratios: 9:16

Instagram in-feed video:
Video landscape: 1920 by 1080 pixels (16:9 aspect ratio)
Square video: 1080 by 1080 pixels (1:1 aspect ratio)
Vertical video: 1080 by 1350 pixels (4:5 aspect ratio)

Instagram Reels:
Supported aspect ratios: 0.01:1-10:1 (9:16 recommended)

Instagram Stories Video:
Recommended size: 1080px by 1080px pixels
Minimum size: 600 x 1067
Supported aspect ratios: 9:16

X landscape videos:
Recommended size: 1280 by 720 pixels
Supported aspect ratios: 16:9

X Portrait and Square Videos:
Recommended sizes: 720×1280 (portrait), 720 by 720 pixels (square)

YouTube Video:
Recommended sizes:
426 by 240 pixels (240p)
640 by 360 pixels (360p)
854 by 480 pixels (480p)
1280 by 720 pixels (720p)
1920 by 1080 pixels (1080p)
2560 by 1440 pixels (1440p)
3840 by 2160 pixels (2160p)
Supported aspect ratios: 16:9 and 4:3

YouTube Shorts:
Recommended sizes:
240 by 426 pixels (240p)
360 by 640 pixels (360p)
480 by 854 pixels (480p)
720 by 1280 pixels (720p)
1920 by 1080 pixels (1080p)
2560 by 1440 pixels (1440p)
3840 by 2160 pixels (2160p)

LinkedIn Video:
Maximum size: 4,096 by 2,304 pixels
Supported aspect ratios: from 1:2.4 to 2.4:1

TikTok:
Format 9:16 (portrait)
Recommended dimensions: 1920 by 1080 pixels (1080p)


We need the UI and implementation of 5 cards with animations, which will first be inserted into a virtual assistant chat (like bing chat), and then shared on social networks as videos(Our system generates an mp4 of the animation). The cards contain images (from google image API), text and 360-degree overviews, for local activities for example. We need them to be designed according to the type of information they contain, so with different animations depending on the type of card. Example: a response that contains 1) card about a business (as in the figma I sent you), or a response that contains 2) information about a sporting event (images attached), 3) Web search, 4) News, 5) product card. The cards should have the characteristics indicated in the brief .The images we have available, related to the responses in the chat, are generated via real-time api calls, along with the ai responses, cannot be edited or cropped, and are often small in size.

The attached figma and video and pictures are just an example to make it clear what they are for. We want creative design that is not something already seen and traditional. Be creative.

https://www.figma.com/proto/57kfknY0Pj4dG1FexBNgur/MAIA-CARD?page-id=0%3A1&type=design&node-id=809-3230&viewport=3278%2C4251%2C0.5&t=dnWl98jixrl7to8G-1&scaling=min-zoom&starting-point-node-id=804%3A2455

https://www.figma.com/proto/57kfknY0Pj4dG1FexBNgur/MAIA-CARD?page-id=0%3A1&type=design&node-id=809-3413&viewport=3278%2C4251%2C0.5&t=dnWl98jixrl7to8G-1&scaling=min-zoom&starting-point-node-id=804%3A2455&mode=design

In attachment, a very ugly and rudimentary example

Target Market(s)

B2C

Industry/Entity Type

media content

Coding

Coded - Design and coding required

---

Colors

Colors selected by the customer to be used in the logo design:

---

Look and feel

Each slider illustrates characteristics of the customer's brand and the style your logo design should communicate.

---

Requirements

Must have

• Innovative, Engaging

Nice to have

• Card not seen before

Should not have

• Traditional card

---

Files

Download all files - 6.3 MB