Adaptive Layout Thinking
Reorganizing elements across different screen sizes while preserving content priority, without loss, crowding, or visual breakage.
The five levels
Each anchor describes what separates one level from the next — not a general description of quality. This is the text the evaluator itself reads.
-
Level 1 Below Standard
The layout is fixed for one size only, with elements overlapping or spilling past screen bounds at other sizes.
Example Text running past the screen edge on mobile with no wrapping.
-
Level 2 Approaching
Basic reflow exists between two sizes, but content priority shifts, or an important element gets lost.
Example The primary action button disappearing below the fold on mobile.
-
Level 3 At Standard
A layout that clearly reflows between mobile and desktop while preserving every element and its original priority.
Example A three-column grid collapsing into a single column in the same order on mobile.
-
Level 4 Above Standard
Graduated adaptation across three or more breakpoints, adjusting the content's own density, not just its size.
Example A long description shrinking to a shorter summary on narrow screens.
-
Level 5 Excellence
A fully fluid layout system feels custom-designed for every screen size, even though it is built from one unified set of rules.
Example The same components looking purpose-built on both a smartwatch and a large display.
Where does your own work sit on these levels?
Submit one work to be read against this criterion alone: your position across the five levels, why you are not higher and why not lower, three literal quotes from your own work, and one exercise with its success check. Your first card is free.
Price: 7 SAR · Included in Pro & Artist Plus · First one free — Pricing details
Read my work by this criterionOther criteria in the same art
Guiding viewer's eye with clear visual priorities
The five levels →Correct connection and shaping of Arabic letters without breaking or distortion, with awareness of script and kashida as an aesthetic decision.
The five levels →Laying out right-to-left for Arabic content: direction, alignment, and mirroring of directional elements.
The five levels →Guiding the viewer's gaze along a defined path (entry point, then secondary content, then call to action) using size, contrast, and position together.
The five levels →Using empty space as active design element, not waste
The five levels →Selecting harmonious color palette expressing identity or message
The five levels →Aligning element positions to a grid and alignment lines that give the design order
The five levels →Using differences in size, color, and weight to build distinction and focus
The five levels →