UX/UI design, web design and brand identity, with our own development team

UX/UI design
and web design

User experience (UX) and user interface (UI) design with research, wireframes and a clickable prototype, in the same team that builds the site. The approved design runs just the same on mobile, in dark mode and with a green PageSpeed score.

Research·wireframe·prototype·design system·brand identity and logo
Get a quote→

What the visitor sees
is built from five layers

The visitor sees the type, the colour, the button and the motion. Underneath, four layers do the work: research, structure, interaction and brand identity. When these are right, the visitor gets from click to click all the way to the quote request or the checkout.

We designed and built the webpot.hu interface itself with the same method we use for our clients: the desktop and mobile views come from a single design.

15 years of experience
2–3 weeks for a business website design
2 revision rounds included in the quote
The hero section of the webpot.hu WordPress site in desktop view
webpot.hu · WebPot CMS · live
The same hero in mobile view

The five layers of UX/UI design

Each one comes with a decision we make together at the start of the design process, before a single colour reaches the screen.

  • 01

    Research and goals

    Who comes, from where, on what device, and what they want to achieve: statistics, competitor interfaces, a few client conversations.

  • 02

    Structure and wireframe UX

    Menu, sitemap and the visitor's path to the quote request, worked out on a grey wireframe.

  • 03

    Visual design UI

    Typography, palette, spacing and components in a design system, for light and dark mode.

  • 04

    Interaction and motion

    Buttons, form feedback and entrance animation, which switches itself off when reduced motion is set.

  • 05

    Brand identity and graphics

    Logo, colour palette, typefaces, SVG icon set and visual style: this is what makes the site recognisable.

UX is the sketch,
UI is the finished interface

Drag the slider: on the left, the wireframe of the Thai Balzsam webshop's landing screen; on the right, the same screen live. UX designs how the interface works: what's where, and how many clicks the journey takes. UI designs how it looks: type, colour, icon, image.

The Thai Balzsam webshop's landing screen live
Wireframe wangpromherb.hu · WebPot CMS · live

You can move it by dragging with the mouse, by touch or with the arrow keys.

What gets decided on the wireframe

  • 01 The search, wishlist and cart in one row, in the header, in the same place on every page.
  • 02 The product at the centre of the screen, arranged around its three main benefits.
  • 03 The variant's colour and a short description show above the fold, without scrolling.

What the visual design adds

  • 01 The packaging's green as the base colour, alongside a gold logo and white body text.
  • 02 Line icons for the benefits, with a curved arrow pointing to the product.
  • 03 A background pattern and a curved section edge that leads the eye into the next block.

Five steps
from brief to live site

The design takes shape in short rounds, one decision per round, made together with you. At the end of each step you get something you can view, try out or pass on.

The wireframe and the clickable prototype open in the browser and can be commented on without any design software. A business website design is ready in 2–3 weeks this way, a webshop or web app interface in 4–6 weeks, including the review rounds.

This is enough for the first conversation

  • Brand identity logo and brand identity guidelines, if you already have them
  • Current site its address and its statistics: GA4, Search Console
  • Examples a few sites you like or that put you off
  • Goal getting a quote, a purchase or a sign-up
The Thai Balzsam splash screen in mobile view
wangpromherb.hu · mobile view

The splash screen seen in the slider, on mobile: the variant name moves to the top, the effect icons go on either side of the product.

01
Brief and research in the first week

A conversation about your goals, your target audience and the materials you already have: logo, colours, copy, statistics. We look at your competitors' sites and where your visitors come from.

Output design brief goals and priorities
02
Structure and wireframe first round of revisions

The menu structure, sitemap and a grey wireframe of the main pages. This is where we decide what goes above the fold, where the quote request sits and how many clicks the path to the goal takes. Changes are cheapest at this stage, so this is where we review the most.

Output sitemap clickable wireframe
03
Visual design second round of revisions

The finished design of the homepage and a typical subpage, in desktop and mobile view, dark mode included. If needed, we show two style directions and carry the chosen one forward: the rest of the site is built from this design system.

Output UI design design system icon and image set
04
Prototype and testing on real devices

We go through the design on a phone, a tablet and a slow network, alongside the designer's monitor. We check contrast, keyboard operation and loading time before it goes live.

Output approved design test report
05
Build and measure even after launch

The design is built on WebPot CMS, WordPress or Magento 2, then we measure on the live site where visitors get stuck and fix it there. After handover, your company edits the content itself.

Output live site measurement training

Logo, icon, image, motion.

The Sagehome site's hero section with a house illustration drawn in code
okosvilla.hu · illustration drawn in code · live

An interface is only as good as the graphics it's built from. Graphic design is done in-house too: icons, illustrations, hero images and ad creative all from the same style, so your website and your adverts look like one brand.

Most of the graphics are born from code: SVG, canvas, animation. They stay sharp on every screen and download very little data.

