Website Design Styles and Layout, and Mobile App Screens and Navigation

What Design Style Actually Is

Two websites can offer exactly the same thing and still feel completely different. One feels trustworthy, one feels cheap, one feels exciting. That difference is design style, and it is decided long before the first word is read.

Style is not decoration added at the end of a build. It is how a business signals who it is for, what it is worth, and whether it can be believed — so it belongs in the plan, not in the polish.

A design style is the personality a website gives off before a single word is read. It is built from a handful of repeated choices — the palette, the type, the amount of space, the imagery, and how much or how little sits on the page — combined until they add up to a feeling.

Style is a business decision, not a taste decision. A bank that looks playful loses trust, and a fashion label that looks corporate disappears. The useful question is never which style I like, but which style makes the right customer believe this business.

The style has to match what the business sells, who it sells to, and how much it charges. A premium service earns its price partly through restraint — more space, fewer colours, better type. A discount marketplace earns attention through density and bright signals.

It also has to match the device the customer actually uses. Most Nigerian customers arrive on a phone, on mobile data, so a style built on heavy imagery and background video will feel slow no matter how good it looks. The best style is the one that still reads well on a small screen, on a slow connection, in bright sunlight.

Every Web Design Style, With Examples

Below is the full list of design styles you will meet on real websites, from the quietest to the loudest, each with live examples you can open and study. Most businesses end up blending two or three of them — a minimal layout with a colourful gradient, or a corporate structure with playful illustration — but being able to name each style on its own is what lets you say exactly what you want built.

Layout — Arranging the Page

Layout is the arrangement of the blocks on a page: what sits beside what, and how much room each one is given. It decides whether a page feels calm or crowded before any styling is applied.

A single column stacks everything in one line down the page. It is the simplest and most reliable arrangement, and it is what almost every phone shows. A grid places blocks side by side in columns, usually three or four across — which is how a shop shows products, or a services page lists what it offers. A magazine layout mixes wide and narrow blocks, large images and pull quotes, to give a page rhythm and a sense of editorial weight.

The rule of thumb is that complexity has to be earned. Start with a single column, move to a grid when there are things that genuinely sit side by side, and reach for a magazine layout only when the content is rich enough to carry it. Most business pages never need more than two.

White space is the empty area around and between elements, and it is the cheapest design improvement available. It separates sections, gives headings room to breathe, and stops a page from feeling like a crowded market stall. Spacing is not wasted space — it is what makes the important things stand out.

Spacing should follow one rhythm. If one section is spaced generously and the next is tight, the page reads as unfinished. Pick a small gap inside groups, a larger gap between groups, and a much larger gap between sections, then use the same rhythm everywhere. On a phone this matters even more, because a thumb needs a bigger target than a mouse.

Type, Colour and Imagery

These three decisions carry most of a site's visual identity. Get them consistent and a page looks professional almost by itself; get them inconsistent and no amount of extra detail will rescue it.

Typography is the choice and arrangement of text, and it decides whether a page feels professional before anything else does. Two typefaces are almost always enough — one for headings, one for body text. A type scale is the fixed set of sizes used across the site: a large size for the page heading, smaller ones for section headings, and one comfortable size for paragraphs.

Readability is the only hard rule. Body text should be large enough to read without zooming, in lines short enough that the eye does not lose its place. On a phone that means fewer words per line and more line height — not smaller text to squeeze more in.

Colour carries meaning long before it carries decoration. One strong brand colour used for actions, a small set of neutral greys for text and backgrounds, and one accent for warnings or success is a complete palette for most businesses. Every extra colour dilutes the ones that matter.

Contrast is what makes colour usable. Text has to stand clearly off its background — pale grey text on white looks elegant until someone is reading it outdoors on a phone. The same applies to buttons: the label must be legible against the fill, or the button may as well not be there.

Images do work that text cannot: they show the product, prove the business is real, and set the mood in a single glance. But they cost loading time and attention, so each one has to earn its place. A photograph of the actual business beats a stock photo of strangers in an office, and a clear product shot beats a decorative pattern.

Icons are the small symbols used to save space — a search glass, a cart, a menu bar, a phone handset. They work when they are instantly recognisable and used sparingly. An icon nobody recognises is worse than a short word, because at least the word is understood.

Designing for Every Screen

A design is not finished when it looks right on the screen you built it on. It is finished when it still works on the smallest phone, the oldest browser and the slowest connection your customers actually have.

Responsive design means one website that rearranges itself to fit whatever screen it is opened on. The same page shows three products across on a laptop and one product at a time on a phone, without being built twice. Mobile-first takes that further: design the phone version first, then add the extra width for larger screens.

