Independent Concept
Kabab King is an independent website redesign concept created by Eass Aslam as a portfolio exploration. It combines a storefront-led visual system, responsive restaurant content, and an interactive sample menu in a statically exported Next.js experience.
Independent concept. Created as a portfolio exploration, this work was not commissioned, approved, or endorsed by Kabab King, and it is not the restaurant’s official website.
01 / Project context
Eass explored the redesign after observing that the restaurant’s existing online presence was a basic HTML page relying largely on menu images. The opportunity was not a measured traffic or conversion problem; it was a chance to imagine a more expressive, structured identity for the restaurant online. The preview was designed independently before any contact with the business and later reframed as portfolio-only work.
02 / Observed opportunity
The existing page communicated basic menu information but did little to express the personality Eass associated with the physical storefront and late-night counter experience. The concept therefore focused on identity and information hierarchy without claiming that the restaurant had requested a redesign or that any business outcome had been measured.
03 / Design objective
The design objective was a distinctive, responsive one-page experience that felt quick, direct, memorable, and rooted in the storefront. Research covered the restaurant’s existing online presence and competitor websites, while restaurant-specific details remained illustrative until they could be verified.
The page was organized around transparent concept disclosure, a storefront-led hero, counter favorites, an interactive sample menu, a design story, and reference-only location actions. The menu and calls to action demonstrate the intended journey without pretending to provide live ordering or verified business information.
The original static HTML, CSS, and JavaScript concept was later converted to React and the Next.js App Router while preserving the established visual design and interaction model.
04 / Visual direction
The implemented direction borrows the force of storefront signage and menu boards: coal surfaces, warm cream, hot red, mustard, green, heavy rectangular borders, hard offset shadows, and oversized editorial type. Impact creates the sign-like display voice, Georgia brings contrast to story and menu headings, and Arial keeps navigation and interface copy direct. The intended mood is a late-night, old-school diner with bold type and warm color, expressed without claiming an official Kabab King brand system or undocumented cultural-art influence.
05 / Color palette
These are implemented concept colors, not an official Kabab King brand system. Their documented function is to create warmth, nighttime contrast, and storefront energy.
#17120FForms the hero, header, menu board, and strongest nighttime surfaces.
#1E1814Carries primary text, heavy outlines, grid lines, and hard shadows.
#FFFAF0Provides the main warm card and editorial-panel surface.
#FFF4DCKeeps text and borders warm and legible against dark sections.
#B9271DMarks primary actions, rules, emphasis, and offset shadows.
#F3B22BHighlights the disclosure banner, active filters, labels, and marquee.
#26724FSupports secondary actions, feature tags, and location graphics.
#1E5C72Adds a cool secondary tone to the stylized location treatment.
06 / Typography
Impact, Georgia, and Arial are system fonts used for distinct functional roles; the concept does not introduce a custom typeface narrative.
Kabab King
Impact supplies the condensed, forceful voice used for the hero title, sign blocks, and concept labels.
Late-night Queens energy.
Georgia creates contrast for section storytelling and menu names within the heavier sign-board system.
Explore the sample menu.
Arial keeps navigation, buttons, labels, descriptions, and filter controls direct and readable.
07 / UX and structure
The unofficial classification appears before the identity and is repeated around demo content so the work cannot be mistaken for the restaurant’s official site.
Fixed anchor navigation connects the hero, favorites, sample menu, story, location, and concept note without adding unnecessary route depth.
Eight category controls filter seventeen illustrative menu items through local React state, with pressed and live-region states exposed accessibly.
The desktop anchor navigation becomes an ARIA-connected React hamburger menu at compact widths.
Favorites cards, prototype CSS food artwork, menu tabs, prices, and demo warnings create a scannable restaurant-content system.
Component-specific breakpoints stack actions and grids, reflow tabs, resize the hero title, and preserve readable interaction targets down to the verified 390-pixel layout.
08 / Website showcase
Every capture keeps its verified intrinsic ratio. Framed desktop and device presentations provide readable section views without stretching the source files.
The same disclosure-first hierarchy, bold storefront title, actions, and concept ticket adapt from a wide composition to a stacked mobile experience.
The concept note states the non-affiliation plainly, while the design-story panel documents the actual storefront-inspired visual language.
Prototype food artwork establishes a visual rhythm before the interactive sample menu introduces filters, clear demo warnings, and a two-column desktop list.
On mobile, category controls reflow to two columns and menu items stack into a single readable list without changing the illustrative-content warning.
09 / React and Next.js implementation
The concept began as a static HTML, CSS, and JavaScript page. It was later converted to Next.js App Router and React, moving the document shell and metadata into the app directory and separating the hero, responsive header, and menu preview into focused components.
Most content remains server rendered. Client-side React is limited to the mobile navigation and menu filter, where local state drives open, active, pressed, and filtered states. Favorites and menu items are rendered from data arrays rather than repeated markup.
The interface uses one global CSS file with custom properties, Grid, Flexbox, gradients, and breakpoints at 1040, 920, 820, and 460 pixels. The hero uses Next Image with a static import in the concept project, while this portfolio uses verified intrinsic dimensions for every local screenshot to prevent layout shift.
The concept is configured as a static export and includes metadata, semantic landmarks, visible focus treatments, ARIA state for interactive controls, and safe external-map behavior. It has no ordering, payments, reservations, backend, CMS, analytics, or live menu management.
10 / What I learned
The central learning was that a website’s visual design and complete layout should reflect what the business feels like in real life. The project also clarified that producing a strong concept and earning adoption are different parts of design practice, and that speculative work should remain visibly separate from official client work.
11 / A commissioned version
If a business commissioned a production version, the concept would need a new content and approval phase rather than treating the portfolio demo as launch-ready.
Independent concept