https://mohammadabuaisheh.me/blog/Writing by Mohammad Abu-aisheh: notes from design projects, a talk and contests, plus practical guides on UX, accessibility, Arabic RTL, UI design and web performance.enhttps://mohammadabuaisheh.me/blog/ux-laws/https://mohammadabuaisheh.me/blog/ux-laws/A short guide I wrote in Arabic for design students: each law with its rule, why it matters, an everyday example and a product that uses it.Teachinghttps://mohammadabuaisheh.me/blog/requirements-vs-expectations/https://mohammadabuaisheh.me/blog/requirements-vs-expectations/Notes from a talk I prepared and gave: why products fail in the gap between what was built and what users expected, and how to close it.Talkhttps://mohammadabuaisheh.me/blog/contest-v5/https://mohammadabuaisheh.me/blog/contest-v5/How I approached the ASU UI/UX Contest V5 brief, starting on paper, and what earned second place.Contesthttps://mohammadabuaisheh.me/blog/arngren-redesign/https://mohammadabuaisheh.me/blog/arngren-redesign/Arngren is famous among designers for its cluttered homepage. I used it to practise hierarchy, grouping and white space on a real, extreme example.Redesignhttps://mohammadabuaisheh.me/blog/newspaper-hierarchy/https://mohammadabuaisheh.me/blog/newspaper-hierarchy/Redesigning a dense front page to control where the eye goes first, next and last, while keeping its classic personality.Visual designhttps://mohammadabuaisheh.me/blog/dermatology-booking/https://mohammadabuaisheh.me/blog/dermatology-booking/A short UI challenge: a booking flow for a dermatology clinic with a soft, rounded visual language.UI challengehttps://mohammadabuaisheh.me/blog/ai-in-my-process/https://mohammadabuaisheh.me/blog/ai-in-my-process/Lessons from building Rawaa: AI is great for speed and drafts, and bad at deciding what the product should be.Processhttps://mohammadabuaisheh.me/blog/paper-first/https://mohammadabuaisheh.me/blog/paper-first/Pencil sketches from the Banana platform, and why ten minutes on paper saves an hour in Figma.Processhttps://mohammadabuaisheh.me/blog/whatsapp-first/https://mohammadabuaisheh.me/blog/whatsapp-first/The biggest decision in Rawaa wasn’t a screen. It was choosing not to build an app for guests at all.Producthttps://mohammadabuaisheh.me/blog/what-56-students-taught-me/https://mohammadabuaisheh.me/blog/what-56-students-taught-me/Survey numbers and honest quotes from the Filis research, and how each one turned into a design decision.Researchhttps://mohammadabuaisheh.me/blog/one-card-six-verticals/https://mohammadabuaisheh.me/blog/one-card-six-verticals/How a single listing card fixed more of a classifieds marketplace than any page redesign could.Design systemshttps://mohammadabuaisheh.me/blog/accessibility-before-handoff/https://mohammadabuaisheh.me/blog/accessibility-before-handoff/Five quick checks that catch most problems before a developer ever sees the file.Accessibilityhttps://mohammadabuaisheh.me/blog/designing-for-arabic/https://mohammadabuaisheh.me/blog/designing-for-arabic/What localizing the Tesco homepage, and building this site in two languages, taught me about right-to-left design.Arabic & RTLhttps://mohammadabuaisheh.me/blog/personas-that-change-products/https://mohammadabuaisheh.me/blog/personas-that-change-products/In Legacy, four very different buyers shaped four specific features. Here is how I write personas so that happens.Researchhttps://mohammadabuaisheh.me/blog/wireframes-first/https://mohammadabuaisheh.me/blog/wireframes-first/Why I wireframed every screen of Rawaa in grayscale first, and what changed once colour arrived (almost nothing).Processhttps://mohammadabuaisheh.me/blog/designing-emergency-mode/https://mohammadabuaisheh.me/blog/designing-emergency-mode/How Emergency Mode in Filis changes what matters without changing where things are.Interactionhttps://mohammadabuaisheh.me/blog/supportive-microcopy/https://mohammadabuaisheh.me/blog/supportive-microcopy/Real lines from Filis, and the rules behind them: a number, an action, and a respectful tone.UX writinghttps://mohammadabuaisheh.me/blog/competitor-audits/https://mohammadabuaisheh.me/blog/competitor-audits/Three audits from my projects, and the one sentence each audit had to produce.Researchhttps://mohammadabuaisheh.me/blog/usability-test-plan/https://mohammadabuaisheh.me/blog/usability-test-plan/Tasks, metrics and heuristics from the Sehati plan, and why I’m honest about what I haven’t tested yet.Testinghttps://mohammadabuaisheh.me/blog/glanceable-ui/https://mohammadabuaisheh.me/blog/glanceable-ui/Lessons from a smartwatch flight tracker: one decision per screen, high contrast, and ruthless priorities.UI designhttps://mohammadabuaisheh.me/blog/variables-not-hex/https://mohammadabuaisheh.me/blog/variables-not-hex/How Filis runs on 201 Figma variables in five collections, and why every name describes a job, not a colour.Design systemshttps://mohammadabuaisheh.me/blog/dark-mode-one-switch/https://mohammadabuaisheh.me/blog/dark-mode-one-switch/Banana’s colours live in Day and Night modes, so the whole platform changes theme without redrawing a single screen.Design systemshttps://mohammadabuaisheh.me/blog/prototype-without-dead-ends/https://mohammadabuaisheh.me/blog/prototype-without-dead-ends/Rawaa’s prototype links 62 screens on desktop and mobile. The rule I used: every screen needs a way forward or a way back.Prototypinghttps://mohammadabuaisheh.me/blog/flows-before-screens/https://mohammadabuaisheh.me/blog/flows-before-screens/In Sehati our team mapped five user flows with every decision point. The waiting list exists because of one decision point.User flowshttps://mohammadabuaisheh.me/blog/color-contrast-in-practice/https://mohammadabuaisheh.me/blog/color-contrast-in-practice/Contrast is the difference in brightness between text and its background. Learn the WCAG ratios, the common failures and how to test them.Accessibilityhttps://mohammadabuaisheh.me/blog/focus-states-that-show/https://mohammadabuaisheh.me/blog/focus-states-that-show/Keyboard users need to see where they are. Learn how to design visible focus indicators, use :focus-visible and avoid hidden focus.Accessibilityhttps://mohammadabuaisheh.me/blog/keyboard-first-navigation/https://mohammadabuaisheh.me/blog/keyboard-first-navigation/Many people never use a mouse. Design every interaction so it works with a keyboard, in a logical order, with no traps and clear exits.Accessibilityhttps://mohammadabuaisheh.me/blog/writing-good-alt-text/https://mohammadabuaisheh.me/blog/writing-good-alt-text/Alt text should serve the purpose of an image, not just describe it. Learn when to write it, when to leave it empty and how context decides.Accessibilityhttps://mohammadabuaisheh.me/blog/accessible-forms/https://mohammadabuaisheh.me/blog/accessible-forms/Forms are where users complete tasks. Use real labels, helpful hints, clear errors and sensible grouping so everyone can finish them.Accessibilityhttps://mohammadabuaisheh.me/blog/touch-target-size/https://mohammadabuaisheh.me/blog/touch-target-size/Small buttons are hard to hit. Learn the WCAG 2.2 minimum of 24 by 24 CSS pixels, the larger 44 px guidance and how spacing helps.Accessibilityhttps://mohammadabuaisheh.me/blog/reduced-motion/https://mohammadabuaisheh.me/blog/reduced-motion/Animation can cause discomfort or nausea for some users. Learn to respect prefers-reduced-motion and to give people control over moving content.Accessibilityhttps://mohammadabuaisheh.me/blog/headings-and-landmarks/https://mohammadabuaisheh.me/blog/headings-and-landmarks/Screen reader users navigate by headings and landmarks. Structure pages with one h1, ordered headings and clear regions.Accessibilityhttps://mohammadabuaisheh.me/blog/not-by-colour-alone/https://mohammadabuaisheh.me/blog/not-by-colour-alone/Colour should never be the only way to convey meaning. Learn WCAG 1.4.1 and how to pair colour with text, icons and patterns.Accessibilityhttps://mohammadabuaisheh.me/blog/core-web-vitals-for-designers/https://mohammadabuaisheh.me/blog/core-web-vitals-for-designers/LCP, INP and CLS measure loading, responsiveness and visual stability. See which design choices move these numbers.Web & performancehttps://mohammadabuaisheh.me/blog/css-logical-properties/https://mohammadabuaisheh.me/blog/css-logical-properties/Physical properties like margin-left break when a page flips to right-to-left. Logical properties follow the reading direction and save you from duplicate CSS.Arabic & RTLhttps://mohammadabuaisheh.me/blog/which-icons-to-mirror/https://mohammadabuaisheh.me/blog/which-icons-to-mirror/Mirror icons that express direction, leave the rest alone. A short guide to arrows, chevrons, progress and the cases where context decides.Arabic & RTLhttps://mohammadabuaisheh.me/blog/arabic-numerals-choice/https://mohammadabuaisheh.me/blog/arabic-numerals-choice/Arabic interfaces can show 0-9 or the Eastern Arabic-Indic digits. The right choice depends on audience, so stay consistent and let research decide.Arabic & RTLhttps://mohammadabuaisheh.me/blog/choosing-arabic-fonts/https://mohammadabuaisheh.me/blog/choosing-arabic-fonts/Pick Arabic UI fonts by legibility, weight range, pairing with Latin, diacritics support and file size, not by looks alone.Arabic & RTLhttps://mohammadabuaisheh.me/blog/mixed-direction-text/https://mohammadabuaisheh.me/blog/mixed-direction-text/Arabic sentences often contain Latin names, numbers and URLs. Learn how the bidi algorithm orders them and how to isolate text with HTML and CSS.Arabic & RTLhttps://mohammadabuaisheh.me/blog/rtl-forms-and-inputs/https://mohammadabuaisheh.me/blog/rtl-forms-and-inputs/Not every field should flip. Learn which inputs stay left to right on an RTL page, which use auto direction, and how to align labels and messages.Arabic & RTLhttps://mohammadabuaisheh.me/blog/arabic-line-height-and-weight/https://mohammadabuaisheh.me/blog/arabic-line-height-and-weight/Arabic text usually needs more line height than Latin, lighter weights can fade, and size may need adjusting. Practical starting points to test.Arabic & RTLhttps://mohammadabuaisheh.me/blog/localisation-vs-translation/https://mohammadabuaisheh.me/blog/localisation-vs-translation/Translating words is one step. Localisation also covers layout, plurals, dates, units, imagery and tone. A checklist for Arabic products.Arabic & RTLhttps://mohammadabuaisheh.me/blog/writing-error-messages/https://mohammadabuaisheh.me/blog/writing-error-messages/A good error message says what happened and how to fix it, in plain words and without blame. Examples, patterns and accessibility basics.UX writinghttps://mohammadabuaisheh.me/blog/button-labels/https://mohammadabuaisheh.me/blog/button-labels/Good button labels name the action: a verb plus an object. Patterns for specific, consistent, translation-friendly labels.UX writinghttps://mohammadabuaisheh.me/blog/user-interviews-basics/https://mohammadabuaisheh.me/blog/user-interviews-basics/How to plan and run a user interview: set a goal, recruit the right people, ask open questions about past behaviour and listen more than you talk.Research & testinghttps://mohammadabuaisheh.me/blog/survey-bias/https://mohammadabuaisheh.me/blog/survey-bias/Biased wording quietly ruins survey data. Learn to spot leading, loaded and double-barrelled questions and to design clear, balanced answer options.Research & testinghttps://mohammadabuaisheh.me/blog/five-users-testing/https://mohammadabuaisheh.me/blog/five-users-testing/Nielsen’s well-known advice is often misread. Five users per round can reveal most problems, as long as you test in small rounds and fix between them.Research & testinghttps://mohammadabuaisheh.me/blog/card-sorting/https://mohammadabuaisheh.me/blog/card-sorting/Card sorting shows how people group and name content. Learn the main types, how to prepare cards and how to read results to shape navigation.Research & testinghttps://mohammadabuaisheh.me/blog/tree-testing/https://mohammadabuaisheh.me/blog/tree-testing/Tree testing checks whether people can find items in a navigation hierarchy shown as plain text, without visual design getting in the way.Research & testinghttps://mohammadabuaisheh.me/blog/jobs-to-be-done/https://mohammadabuaisheh.me/blog/jobs-to-be-done/Jobs to be done frames needs as the progress a person wants in a situation. Learn to write job statements and use them to prioritise features.Research & testinghttps://mohammadabuaisheh.me/blog/affinity-mapping/https://mohammadabuaisheh.me/blog/affinity-mapping/Affinity mapping turns a pile of research notes into themes. Follow the steps, turn themes into How might we statements and avoid common pitfalls.Research & testinghttps://mohammadabuaisheh.me/blog/analytics-and-qualitative/https://mohammadabuaisheh.me/blog/analytics-and-qualitative/Analytics show what happens and how often; interviews and tests explain why. Learn to use both together, avoid vanity metrics and respect privacy.Research & testinghttps://mohammadabuaisheh.me/blog/prioritising-with-rice/https://mohammadabuaisheh.me/blog/prioritising-with-rice/RICE and MoSCoW help teams rank work with a shared method. See how scoring works, with an illustrative example, and where these tools mislead.Process & producthttps://mohammadabuaisheh.me/blog/running-a-design-critique/https://mohammadabuaisheh.me/blog/running-a-design-critique/A good critique improves the work toward its goals. Learn how to set goals, structure feedback, avoid solutioning and handle feedback well.Process & producthttps://mohammadabuaisheh.me/blog/type-scale/https://mohammadabuaisheh.me/blog/type-scale/A type scale gives every text size a reason. Learn how to pick a base size and a ratio, set line height, and make sizes responsive.UI & visual designhttps://mohammadabuaisheh.me/blog/spacing-system/https://mohammadabuaisheh.me/blog/spacing-system/A spacing scale based on 4 or 8 points keeps rhythm consistent and handoff simple. Learn the tokens, proximity, and density options.UI & visual designhttps://mohammadabuaisheh.me/blog/colour-tokens/https://mohammadabuaisheh.me/blog/colour-tokens/Name colours by role, not by hue. Primitive and semantic tokens make states, dark mode and theming cheaper to build and maintain.UI & visual designhttps://mohammadabuaisheh.me/blog/layout-grids/https://mohammadabuaisheh.me/blog/layout-grids/A grid brings order to layouts. Learn columns, gutters and margins, content-led breakpoints, comfortable line length and CSS grid basics.UI & visual designhttps://mohammadabuaisheh.me/blog/designing-dark-mode/https://mohammadabuaisheh.me/blog/designing-dark-mode/Dark mode is not an inversion. Learn soft surfaces, off-white text, elevation by lightness, adjusted accents and how to honour user settings.UI & visual designhttps://mohammadabuaisheh.me/blog/empty-states/https://mohammadabuaisheh.me/blog/empty-states/An empty screen is a chance to guide people. Learn the four kinds of empty state, what each should say, and how to avoid dead ends.UI & visual designhttps://mohammadabuaisheh.me/blog/icon-design-principles/https://mohammadabuaisheh.me/blog/icon-design-principles/Icons save space but can confuse. Learn when to add labels, how to keep a consistent grid, and how to make icon buttons accessible.UI & visual designhttps://mohammadabuaisheh.me/blog/visual-hierarchy-basics/https://mohammadabuaisheh.me/blog/visual-hierarchy-basics/Visual hierarchy tells people what to look at first. Learn the five levers, the squint test and why removing beats adding emphasis.UI & visual designhttps://mohammadabuaisheh.me/blog/button-hierarchy/https://mohammadabuaisheh.me/blog/button-hierarchy/Not every button deserves equal weight. Learn the four button levels, the six states, consistent sizing, and button versus link semantics.UI & visual designhttps://mohammadabuaisheh.me/blog/image-formats-for-the-web/https://mohammadabuaisheh.me/blog/image-formats-for-the-web/The right format and markup keep pages fast and stable. Learn when to use JPEG, PNG, WebP, AVIF and SVG, plus srcset, dimensions and lazy loading.Web & performancehttps://mohammadabuaisheh.me/blog/onboarding-copy/https://mohammadabuaisheh.me/blog/onboarding-copy/Onboarding copy should lead with the value, keep steps short, let people skip, and explain permissions in context. Measure it by the first real task.UX writinghttps://mohammadabuaisheh.me/blog/confirmation-dialogs/https://mohammadabuaisheh.me/blog/confirmation-dialogs/Use a confirmation only when the action is risky, prefer undo when possible, and write a specific title, consequence and button labels instead of Yes or No.UX writinghttps://mohammadabuaisheh.me/blog/tone-of-voice/https://mohammadabuaisheh.me/blog/tone-of-voice/Voice stays constant while tone adapts to context. Learn the four tone dimensions, write three voice principles, and keep Arabic and English consistent.UX writinghttps://mohammadabuaisheh.me/blog/placeholders-vs-labels/https://mohammadabuaisheh.me/blog/placeholders-vs-labels/Placeholder text disappears, is often low in contrast and is not a reliable accessible name. Use a persistent visible label with optional hint text.UX writinghttps://mohammadabuaisheh.me/blog/design-handoff-checklist/https://mohammadabuaisheh.me/blog/design-handoff-checklist/A good handoff covers every state, responsive behaviour, tokens, assets, motion, accessibility, content rules and edge cases, then a review of the built result.Process & producthttps://mohammadabuaisheh.me/blog/design-system-basics/https://mohammadabuaisheh.me/blog/design-system-basics/A design system is tokens, components, patterns and documentation. Start with an audit, begin small, name things clearly, and measure adoption.Process & producthttps://mohammadabuaisheh.me/blog/writing-a-case-study/https://mohammadabuaisheh.me/blog/writing-a-case-study/A strong case study has a clear structure, separates your work from the team’s, is honest about gaps, never invents metrics, and respects a hiring manager’s time.Process & producthttps://mohammadabuaisheh.me/blog/loading-fonts-well/https://mohammadabuaisheh.me/blog/loading-fonts-well/Use WOFF2, subset large fonts, preload only the critical one, choose font-display with care, and tune fallback metrics to reduce layout shift.Web & performancehttps://mohammadabuaisheh.me/blog/responsive-design-checklist/https://mohammadabuaisheh.me/blog/responsive-design-checklist/Build mobile-first, use fluid type and content-led breakpoints, keep touch targets usable, avoid horizontal scrolling, and test on real devices.Web & performancehttps://mohammadabuaisheh.me/blog/designing-loading-states/https://mohammadabuaisheh.me/blog/designing-loading-states/Match the loading pattern to the wait: know the three response-time limits, choose skeletons, spinners or progress bars, and announce changes accessibly.Web & performance