Visual & Interaction Design

Layout & Color Palette

For the layout of my travel website, I wanted to organize it in a way that sections off information easily so that the content on each page looks visually clean. The use of adding backgrounds and rounded borders to sections and on the text of the hero image helps to section off content so that relationships between the content are clearly visible.The navgigation bar utilizes an active highlight so that viewers have a visual color cue to indicate they are on a different page of the website instead of having to rely solely on the content of the page. The overall rounded nature of all borders throughout the website give a softer, more playful feel to my website, as harsh edges usually indicate a more sterile and professional approach. The footer at the bottom of each page includes a "Book Today!" button for ease of booking a trip no matter what page they are on without having to go back to the homepage to book their visit. For my color palette, I ultized an image color picker feature and pulled colors from my hero image to create harmony between the image and the rest of the site. Using pinks and greens also creates a more natural, soft, and playful feel which matches with the k-pop group Stray Kids member's overall personalities and vibes.

Typeface Selection

When selecting my typeface, I decided to go with the sans-serif font 'Quicksand' in the font weight of 700 for all headings and buttons and the monospace font 'Inconsolata' in the regular weight for paragraphs, lists, and links. Both of these fonts add to my modern, playful feel with the rounded edges of 'Quicksand' and the typewriter, digital appearance of 'Inconsolata'. The Stray Kids brand is very much a duality between cute and soft versus tough and sexy, so I decided to tap into the former with these typeface choices. All h1 headers are centered for easier viewing down the page as well as most of the content within the website itself. The largest text on my webpage is in the hero image to draw attention to the tagline of the travel site, then heirarchy moves down to h1 headings for the title of webpages and then uses h2 headings for each member's loaction of choice.

Images & Buttons

For my images, I decided to continue the rounded border theme throughout the rest of my website to add to the soft, natural feel of site overall. Regarding image placement for the "Sights" and "Tastes" page, I floated the image of the place to the right and kept the image of the member under the heading that states their name so that viewers could identify them easily. I went for a smaller image size for each of the members so that the link to the place/restaruant website would fit nicely next to the place's image. I tried to use images from the same photoshoot for each of the members to create a sense of uniformity throughout the website. I kept the same rounded edge theme for the buttons and tried to keep the button color, text, and size the same throughout the website unless the color needed to change to increase visibility. Each button also includes a hover state to indicate that a button can be clicked.

Citation List