SVG icon set, sharp at any size
2 palettes, for light and dark mode
AVIF and WebP images, cropped to size
Request brand identity or graphics→

Brand identity design and graphics: five areas, one style

If you don't have a brand identity yet, we create one. If you do, we adapt it for the web: screen-readable type sizes, high-contrast state colours, a dark mode palette, an icon style.

Graphic design work can also be commissioned on its own, without a website: a logo, an icon set or a campaign's creative.

  • 01 Logo design and brand identity guidelines Logo variants, colour palette, typefaces and usage rules in one guide, if you don't have a brand identity yet or need to refresh it.
  • 02 Website graphics Hero images, illustrations, a custom SVG icon set and background patterns, for dark mode too.
  • 03 Advertising and social creative Google Ads and Facebook banner sets in a style that matches your site, so the experience doesn't break after the click.
  • 04 Image handling WebP and AVIF conversion, sized variants and alt text that both image search and screen readers understand.
  • 05 Animated elements Entrance and scroll-triggered animation, micro-interactions on buttons, from code, with no video file.

What's in the approved design runs on the site, pixel-perfect. The button is drawn by the same team that codes it.

Why keep design
and code in one hand?

Four things that usually get lost in the handover between designer and developer. With us, all four stay at the same table.

No loss in translation

The design is built by the same team that drew it, so there's no handover document for anyone to misread. Whether an idea is buildable comes out in a single conversation.

Only buildable ideas make it into the design

The developer sits in from the first sketch. Every element goes into the design so it's comfortable to use on a phone and loads fast.

Speed is part of the design

Image format, font loading and the cost of animation are decided in the design stage. That's why our sites score 97–100 on Google PageSpeed even with a striking interface.

One point of responsibility, one deadline

Designer, developer and support are one team. One partner takes you through from the brief to the live site, and then through support too.

How much does UX/UI design cost?

For a website project, design is part of the build: a bespoke business website, design included, starts from €1,900 + VAT. Standalone brand identity design, logo design and larger web app interfaces are quoted separately. A few sentences about your project are enough: you'll get an itemised, written quote within a day.

€1,900 upwards, + VAT
1 day for an itemised quote
Free to request a quote
The magento2.hu splash screen in dark mode
magento2.hu · WebPot CMS · dark mode

Four things move the price

01

Number of screens

How many unique page types you need: homepage, service, product, basket. Each one is built for desktop, mobile and dark mode.

02

Brand identity

Work goes faster with an existing logo, colours and brand identity guidelines. A brand identity designed from scratch is a separate, one-off item.

03

Interaction

A contact form is simple. A calculator, a multi-step form, custom animation or illustration is where the real design work lies.

04

Starting point

Redesigning an existing site starts from its statistics. It typically touches fewer screens than a new site.

The quote is itemised, with a deadline next to each item. Build details: business website development, website and webshop development, web app development. The price ranges are summarised in the website development prices 2026 article.

Frequently asked questions about UX/UI design

20 questions in five topics: what makes an interface usable, how much it costs and what you receive at the end. If yours isn't among them, feel free to ask.

Ask us a question

Basics and needs

What is the difference between UX and UI design?

UX (user experience) designs how the interface works: structure, user journeys, the logic of forms. UI (user interface) designs how it looks: typography, colours, icons, buttons, motion. Together they create a website that's both usable and true to your brand, which is why our team handles both.

What is the difference between a wireframe and a prototype?

A wireframe is the grey sketch of a screen: what goes where, how much space it gets and in what order it appears. It doesn't yet include colour, type or the final imagery, so it can be changed quickly and cheaply.

A prototype takes it a step further: it's clickable, with a working menu and buttons, so you can try out the visitor's journey all the way to the enquiry form or the basket before a single line of final code is written.

Do you need UX/UI design for a small business website too?

Yes, just on a smaller scale. With five subpages, a short round of research is enough, but the menu, the order of the homepage and the placement of the enquiry form still decide whether you get enquiries. This basic design work is included in the price of business website development.

What is a design system, and why does it help me?

A design system is the website's building kit: a consistent set of colours, type sizes, buttons, form fields, cards and spacing, each with defined states (default, hover, disabled, error).

Its benefit shows up later: a new subpage or feature gets built faster and more cheaply, because you're not redesigning everything from scratch, and the site doesn't fall apart over the years.

Freelance web designer or a team: what's the difference?

A freelance web designer is typically cheaper and more flexible, but implementing the design is then left to someone else, and time and responsibility tend to get lost between the two.

With us, the designer and the developer work in one team, so the design is never created in a way that can't be built. That said, for a simple, single-screen task a freelancer is probably the more economical choice, and we'll tell you so.

Price and process

How much does UX/UI design and graphics cost?

On a website project, design is part of the build, and only a standalone brand identity, logo or a larger web-app interface is billed separately. A business website starts from €1,900 + VAT, and we've detailed the price bands on the website development prices 2026 page. For a custom task, we provide an itemised quote.

