A Fake Website for a Real Band
Building an airplane, from scratch
“Khruangbin” means “Airplane,” in Thai.
(If you want to visit the Khruangbin site, in a new tab, then click the word Khruangbin.)
Wireframe for Discography page, previsualized in pencil.
Planning
Each page was rigorously built to specific aspect ratio and screen size. Wireframe sketch iconography was improvised to perform some planned customization, not all of which was a given could be easily executed. Plan was ambitious, but included tables, lists, media embedding, and a mock “Shop”
Workflow: InVision to Sketch…Home page.
Visualization
InVision was used to map the images for our six-screen site. Links were mocked up (highlighted in BLUE, above), image sizes and layouts tuned. Eschewing some formatting shortcuts for buttons, widgets, and so forth, I opted to build everything myself, as a learning exercise.
The still aerial image for Home, replaced with video.
Implementation
My goal for each page of the assigned site build was to follow through and match the visualized size, look and feel, and functionality as originally planned—from ideation, through visualizations, into final page markup language, styling, scripting development, and finally, publishing. The experience was challenging, but exhilerating to find success.
Khruangbin
The plan for the About page, the first page built and the establisher of look and feel for the rest of the Khruangbin project site.
Plan a website
Category: Website design, social media advertising, responsive website design
Target Audience: Young adults, 18-24 as well as jazz or more matured music enthusiasts 25-54—fans of jazz, alt rock, and world music or other niche genres of instrumental pop music.
Background: Khruangbin is an instrumental tro band with an ethereal, jazzy or lounge music sound. Their music brings to mind the peacefulness of film scores, of surf band, guitar-based riffs where ease and contemplation are part of the feeling evoked. The initial assignment was to build an integrated set of pages for a website for a real band, though they are a fictional client. The website initially had to have a landing page, and subsidiary pages: About, Discography, Merchandise, Media, and Tour pages were built as part of
the original layout.
DESIGN PROBLEM: Review site for adequacy of serving both needs: functionality and aesthetics and graphic design and order. The initial site is hosted on Github Pages, entirely coded via HTML, CSS, and JavaScript or Jquery coding. Assets in the way of photos, albums, recording, merchandise are from a variety of sources inspired by the band themselves. Main challenge is to create visual refinements in onscreen appearance of site using raw coding, Some of these were problems with the original site; others are things that would be nice to have, such as responsiveness to mobile platform or viewing-platform change.
About page: background photography by me. Headline Typeface Futura and body text Courier, for contrast. Colors throughout the site were inspired by the band’s own iconography, album covers, press release photos, and the music’s soothing melodies.
Build it and Improve it
DESIGN PROCESS: Goal is to improve the site’s page-to-page consistency and add to its aesthetic and functionality, including taking actions like the following:
· improve aesthetics of text, typography, hierarchy, layout
· improve image quality and stylistic consistency of assets
· improve sub-pages: Discography, Merchandise, and Landing Page
DESIGN SOLUTION: Use coding-based solutions, investigate library-supplied templates where hand-coded solutions are inadequate to effect the desired results.
Focus at this point is on three pages and on responsive design:
1. Landing Page: improve appearance of initial navigation, responsiveness of video to different mobile platform output change
2. Discography Page: background image size or revision to high quality standard, clean up appearance of navigation device, add Spotify app to tracks list for each disc
3. Merchandise Page: Add hover states to show in or out of stock results
for each item
4. Responsiveness: Design initial pages and collapsed menu for About, Discography, and Merchandise when going to mobile device screen size.
A Mobile Future
Room for expansion in this project includes development of responsive design, augmentation of pages and photos on it for rapid loading, development of SEO practices, and wider application of
the Khruangbin airplane logo.