Services: websites, apps, QR menus, UI/UX, brands

UI/UX design

We design how a product looks, reads and behaves: flows, wireframes, type systems, components and prototypes you can click before any production code is written.

Wireframes and flows
Grids and layout systems
Typography systems
Components and states
Interface transitions
Clickable prototypes

Talk about a product More on UI/UX design

UI/UX design

One screen, from wireframe to working prototype.

Talk about a product

Hawler Roasters

Good evening

Your usual?

Cardamom latte

Oat milk · Large

5,000 IQD

Pickup

Order placed

Ready at 18:40

01 Open the app
02 See the usual order
03 Pick a pickup time
04 Order in one tap

4 columns · 16 margin · 12 gutter

4812162432

Your usual?

Bodoni Moda 28 / 1.1

Oat milk · Large

Hanken Grotesk 14 / 1.4

5,000 IQD

DM Mono 12 · tabular figures

BottleRacingVellumBrass

Vellum on Bottle · 11 : 1 contrast · targets 48 px

DefaultHoverPressedDisabled

Pick a pickup time, then place the order. The confirmation, its timing and its focus order are the prototype, running.

Try it on the phone

Websites, built by hand

Custom websites, designed for the business they belong to and hand-built for speed. Landing pages, business sites and interactive experiences that hold up on every screen.

Custom design and development
Responsive on every screen
Landing pages
Business websites
Interactive websites
Performance and SEO foundations

Brief us on a website More on websites

1280 px wide

Hawler Roasters

Small-batch coffee, roasted in Erbil every morning and poured until late.

Order aheadSee the menu

Single origin

from 4,000 IQD

House blend

from 3,000 IQD

Cold brew

from 4,500 IQD

Visit the roastery

Beans to take home, ground to order, and a counter where you can watch the next batch.

Saturday to Thursday: 8:00 to 23:00
Friday: 12:00 to 23:00
Order ahead: Ready in 10 minutes

Hawler RoastersMenu · Visit · Order · Instagram

This page, measured in your browser: Measuring · ready in …
Layout: One site, three widths: container queries at 900 and 480 px

Mobile apps

Apps designed screen by screen and built to feel at home on iOS and Android: onboarding, navigation, states and the small moments people remember.

iOS and Android
App UI and UX
Prototypes before build
Design systems for apps
Development and launch

Discuss an app More on mobile apps

Hawler Roasters

Welcome back

7 of 10 stamps

Three more for a free cup

Order again

Cardamom latte5,000 IQD
Kurdish tea1,000 IQD

Order

Cardamom latteOat milk · 5,000
Kurdish teaGlass, two sugars · 1,000
Cold brew16 hour steep · 4,500
Date kleichaTwo pieces · 2,500

Member card

Hawler Roasters

Show this at the counter

Tap the tabs and the plus buttons. It works.

QR menus, set at the table

Digital menus for restaurants, cafés, lounges, hotels and stores. Easy to read at the table in Kurdish, Arabic and English, and updated without reprinting a single code.

Restaurants and cafés
Lounges and hotels
Stores and hospitality
Kurdish, Arabic and English
Photos, prices and categories
Edit without reprinting

Set up a menu More on qr menus

Hawler Roasters

Menu · Open until 23:00

Tea & coffee

Kurdish tea1,000 IQD
Turkish coffee3,000 IQD
Cardamom latte5,000 IQD

Sweets

Date kleicha2,500 IQD
Baklava4,000 IQD

Cold

Mastaw1,500 IQD
Cold brew4,500 IQD

Sample menu · designed by websudo

Scan with your phoneThe same menu opens full screen, in your language of choice. Nothing to install.

Open the live menu

Languages: English, Kurdish and Arabic, right to left where it should be
Updates: Prices change tonight, the printed code never does

Digital business cards

A card that lives on a phone: scan or tap to call, message, save the contact or open the work. For professionals, freelancers, businesses, events and personal brands.

Professionals and freelancers
Businesses and teams
Events
Personal brands
Save to contacts in one tap
Share by link or QR

Order a card More on digital business cards

This one is a sample. The studio’s own card is real: save it straight to your contacts.

Save websudo’s card

Brand guidelines

Complete visual systems, not a logo on its own: logo suites, typography, colour, rules, graphic language and the UI foundations your website and app are built on.

Logo systems
Typography
Colour systems
Brand rules
Graphic language
Digital identity and UI foundations

Start a brand More on brand guidelines

01 Logo

Hawler Roasters

HRClear space: the height of the mark on every side.

02 Colour and type

Espresso#2B1A12
Copper#C8742C
Crema#E9DCC8
Cinnamon#6B3E26
Milk#F6F1E9

AaType
Bodoni Moda / Hanken Grotesk

01 Logo

Hawler Roasters

HRClear space: the height of the mark on every side.

02 Colour and type

Pine#16261C
Sage#5E7F4C
Limestone#D9D2B6
Clay#A4583A
Chalk#F2EFE4

AaType
Hanken Grotesk 700 / 400

01 Logo

Hawler Roasters

HRClear space: the height of the mark on every side.

02 Colour and type

River#0F1E2E
Slate#3E6E8E
Reed#D8C8A8
Brick#B04A36
Salt#F4F1EA

AaType
DM Mono / Hanken Grotesk

A guideline is the whole system: logo, colour, type, rules and the interface foundations your site and app use. See one we delivered for a client.