Website design and creation in HTML and CSS, a mock website for a real band, Khruangbin.
Building a website from soup to nuts was the concept of our Web Design course where I used HTML5, CSS, and JavaScript to script, develop, and post the concept musical band website pictured here. The music of the band is breezy, open, airy, and relaxing—I wanted the colors, typography, and rhythms of the site to match the look and feel of the band, as well as their sound. Photography is either my own, or inspired by IG posts by the band. Enhancements include rolling out responsive design for mobile platforms, and other promotional media.
Landing page for the site. To enter the site, click the word Khruangbin, here.
The fake website for a real band assignment required the student to code a six-page site, from wireframe and visualizations through posting final version, using InVision, Sketch, Atom, GitHub, and internet resources for jquery and Javascript additions.
My subject was the Texas trio, Khruangbin, which is Thai for airplane. Besides setting a high personal bar for myself in achieving design and coding solutions, I stuck to my pre-visualization as strictly as possible, insisting on matching the exact flat imagery, typeface, colors, and proportions of my original designs in Sketch while rolling out the changes in the HTML and CSS final version.
The About page was the first functioning page that I built, and I spent a lot of time on the navigation bar during this phase., which in retrospect took me out of a master vision for the whole project. At the point of framing out the the site in HTML and styling it in CSS, I was largely concerned with executing a 1 : 1 copy of what I had initially laid out in Sketch, in the weeks that led up to text editing in Atom and posting revisions on GitHub.
This is a simple article page, with section breaks, blending of photography and text, and use of a bulleted list all part of the design requirements.
If you would like to jump to the hosted page in a new tab, then click on the word About, here.
The Discography page was my most ambitious and least successful solution of the six pages. I learned a lot trying to achieve my visualized plan, though the final solution is a work in progress and something to work on in the season ahead.
The Discography page was where I tried to write my own solution to something that probably most people would just download a scripted solution for: a carousel style, “jump to” mechanism to navigate from the top of the page to view the tracks of the band’s individual CD albums, below.
The mechanism never worked quite as I envisioned them, but I learned a ton about trying to hack solutions and use the developer tools that are built into Chrome, as well as how to use the other online resources available to website developers and digital platform designers.
One opportunity would be for me to add Spotify player plug-in or embedded songs so they could sample the music on a given album. Presenting data in tables and incorporating a different style of how to get information in front of the user were precepts of this page of the design assignment.
If you want to view the site in a new tab, click on the word Discography, here.
The “Merch” page was the fifth page (of six) required for our design assignment. It is a mock store for merchandise for the band: no real financial transactions of fulfillment goes on here.
The Merch page as an opportunity to build a store of images, and then to use a filter to display them in differing combinations, based on criteria that we chose (in my case, Albums, Clothing, Gear, and All are the categories for my band “store” … ).
The colorful photo was public domain but inspired by the band’s own Instragram posts, where their travels to Southeast Asia and to the temples in that region made an impression on them.
I am looking forward to seeing how to put an actual transactional motor in this type of page to handle sales, fulfillment of product orders, and the like. For this design problem, the main aspect was a functioning filter. I started getting into using hover states and simple visual cues like that, and would continue to develop those solutions as the opportunities arise.
If you want to jump to this page directly in the hosted site, click on the word Merchandise, here.
If you want to scroll down static headers for some of the pages of the site, just scroll down into the section that follows.
If you want to visit the site in a new tab, then click the word Khruangbin.