# UI Design for Websites UK Source: https://dijitulwebdesign.co.uk/ui-design/ Updated: 2026-10-18 > dijitul web design creates website UI design for UK businesses: the typography, colour, spacing, buttons, forms and icons visitors see and touch. Every interface is designed in Figma as a small component system, checked for WCAG 2.2 AA contrast and built to match exactly. Custom-designed websites start from £250 + VAT. Price: From £250 + VAT ## Problems this solves - Your site looks like a template that three competitors are also using - Every page uses different fonts, button styles and colours - Grey text on a white background that older customers can't read - Buttons on mobile are so small people tap the wrong thing - Your brand looks polished in print and amateur online - Forms look fine until someone makes a mistake, then nothing tells them what went wrong ## Key facts - UI design is the visual and interactive layer: type, colour, spacing, buttons, forms, icons - Designed in Figma as reusable components and styles, not one-off pages - Body text contrast of at least 4.5:1 and UI component contrast of at least 3:1 (WCAG 2.2 AA) - Pointer targets at least 24 by 24 CSS pixels to meet WCAG 2.2 criterion 2.5.8 - Every component has hover, focus, active, disabled and error states designed - No templates: Starter websites from £250 + VAT include a custom design - Extra design work after sign-off at £45 an hour + VAT ## What UI design covers User interface (UI) design is everything a visitor sees and interacts with: headings, body text, colours, buttons, form fields, menus, icons, cards and the white space between them. Where UX design decides what goes on a page and in what order, UI design decides how it looks and how it responds when someone hovers, taps or types. Good UI does three jobs. It makes your business look trustworthy within a second or two. It makes the important things, like your phone number and your main button, impossible to miss. And it makes text easy to read for everyone, including people with poor eyesight reading on a phone in sunlight. ## We design systems, not single pages Rather than drawing each page from scratch, we build a small design system in Figma first. That means: - **A type scale:** usually five or six sizes, for example 16 or 18 pixel body text stepping up to a 40 to 56 pixel main heading on desktop, with matching line heights. - **A colour palette** with named roles: primary action, text, muted text, backgrounds, borders, success and error. - **A spacing scale** based on multiples of 4 or 8 pixels, so gaps feel consistent everywhere. - **Components:** primary and secondary buttons, input fields, cards, accordions, navigation and footers, each with their states defined. The system means a new service page you add next year looks as if it was designed on day one. It also makes the build faster, because the same components become CSS classes or WordPress blocks. ## Accessibility is part of the visual design A lot of accessibility problems are visual decisions made early, so we check them in the design file rather than after launch. Under WCAG 2.2 Level AA, normal body text needs a contrast ratio of at least 4.5:1 against its background, large text at least 3:1, and the visible parts of buttons, form borders and focus indicators at least 3:1 against what sits next to them. WCAG 2.2 added a target size rule (2.5.8) requiring pointer targets of at least 24 by 24 CSS pixels, or enough space around them. We go further on mobile and size main buttons around 44 to 48 pixels tall. We also never rely on colour alone, so error fields get a message and an icon, not just a red border. More on this on our accessible web design page. ## States, motion and the details people notice A static mock-up only shows one moment. Real visitors hover over links, tab through forms with a keyboard, submit with a missing field and wait for things to load. We design each of those moments: - hover and pressed states that confirm a tap registered - a clear, thick focus outline for keyboard users - error and success messages written in plain English - loading states on forms so people don't press send three times - motion kept subtle and switched off for anyone whose device is set to reduce motion These details are what make a site feel finished rather than merely decorated. ## Working from your brand If you already have a logo, colours and fonts, we turn them into a web-ready system. Brand colours often need a darker or lighter shade added so text stays readable, and print fonts sometimes need a web-licensed equivalent. If you have no brand yet, our sister company handles logos, branding and photography, and we design the site to match. We'll also check your logo works small, in a mobile header at around 32 to 40 pixels tall, and as a favicon. ## Price Custom UI design is included in every package: Starter websites from £250 + VAT, Business from £500 + VAT and Ecommerce from £750 + VAT. None of them uses an off-the-shelf theme. If you want an interface redesigned on an existing site, or extra design rounds, it's £45 an hour + VAT. See pricing or custom website design. ## What you get - Moodboard and two visual directions to choose from - Type scale, colour palette and spacing system as Figma styles - Component library: buttons, cards, forms, navigation, alerts - Desktop and mobile designs for key templates - Interaction states for every component, including keyboard focus - Contrast and target size checks against WCAG 2.2 AA - Design built pixel-accurate into the live site ## FAQs ### Is UI design the same as web design? UI design is one part of web design. Web design also covers planning, content, UX, development, SEO and launch. UI is specifically the visual and interactive layer: type, colours, buttons, forms and layout details. On every dijitul project the same team does the UI and the build. ### Do you use website templates or themes? No. Every site gets a custom interface designed in Figma for your business. On WordPress we build a lightweight custom theme rather than buying a multipurpose one, which keeps pages faster and stops your site looking like a competitor's. ### Can I see the design before it is built? Yes. You get desktop and mobile designs in Figma, viewable in any browser, and you can comment directly on them with a free Figma account. Two rounds of changes are normal. We only start the build once you've approved the design. ### Will the design meet accessibility standards? We design to WCAG 2.2 Level AA. That includes text contrast of at least 4.5:1, visible focus outlines, adequate target sizes and error messages that don't rely on colour alone. We check these in the design file and again on the finished site. ### Can you redesign just the look of my current site? Often, yes. If the structure and content are sound and the platform is in good health, a visual refresh of fonts, colours, buttons and key templates can be done at £45 an hour + VAT. If the underlying site is slow or outdated, a full redesign from £250 + VAT may be better value. ## Prices and contact Prices (from, + VAT): Starter £250 (Up to 5 pages, Custom design, not a template, Mobile-first build, Contact form and click-to-call, Google Business Profile set up, Basic SEO foundations, Analytics and Search Console); Business £500 (Up to 15 pages, A page per service, written to rank, Copywriting included, Full schema markup, Local SEO groundwork, Speed optimised to pass Core Web Vitals, Conversion tracking configured, Training session and recorded walkthrough); Ecommerce £750 (Shopify or WooCommerce, Product and category structure built to rank, Payments and delivery rules configured, Click-and-collect and local delivery, Accounts or EPOS integration, Google Merchant Centre feed, Abandoned cart recovery, Staff training on order management); changes £45 an hour. All prices are "from" and exclude VAT. Every project gets a fixed quote before work starts. Domain registration, stock photography, premium plugins or apps and hosting are listed in the quote, never added later. You own the website and the domain. Aftercare: Hosting from £1 a day + VAT (https://dijihost.co.uk/); Website care plans from £25 a month + VAT (https://dijitulsupport.co.uk/). Contact: https://dijitulwebdesign.co.uk/contact/ · 01623 650333 · info@dijitul.uk