How much does a logo and brand identity design cost?

These are separate items, and the price depends on the scope. A logo on its own is the smallest package: several directions, full development of one chosen version, and the usable file formats (vector and image files, colour and single-colour versions).

A full brand identity is more than that: a colour palette, typefaces, business card and document templates, social media assets. Before quoting, we discuss what you actually need, because many elements can be added later.

How long does the design take?

The wireframe and visual design for a business website typically take 2–3 weeks; for a webshop or app interface, 4–6 weeks, depending on the number of screens. This includes the rounds of review.

The timeline is most often driven by the pace of feedback: if the decision needs several people's approval, it's worth coordinating that in advance.

How many rounds of review are there, and how much can be changed?

The quote includes two substantive rounds of revision: one for the wireframe, one for the visual design. Experience shows this is enough, provided the first briefing clarifies what the site needs to do and who it's for.

Minor tweaks (text, images, order) don't count as a round. What's genuinely costly is a change of direction: finding out after the second round that the design should have targeted a different audience.

What tool is the design made in, and what do I receive?

The wireframe and the visual design are built as a clickable prototype that you view and comment on in your browser, so you don't need any design software. At the end, alongside the design files, you also receive the live site, the design system (colours, type, components) and the SVG icon set.

The source files are yours: after handover, any other designer or developer can pick up and continue working from them.

Brand identity and graphics

We already have a brand identity, will you use it?

Yes, your existing logo, colours and typefaces form the basis. If the identity was only designed for print, we complete it with the web-specific parts: screen-legible type sizes, high-contrast state colours, a dark mode palette, icon style.

What does a brand identity guide include?

The logo usage rules (sizes, clear space, what not to do with it), the colour palette with exact codes, the typefaces and the typical applications: business card, letterhead, social media cover image, advertising template.

For a small company, a version just a few pages long is enough; what matters is that anyone who creates materials for you later produces the same look.

Where do the images and photos on the site come from?

There are three routes: a dedicated photo shoot, licensed stock photography, and custom graphics or illustration. For a service business, your own photos almost always win: a genuine workshop, team and job say more than smiling stock models at a laptop.

We can also handle the photography, and we tidy up existing images too: cropping, colour accuracy, resizing for the web, WebP and AVIF versions. We also write the alt text for the images, because that matters for search engines and screen readers alike.

Template or custom design: which is worth it?

A template gets you started faster and costs less, but your competitors may be using the same one, and its limited space often forces your content to fit around it: you can only show what the template allows.

Custom design pays off where standing out from the brand and a specific business goal matter. Our approach sits between the two: a custom interface built from proven, tested components, so nothing is built entirely from scratch.

Technology and quality

Does the site stay fast despite all the graphics and animation?

Yes, if we plan for it at the design stage. Images are shipped as sized WebP and AVIF, icons are SVGs, and GSAP only runs the animation when a section is in view. This very page runs with animated sections and an interactive slider, measure it with Google PageSpeed.

How do you design the interface for mobile?

Mobile first, then desktop: most visitors arrive on a phone, and that's where the competition for space is fiercest. In practice, this means deciding in advance what the one thing is that has to be visible on a small screen.

We also pay attention to comfortable button sizes, the zone reachable with one hand, and forms that are easy to fill in on mobile. Before handover, we check everything on real devices, not just in a browser simulation.

Does the site need a dark mode?

It's not compulsory, but it's worth having: some visitors already arrive with dark mode on, and if the site is unreadable then, that's worse than not having it at all. That's why, at the design stage, we check the colours and images for both versions.

It has practical consequences for the graphics too: you need a logo and icons with a transparent background, rather than images baked into a white one. It's worth sorting this out once, at the brand identity stage.

Is accessible design mandatory?

For webshops, yes, from June 2026, under the European Accessibility Act (EAA). On other sites it's voluntary, but contrast, keyboard operation and image descriptions make the interface better for everyone. Details: is it mandatory to make your webshop accessible?

Redesigning an existing site

Do you also redesign an existing WordPress or webshop interface?

Yes. The redesign starts from your existing analytics: where visitors leave, which page brings in enquiries. We implement the finished design in WordPress, WooCommerce, Magento 2 or our own WebPot CMS, while preserving your search rankings.

How do we know the new design is actually better?

Only by measuring. That's why, before the rebuild, we record the baseline: how many enquiries or orders come in now, what proportion abandon their basket, and where visitors drop off.

After going live, we measure the same thing: numbers decide, not taste. With higher traffic, we can also run an A/B test on individual key pages; on a smaller site, a before-and-after comparison is the realistic method.

Take the first step towards a successful business!

Phone: +36 30 199 1620 WebPot DEV on LinkedIn GitHub WebPot DEV on Facebook WhatsApp

WebPot DEV logo

From design to implementation: WebPot DEV


Get in touch with us!






Back to topShare page

#UX/UI design #web design #brand identity design #logo design #graphic design