4 Posters - Website (Case Studies)
Hello! A guide to creating interesting and aesthetic online posters with responsive for mobile devices and tablets using a grid prototype method (8 x 5) in the STUDIO AI.
In this article you will learn about the stages of creation as well as interesting information and tips.
----
See the project in LIVE PREVIEW
⚪ First | 🟢 Second | 🟣 Third | 🟠 Fourth
About STUDIO
STUDIO is an AI-augmented design app for creating modern websites.
Get early access on www.studio.design
1️⃣ The grid will help you to match the elements. The design becomes more aesthetic and, together with the matching typography, creates a uniform design that can be easily moved to the corner in the grid.
Start by creating a workspace for desktop with dimensions (1400x900px). For better spacing you can use inner padding (20px). The grid contains 8 elements (horizontal) and 5 elements (vertical).
As you noticed in the first view all elements are inside the grid. You can merge grids together. The photo in the preview project contains a 3 x 3 grid. The texts are adjusted to the corners. If you need to create responsive versions. Check out the video below.
If you want to see another design created in STUDIO AI using a grid with different dimensions (6 x 8). Check this another Dribbbble shot. This design uses internal grid padding and a flip card effect.
2️⃣ STUDIO AI allows you to create your own breakpoints for responsive. As you lower the resolution, the amount of grid also changes (12.5 / 25 / 50).
The project uses the distance method 4px (4/8/12/16px...) Font scaling was also used in responsive to perfectly match the elements inside the grid and for the optical appearance..
Sizes in pixels 📏
➡️ Desktop: 1400x900px (grid width: 12.5%)
➡️ Tablet: 820x900px (grid width: 25%)
➡️ Mobile: 420x900px (grid width: 50%)
Sizes may differ from those listed above. If you need to create a Mobile for 390px that will be fine too. I only showed an example value for Mobile. Since the mobile version is a range of (320px - 540px), check out further videos of the design responsiveness between these ranges.
3️⃣ Use a varied palette of colors and combine them with each other. Use the sample color palette or create your own.
Find the meaning and symbolism of colors and direct it to your audience. Don't use too many items on your projects. Remember that you cannot run out of space while being responsive. STUDIO AI allows you to disable the display of individual elements for responsive.
Need a color palette? 🎨 Check our pallet proposal and choose the one that best suits your requirements.
4️⃣ Implementing the project in STUDIO AI.
Create layers using the editor panel and give them the appropriate sizes and styles. I used sizes in percentages so that scaling in responsiveness will contain appropriate appearance.
I used a font from Google Fonts: Space Grotesk with sizes 172px / 48 px / 16 px / 12px. I also added a layer with a noise texture for better visual effects. Colors pallete: #72478D and #EBAD83. Photo from unsplash.
---
You can also create such a project using other software: ⚪ Figma ⚪ Adobe XD.
5️⃣ How to make the project ✅ unique.
Wondering how you can improve your projects? Here are some tips on how to start designing projects on a grid.
➡️ Try to create some texts / heading and image outside the board, and then place them on the project in the next step putting them in destination place..
➡️ Find interesting fonts and check their appearance on the project. You can combine two fonts in one project.
➡️ Use combinations typography: Numbers / Texts / Special characters / Hashtags / Parentheses / Brackets / Geographical coordinates / City names.
➡️ Do not use too many elements, leaving empty spaces. Remember that the elements must also fit while being responsive.
➡️ Add additional elements: Dots / Triangles / Squares / Rectangles and lines which can also be blurred.
Do you have any other interesting tips? 🤔 If you have any questions, please comment.
6️⃣ Create varied layouts.
The grid layout gives you endless possibilities. Try to create custom layouts and place elements in different places. You can disable the grid lines in the end result. I created 7 different layouts using the same elements just placing elements elsewhere.
Colors pallete : #FDC7DA and #DD503D. Photo from unsplash.
7️⃣ Meet STUDIO AI
STUDIO is an AI-augmented design app for creating modern websites.
We show how easy it is to introduce elements to the project and how to adjust the project to the resolution. You can change their appearance for each breakpoint. Using the align-content tool will ideally help you to easily arrange where the content should be placed in the layer.
Go further than the speed of thought. STUDIO AI reads and understands your designs, and with nothing more than a single line of feedback, perform complex actions autonomously.
---
➡️ Try it in early access on the site STUDIO.DESIGN
---