Design
Find the feel of your next idea
Nine design languages. Twenty-seven original interface concepts. Explore the layouts, materials and details that give each one its character.
Zocri · 5 min read · Sources checked
Start with a feeling, then give it a name
Soft and calm. Bold and graphic. Playful and sculpted. A design style gives you a useful way to describe the feeling you want, and a shared language for the shapes, surfaces and layout that create it.
The nine styles below appear in the linked reel. For each, explore a full interface composition and two more applications of the same language. Compare the navigation, type, surface treatment and controls, not just the colour. These are original fictional concepts with illustrative controls, not customer work or finished apps.
When Zocri asks about design, choose from four suggestions fitted to your request. Each suggestion explains why it could work for your product. You can also describe your own direction or let Zocri choose. A style is a starting point; your audience and their main task still guide the result.
Skeuomorphism
Brushed metal, recessed meters and rotary knobs turn a recording tool into something familiar to the hand.
Paper edges, binding rings and a stamped date make a digital journal feel like an object you keep.
A tactile shutter dial and engraved settings borrow the hierarchy of a physical camera.
Original concept interfaces for comparison. The controls shown are illustrative.
Controls borrow the shape, texture and depth of real objects. A dial looks turnable; a notebook looks like something you can write in.
Picture it: An audio studio with rotary volume knobs, a brushed-metal mixer and a recording meter.
A good fit: Music tools, creative utilities and products where a physical metaphor makes an unfamiliar action easier to understand.
Keep in mind: Keep labels and keyboard controls clear. Decorative realism should never make a simple action harder to find.
Neumorphism
The timer and its controls appear pressed from the same material. Text and selected states still carry the meaning.
A raised temperature dial and inset mode controls create depth without introducing a separate card colour.
Soft highlights distinguish raised playback controls from an inset progress track.
Original concept interfaces for comparison. The controls shown are illustrative.
Highlights and shadows make controls appear moulded from the same material as the background. Raised and inset surfaces create a quiet sense of depth.
Picture it: A focus timer with a soft circular dial and an inset progress track on a pale surface.
A good fit: Calm personal tools, timers and small control panels with a few focused actions.
Keep in mind: Soft shadows alone do not identify a button. Use readable text, visible boundaries, focus rings and clear selected states.
Glassmorphism
Frosted forecast panels sit over a scenic backdrop. Translucency connects the information to the setting.
A translucent search surface lets an atmospheric destination remain visible behind the practical controls.
More opaque glass supports dense financial information, while colour and fine borders separate the layers.
Original concept interfaces for comparison. The controls shown are illustrative.
Translucent panels blur what sits behind them. Fine borders, layered backgrounds and restrained shadows create the feeling of frosted glass.
Picture it: A weather app with a frosted forecast card over a colourful sky.
A good fit: Weather, travel, media and lightweight dashboards where the background adds useful atmosphere.
Keep in mind: Keep text on a sufficiently opaque surface and provide a solid fallback when blur is unavailable.
Claymorphism
Friendly type, rounded lesson cards and sculpted shapes create a playful learning world.
Soft volume turns a progress badge into a reward. The list beneath it stays simple and readable.
A cushion-like product illustration and chunky action make a small shop feel warm and approachable.
Original concept interfaces for comparison. The controls shown are illustrative.
Puffy shapes, generous corners and soft inner and outer shadows give objects a clay-like volume. Pastel colours often support the playful feel.
Picture it: A learning app with rounded lesson tiles, a sculpted star and a friendly progress badge.
A good fit: Learning, wellbeing, habit tracking and playful consumer products.
Keep in mind: Use the sculpted treatment for a few important elements. Dense tables and long forms still need simple, readable surfaces.
Brutalism
Exposed rules, oversized type and unapologetic colour establish a strong editorial voice.
Hard borders, cropped artwork and offset shadows give products the directness of a printed catalogue.
A rigid timetable becomes expressive through scale and contrast. Dates and actions remain easy to find.
Original concept interfaces for comparison. The controls shown are illustrative.
Exposed structure, strong borders and deliberately direct typography give the interface a raw, graphic character. Hard offset shadows can make actions stand out.
Picture it: A streetwear shop with oversized product names, black outlines and a bright add-to-bag button.
A good fit: Independent brands, creative portfolios, events and shops with a strong visual voice.
Keep in mind: Keep the navigation familiar and the reading order clear, even when the composition is unconventional.
Maximalism
Pattern, cut-out typography and illustrated stickers build a lively composition around one clear invitation.
Clashing type sizes and a saturated editorial collage make discovery feel energetic and unexpected.
Decorative blooms, scalloped labels and expressive colour create a recognisable shop identity.
Original concept interfaces for comparison. The controls shown are illustrative.
Rich colour, varied typography, illustration and layered details create a deliberately abundant composition. A clear hierarchy keeps that energy coherent.
Picture it: A music festival page that combines oversized dates, illustrated stickers and overlapping artist cards.
A good fit: Culture, entertainment, editorial projects and brands with plenty of personality.
Keep in mind: Give the primary action room to breathe. More visual material should not mean more competing priorities.
Liquid Glass
Luminous rims, curved translucent controls and glossy highlights suggest polished glass over rich artwork.
Glass-like controls float over a camera view. Their shape and bright rim separate actions from the image.
A compact itinerary combines a floating glass toolbar with quieter information surfaces.
Original concept interfaces for comparison. The controls shown are illustrative.
Glossy edges, curved translucent surfaces and luminous highlights suggest polished glass. On the web, a restrained interpretation can give controls depth without needing realistic refraction.
Picture it: A music player with a luminous rounded control panel floating above album artwork.
A good fit: Media players, premium utilities and interfaces with a few floating controls.
Keep in mind: Treat this as a visual direction, not a promise of a native platform effect. Keep controls legible over every background and respect reduced motion.
Bento Grid
Different-sized tiles establish priority: a main project, a useful metric, a deadline and a recent update.
A portfolio becomes a collection of distinct stories, with space allocated to each project’s importance.
A few purposeful tiles bring movement, recovery and a next action into a single glanceable overview.
Original concept interfaces for comparison. The controls shown are illustrative.
Content is grouped into an aligned grid of tiles with different sizes. Each tile has one job, and the larger tiles give the most useful information priority.
Picture it: A project overview with a large activity chart, a small upcoming-deadline tile and a wide recent-work panel.
A good fit: Dashboards, product overviews, portfolios and collections of related information.
Keep in mind: Bento is a layout approach and can combine with other styles. On phones, put the most useful tiles first and let them stack naturally.
Spatial UI
Perspective, scale and overlapping planes put the object at the centre while its controls occupy separate depths.
Floating windows suggest a spatial workspace. Clear labels and strong contrast keep the scene usable.
An object, an annotation and an orbit control form a visual explanation across three layers.
Original concept interfaces for comparison. The controls shown are illustrative.
Position, scale, perspective and depth make panels feel arranged in a three-dimensional scene. A web version can suggest that space while keeping ordinary mouse, touch and keyboard interaction.
Picture it: A product explorer with a central object, a floating details panel and controls arranged around it.
A good fit: Product exploration, visual learning and immersive presentations where depth helps explain the subject.
Keep in mind: A spatial appearance does not make a website an AR or VR app. Offer a clear flat layout on small screens and avoid motion that blocks reading.
Colour makes the style yours
Style and colour are separate choices. A bento layout can be calm and neutral or bright and expressive. Frosted glass can sit over a warm peach background just as easily as a cool blue one.
The colour question shows palettes as four circles with their hex values. The circles represent primary, secondary, background and accent colours, in that order. Choose a suggestion or start with the four blank circles to make your own palette. Tap each circle to open the colour wheel, adjust hue, saturation and brightness, or enter an exact hex value. Your four chosen colours go with your answer when you continue.
For a warm, expressive starting point, try berry #C14364, peach #FF916B, cream #EEE2D1 and teal #2CA18C. Use cream for breathing room and stronger colours for emphasis. Text still needs a readable foreground; every palette colour does not have to become a text colour.
If you already have brand colours or a visual reference, include them in your request. Zocri should build on the choices you have made. After choosing, review the actual screens on a phone and computer: the right look also makes the next action clear.