Mobile-first is not a technical preference, it is a reflection of reality. Most visitors arrive on a phone, so the phone is the version that matters most. A page that only works well on a desktop is a page most customers never really see.

A visitor learns the site on the first page and then expects every other page to behave the same way: the same header in the same place, the same button colours, the same spacing, the same wording for the same action. Consistency is what turns a collection of pages into a product.

Inconsistency is invisible to the person who built the site and obvious to everyone else. A button that is blue on one page and green on another makes visitors hesitate, and hesitation costs sales. The fix is simple: decide the few rules once — colours, type sizes, spacing, button styles — and apply them everywhere.

How a Mobile App Is Arranged

A mobile app is not a small website. It has no address bar, no page titles and no scroll-to-the-bottom habits — it has screens, and the user moves between them with a thumb. The first impression is made in seconds, and it is made before the main screen even appears.

The splash screen is the brief branded screen shown while an app loads — a logo and a colour, nothing more. It covers the wait and reassures the user that the right app opened. If it stays on screen for more than a second or two, it stops being reassurance and becomes a delay.

Onboarding is the short sequence that follows, usually three or four screens, explaining what the app does and why it is worth the permission it is about to ask for. Good onboarding is brief and skippable. Most users will not read it, so anything essential has to be visible in the app itself, not only in the introduction.

The home screen is the app's front door: the main actions, a summary of what matters, and a way into everything else. A dashboard is a home screen built around data — balances, orders, progress, recent activity — for an app that a user returns to in order to check on something.

Whatever the app does, the home screen should answer the same question a website hero answers: what can I do here, and what should I do next? The most common action should be reachable with one tap, without scrolling or hunting for it.

Moving Around an App

On a website, people navigate with a menu and a mouse. In an app, they navigate with a thumb, and the conventions are different. Learning those conventions is most of what makes an app feel natural rather than awkward.

The bottom tab bar is the row of three to five icons pinned to the bottom of the screen, and it is the main way people move around a mobile app. It sits at the bottom because that is where a thumb reaches on a phone held in one hand — which is how most people hold a phone.

Five items is the practical limit. Each tab should be a destination rather than an action, and the current tab should be visibly marked. Because the bar is always on screen, it is also the clearest place to show the user where they are.

The side menu is the drawer that slides in from the edge, opened by a menu button or a swipe. It holds the longer list of destinations that would never fit in a tab bar: settings, help, account, and the secondary sections of the app. Because it stays hidden until opened, it keeps the main screens clean.

The trade-off is discoverability. Anything hidden inside a side menu is used far less than anything visible on screen, so the main journeys belong in the tab bar and the side menu is left for the rest.

An app is a set of screens, and moving between them is not the same as clicking links on a website. Screens are pushed onto a stack as you go deeper, and the back gesture or arrow pops them off again, returning you to exactly where you were. That is why an app remembers your scroll position when you come back to a list.

Getting this wrong is one of the most common mobile mistakes: a back action that jumps to the wrong place, or a screen with no way back at all. Every screen except the home screen needs an obvious way back, and the phone's own back gesture should always do the sensible thing.

Gestures are the actions performed with a finger instead of a button: swipe to go back, swipe to dismiss, pinch to zoom, long-press for options, pull down to refresh. They make an app feel fast once learned — and they are invisible until they are learned, which is why they should always be a shortcut, never the only way to do something.

Pull-to-refresh is the most familiar of them: the user drags the content down and a spinner appears while new information loads. It is worth supporting on any screen that shows data which changes, because it gives the user a way to check for updates without closing and reopening the app.

Reaching the User Outside the Screen

The screens are only half of an app. The other half happens when the app is closed and the phone is in someone's pocket — and that is where notifications and permissions decide whether the app is welcome or resented.

A push notification is a short message the app sends to the phone's lock screen, even when the app is closed. It is the only channel an app has that reaches a user who is not using it, which makes it powerful and very easy to abuse.

The rule is that a notification must be worth interrupting someone for: an order has shipped, a payment has landed, a booking is confirmed. Promotional messages sent too often get the app muted or deleted, and once notifications are switched off they are very hard to win back.

Permissions are the phone-level allowances an app asks for: camera, contacts, location, notifications, storage. Each one is a promise about what the app can reach, and each one has to be explained in plain language.

Ask only for what the app genuinely needs, and ask at the moment it is needed rather than all at once on first launch. A photo app that demands access to contacts before it has shown a single picture teaches the user to distrust it — and a refused permission can usually never be asked for again.