Tumgik
charliedesigns · 2 years
Text
Scaramanga
Mobile Site
Landing Page & expanded burger menu
Tumblr media
Homepage
Tumblr media Tumblr media Tumblr media
Gigs
Tumblr media Tumblr media Tumblr media
Store
Tumblr media Tumblr media
Again I created an overlay page for each of the product listings with dropdown menu:
Tumblr media
Subscribe
Tumblr media
2 notes · View notes
charliedesigns · 2 years
Text
Scaramanga
DESKTOP WEBSITE
Landing Page
Tumblr media
Homepage
Tumblr media Tumblr media Tumblr media Tumblr media
Gigs
Tumblr media Tumblr media
Watch & Listen hyperlink to YouTube and Song Whip.
Shop
Tumblr media Tumblr media Tumblr media
When you click on ‘view product’ it takes you to a product listing for each item:
Tumblr media
I have also included a drop down menu for the size selection and hover feature on the ‘add to cart’ button.
Tumblr media
Subscribe   
Tumblr media Tumblr media
 I am so pleased with how this site has developed, I think it really captures the personality of the band.  I have tried to make an easy, seamless user experiece, with simple navigation between the pages.  
0 notes
charliedesigns · 2 years
Text
Scaramanga
Desktop Website Design
Using my wireframes as a guide, I started to design the Scaramanga website.  I wanted the website to be visually impactful, easy to navigate and enriched with content.  
Having looked at many music websites during the research part of my project, I was keen to have a landing page that would lead users into the site and create an intriguing impression.  
I went onto Unsplash to look for images and taking inspiration from one of the band’s music videos, I looked for images of Chernobyl.  I knew this would be a visually compelling way to enter the site.  below are a few of the options I looked at:
Tumblr media
I settled on the version below:
Tumblr media
Next I thought about imagery across the site, I wanted a grungy, edgy tone to each of the pages.  Referring back to my concept board, I particularly liked imagery with lights - strobe lighting.  I focussed my search on strobe lighting and laid out some pages.  Initially I wanted a burger menu to navigate my site but it wasn't looking how I wanted it to so changed this to a menu bar at the top of each page.  I felt a burger menu would work much better within my mobile site.
Below is some development:
Tumblr media Tumblr media
 At this stage I went on to choose an image for each of the pages within my site and started to build content.  I was keen to develop my skills in Xd so I included hover buttons, cookie banner, hyperlinks and overlay animations.  
For the ‘Watch’ & ‘Listen’ pages, I deliberately made the decision to hyperlink these pages directly to the band’s YouTube and Song Whip channels.  I felt that because the band has released only a few songs at this point with little ‘official’ artwork, I didn't want to upset the continuity of the website by including this artwork - it didn't match the look and feel of the site.  
The most complicated thing for me during the design process was creating the cookie banner, it took me a few attempts and meltdowns to create the animation properly.  
The website came together fairly quickly at this point, however, I was aware of some tweaks I would have to make for the mobile site layout.
The layout of the ‘Gigs’ page would have to adapt for mobile as shown below:
Tumblr media
 Mobile:
Tumblr media
Most of the pages within the mobile site has to follow more a list layout, I think my design transitioned really well from desktop to mobile. 
As mentioned previously, I decided to use a burger menu for my mobile version of this site and I think this worked well.  I also added the diamond icon from my logo and linked this to the homepage within each page of the site.
Tumblr media
 The next post will show my completed desktop site.
0 notes
charliedesigns · 2 years
Text
Scaramanga
WIREFRAME DEVELOPMENT: Version 2 
Below is the simplified version of my site.
I have opted for a burger menu, this enables the visuals to take centre stage.  The ‘watch’ page now links straight to bands’ YouTube channel as there wasn't enough content to populate a full page on the site.  The burger menu expands to a simple menu which is easy for the user to navigate.   The mobile site also follows the same simple design and navigation.  
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
MOBILE
Tumblr media Tumblr media
0 notes
charliedesigns · 2 years
Text
Scaramanga
WIREFRAME DEVELOPMENT: Version 1
Below is the first draft of wireframes I created in Adobe Xd based on my sitemap sketch.  After reviewing this, I decided there was far too much detail and it was highly dependant on content needed from the band - this is fairly limited.
I decided to simplify the site completely - focussing on visually impactful imagery, audio and video - (this can be seen in the V2 wireframes in the next post).
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
0 notes
charliedesigns · 2 years
Text
Scaramanga
WORKSHOP 004: SITE MAP
Sitemaps are a hierarchical diagram showing the structure of a website or application.  They are an important step of the user centred process as they ensure content is in places users would expect to find it.
As part of the web design process and as a references point for my wireframes, I have sketched a basic site map:
Tumblr media Tumblr media Tumblr media
I think I've possibly gone into too much detail on some of the pages as the band have limited content to populate this, however, its a good basis to start drafting my wireframes and developing from there.
0 notes
charliedesigns · 2 years
Text
Scaramanga
WORKSHOP 003: USER JOURNEY
Tumblr media Tumblr media
1 note · View note
charliedesigns · 2 years
Text
Scaramanga
WORKSHOP 002: PERSONA
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
1 note · View note
charliedesigns · 2 years
Text
Scaramanga: Designing a Web Presence
Assignment 1: Research & Interpretation 
1. Royksopp 
 https://profoundmysteries.royksopp.com/
What is the websites main purpose?
The sites’ main purpose is to showcase and promote the bands’ new album Profound Mysteries.
Is it’s appearance & functionality appropriate to the purpose?
The appearance and functionality of the site is based on it being an explorative and immersive experience for the user.  The sites’ homepage is very visual and displays the bands logo for the album.  This page is intriguing as their isn't much copy or information, however, the symbol is interactive.  The user is able to hover over the symbol, creating movement.  I think this adds to the mysterious nature of the album and the hype the band are trying to build for its release.  Once on the main webpage, again it is very visual.  The top section shows tiles made up of peculiar images, some of the tiles are blurred - I think this is intentional and acts as a hook to lure the user back to the site to see which image will be uncovered next - it seems to act like a countdown timer to the albums’ release.  I think this site is aimed at existing fans of the band, if you were coming to this as a new user it may be quite confusing.  
Tumblr media
Is it easy to use?  Is it effective in achieving its purpose?
The site itself is fairly simplistic in design, there isn't a lot of navigation.  It is heavily reliant on imagery to tell the user its story.  The name of the album Profound Mysteries is very much reflected in the style of the site.  The imagery used is very abstract and surreal adding to the intrigue and excitement for the release of the album.  The only text on the site seems to be on the menu guide at the footer of the page.  
What design elements are significant in design - e.g. layout, colour, text, graphics, images and various other media.  Analyse its use - how does it help achieve its main purpose?  Does it aid in any functionality?
The site is predominantly visual and seems to be made of two main pages.  The homepage is bright and impactful - the colours change as you spin the symbol (green, yellow & red).  The symbol itself is 3D, interactive (it plays a song when you click on it) and is the main feature of the homepage.  The main page of the site contrasts the brightness of the homepage with an entirely black background and follows a grid layout to showcase the imagery.  The images within the tiles on the page are very surreal and Dali inspired, you cant quite make up your mind about what your looking at.  This is a really clever way to engage with the user and increase dwell time on the page.  These tiles are also interactive and reveal a clickable link which leads to the music for a particular song.  Everything within the site seems to be purposely mysterious which is appropriate to the albums name and does a great job of building intrigue and excitement.
Tumblr media
What is the context of the site?  What genre category does the site sit in? (e.g. is it a commerce site, News?  Entertainment?)  Analyse the sites’ position within the context.  (e.g. what else is achieving the same goal?)
I would place this site within the Entertainment field with a small element of e-commerce.  The purpose of this site is solely to promote the new album and there are clickable links to pre-order present at the bottom of the page, however, this seems to be a smaller element of the site with the main focus on building momentum and excitement for the new music.  The site is heavily interactive and experiential which I assume would be a huge draw for a hardcore fan of the band.  
2. Parklife
https://parklife.uk.com/
What is the websites main purpose?
This sites’ main purpose is to promote the Parklife festival and sell tickets for the event.
Is it’s appearance & functionality appropriate to the purpose?
The site came as quite a surprise to me, I've never really seen anything quite like it for a festival.  It is heavily illustrated, colourful, fun and full of personality - it has a very psychedelic vibe to it.  The site has a very youthful feel to it and the illustrative element works well for this type of music festival.  The illustration itself is very busy and eclectic which reflects the line-up across the event.
Tumblr media
Is it easy to use?  Is it effective in achieving its purpose?
I found the site very easy to use, there is a huge amount of information present on the homepage, however, the illustrative element makes this engaging - it doesn't feel like you are scrolling through mountains of information.  The only section that seemed to lack cohesion was the VIP section.  This section includes clickable icons which seem to take you to the same page no matter which one you click on, there is only a small amount of copy to describe each of these icons.  I think this section could have been more thought out, the VIP tickets are sold at a higher price point so as a user I would be expecting an more immersive experience from this section.  You could argue that it doesn't overcomplicate its presentation of the information, however, as its highlighting a more special experience it doesn't quite deliver the same impact as the main site.
Tumblr media
What design elements are significant in design - e.g. layout, colour, text, graphics, images and various other media.  Analyse its use - how does it help achieve its main purpose?  Does it aid in any functionality?
The site is heavily reliant on its use of illustration and colour.  The sites’ homepage uses illustration and a visual language which woks in harmony without clashing.  The colours are bold and bright which I think works well to target a younger demographic.  Its a really fun site that reflects the essence of a music festival really well whilst also capturing the excitement and momentum for the event.  
What is the context of the site?  What genre category does the site sit in? (e.g. is it a commerce site, News?  Entertainment?)  Analyse the sites’ position within the context.  (e.g. what else is achieving the same goal?)
I would place this site within e-commerce and entertainment. The main purpose of the site is to sell tickets and build excitement for the event.  
A similar event would be TRSMT Festival - https://trnsmtfest.com/.  This site also utilises bold, bright colours but in a more understated way.  The site is very visual but clean and less chaotic than the Parklife site.  Navigation is easy and information is clearly presented on the homepage and via a dropdown menu.  It has a completely different look and feel which feels like a more calm experience, however, I don't think it delivers the impact or the fun of the Parklife site.
3. The Beatles
https://www.thebeatles.com/
What is the websites main purpose?
In contrast to the previous two sites, The Beatles website acts as a ‘one stop shop’ for fans looking to immerse themselves in the rich history of their music.  It includes a full discography of their music as well as an e-commerce section where you can purchase merchandise.  The homepage is dedicated to promoting IMAX screenings of the bands’ final live performance in 1969.
Is it’s appearance & functionality appropriate to the purpose?
The appearance of this site is very clean, understated and simplistic.  It is easy to navigate with clear direction and cohesive layout.  The target demographic would likely be an older audience so this simple design would greatly appeal to them.  The simplistic design allows you to find what your looking for very easily and is really effective as the site houses so much information and history about the band.  The aesthetic of the site is sophisticated using black and white colours reflecting the look and feel of the bands logo.  
Is it easy to use?  Is it effective in achieving its purpose?
The menu bar at the top of the page allows for easy navigation and location of information.  The sub pages offer a structured grid layout which presents the information in a clean and impactful way.  The Beatles are an established band with decades of history so I feel like the website doesn't need to compete with that - It isn't overly fussy in terms of design.  The site allows the user to easily dig down to the information they need without overcomplicating it, its a really streamlined experience.  The main criticism I have regarding the site, is the homepage.  When you first land on the homepage you are met with a main body of text which takes up half of the page.  I feel like this is a missed opportunity to showcase some great imagery or audio content - I don't feel like it captures the essence of The Beatles.
Tumblr media
What design elements are significant in design - e.g. layout, colour, text, graphics, images and various other media.  Analyse its use - how does it help achieve its main purpose?  Does it aid in any functionality?
The site is very user friendly offering a fairly streamlined user experience.  The grid layout over each section works well to present a lot of information in a really clear, simplistic way.  I think it achieves its purpose of being a bit of an archive of history, music and culture of The Beatles very well.  Fans of the band are able to completely immerse themselves with all the information they need in one place.  As much as I like the design and layout of the site, I do feel it lacks the atmosphere and vibe of the madness of the bands’ era, I feel like there could have been more imagery or video used to capture this.
Tumblr media
What is the context of the site?  What genre category does the site sit in? (e.g. is it a commerce site, News?  Entertainment?)  Analyse the sites’ position within the context.  (e.g. what else is achieving the same goal?)
I would place this site within entertainment and e-commerce.  The website is informative but also acts to sell merchandise.  It will have an established audience but the information is presented in such a way that it is easily understandable without being overwhelming to anyone new to The Beatles music.  I would compare this site with another iconic band of the era such as The Rolling Stones -https://rollingstones.com/.  I would say their website is way more visually interesting, it retains the heritage of the band in a modern way, however, it doesn't contain the same level of detail and information as The Beatles site which allows for a more playful design.
4. Magnetic Magazine
https://www.magneticmag.com/
What is the websites main purpose?
The last site chosen by our group is an online magazine designed to be a EDM music hub for fans of that specific genre.  Its main purpose is to offer its audience a place to go to immerse themselves in EDM culture and community.  the site is host to articles, news, events and a podcast. There is also a fairly large section dedicated to sustainability which seems oddly out of place but I guess this is a huge talking point within current affairs in any genre.
Tumblr media
Is it’s appearance & functionality appropriate to the purpose?
The website appears very sleek and stylish with a structured grid layout.  The site is image heavy with overlaying text (headlines), its a really effective way to present visually appealing imagery without being too text heavy - a magazine tends to be very text heavy but this allows for a break in scrolls of body copy.
Tumblr media
Is it easy to use?  Is it effective in achieving its purpose?
Yes, easy to use with clear navigation - drop down menus across the top of the page allow for simple user journey.  There seems to be more ads on this site compared with the others which is annoying at times.
What design elements are significant in design - e.g. layout, colour, text, graphics, images and various other media.  Analyse its use - how does it help achieve its main purpose?  Does it aid in any functionality?
The layout of this site is reflective of the genre, its cool, stylish and minimalistic.  The grid layout works really well to display lots of information - there is a good balance between copy and imagery.  The grid layout definitely aids in the easy navigation and functionality of the site.  Once you click into an article it looks fairly basic and a little sparse, it doesn't feel as engaging and could be described as a little boring.
Tumblr media
What is the context of the site?  What genre category does the site sit in? (e.g. is it a commerce site, News?  Entertainment?)  Analyse the sites’ position within the context.  (e.g. what else is achieving the same goal?)
I would place this site within the entertainment/news genre.  It is a place where you can immerse yourself in all things EDM - this site allows you to become part of a community.  A similar website would be https://edm.com/ - this flows in a similar way to Magnetic with its grid layout, however I would say its a little more exciting and visually appealing.
Tumblr media
1 note · View note
charliedesigns · 2 years
Text
Scaramanga
BRAND GUIDELINES - DEVELOPMENT & FINAL BROCHURE
To start building my own brand guidelines document for Scaramanga I decided to look at some other examples.  I knew that I wanted my guide to look clean, minimal and modern so that was my starting point.
One of my classmates found a really helpful website - https://brandingstyleguides.com/.  Below are some of the guidelines I really liked in terms of design and layout:
Tumblr media
SoundID - I really liked the impact of the logo in this layout.  I was a little worried about the visual impact of my guide due to me only using a palette of 3 colours.  
Tumblr media
Discord - My own logo is made up of a word mark and an icon so I thought this was a really nice way to show the variants.
Tumblr media
Harley-Davidson - I loves HD’s guidelines document, however, it was way more complex than I need my own guide to be.
Tumblr media
Wolf - I loved the simplicity in the layout of this guidelines document by wolf, I decided to try and recreate this style within my own guide.
I started by drafting a few pages - front, back, contents:
Tumblr media Tumblr media Tumblr media
I could see at this point I wanted something I little more clean and simple so I mocked up a few more pages to see if I was happy:
Tumblr media Tumblr media
I really liked the look and feel of these pages and decided this would be the visual language I wanted throughout my guide.
I started drafting the full guide and was keen to include pages such as variants, usage, typography and colour - these were the pages I felt were most relevant to my design from the guides I had seen on brandingstyleguides.com.   I was also keen to include product mockups with more colour to create a nice contrast against the black/white colour palette within the document.
FINAL BRAND GUIDELINES DOCUMENT BELOW:
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
Im really pleased with how this turned out and feel its captures the tone of my brand identity.  
1 note · View note
charliedesigns · 2 years
Text
Scaramanga
FINAL LOGO & CONCEPT BOARD
After reviewing both of the concepts that I developed, I decided that I liked elements from both and decided to combine them.  I am really pleased with how this turned out and think the wordmark and icon perfectly balance each other.
My final concept board and logo:
Tumblr media Tumblr media Tumblr media
0 notes
charliedesigns · 2 years
Text
Scaramanga
CONCEPT 2: Final Design 
Tumblr media Tumblr media Tumblr media
1 note · View note
charliedesigns · 2 years
Text
Scaramanga
CONCEPT 1: Final Design
Tumblr media Tumblr media Tumblr media
1 note · View note
charliedesigns · 2 years
Text
Scaramanga
BRAND IDENTITY: Logo Development 
CONCEPT 2
Tumblr media
For this concept, I took inspiration from the band’s synth/electronic sound.  I felt this concept would have more of a futuristic/sci-fi feel and loved the idea of some sort of bold geometric shape.  In my mind, I was keen to develop a symbol that would sit alongside the logo or could be used on its on.
Tumblr media
I spent quite a while trying to sketch out the s&m from Scaramanga within this diamond shape but just couldn't seem to get the perspective right.
Tumblr media
First attempt in illustrator above.
I then tried to trace a more precise diamond shape to see if I could add the letters more easily.
Tumblr media
This still didn't work, however I really liked the shape with the added lines so decided to try and trace this out in illustrator.
Tumblr media
I really loved how this shape turned out, I was swaying between the stroke point for this but I think I prefer the lighter version.  The next stage was to pair this with a font..
Tumblr media Tumblr media
I tried out quite a lot of fonts with this design but I kept being drawn back to a font called Squarix.  
Squarix is a sans serif display font with an 80′s retro feel, it looks quite arcade with a sci-fi, futuristic vibe.  Again I decided to soften the edges of the letters detailed in the process below.
Tumblr media Tumblr media
I then paired this with the diamond shape:
Tumblr media
Really happy with how this logo design reflected the themes in my concept board. I feel that the contrast between the simplistic geometric shape and the bold typography of the logo represents the emotional vulnerability of the band’s song writing as well as their upbeat, dance techno vibe.  
1 note · View note
charliedesigns · 2 years
Text
Scaramanga
BRAND IDENTITY: Logo Development 
CONCEPT 1
As part of this project I was tasked with coming up with two different concepts and with that in mind, I decided to start by referring back to my mind map:
Tumblr media
The themes that I felt strongly about for the first concept was connectivity and collaboration.  I was drawn to imagery of soundwaves, light and soft movement, this led me to start building my first concept board:
Tumblr media
I decided to look for different fonts that I felt reflected the key themes I had picked out.  It was very much trial and error at this stage, I wanted to see how the band’s name looked on paper so I also printed this out.
Tumblr media Tumblr media
I eventually came across a font that I really liked called Blackpast Regular - a sans based font that looked modern and futuristic.
Tumblr media
This font had some really interesting glyphs and I decided to have a play around with different layouts.  
I wanted to soften the edges of the letters and form a connection to represent the close collaboration of the two members of the band.  The A & M were a perfect extension of each other due their natural elongated shaping.  I was really happy with how this turned out so decided to try the same effect on a few of the other fonts I had found.
Tumblr media
I really liked the font Futurama so decided to make some print outs to sketch over:
Tumblr media Tumblr media
Connection between the M & G
Tumblr media
Connection between A & G
Tumblr media
Version using a bolder font (Squarix)
At this point I was really happy with the logo I created from the Futurama font with the connection between the M & G.  I felt it looked really modern, fresh and clean so developed this further.
Tumblr media
I recreated my sketch in Illustrator adding the underscore and softened the letters.  This design is clean, bold and minimal with a retro, sci-fi feel which works well to define the band’s unique sound.
0 notes
charliedesigns · 2 years
Text
Scaramanga
BRAND IDENTITY
After initially listening to Glasgow band Scaragmanga’s music, I was drawn to  imagery of shapes, lines and movement.  I could imagine bright strobe lights, soundwaves, soft flowing movement and also connotations of something other-worldly.  
I find their music very emotive particularly within the song Simple Love which has a beautiful melodic tone.  Other tracks have a heavy trance/dance vibe making me think of bright colours.  
Research Board 1 reflects my thought process as I listened to the music.
Tumblr media
After a client meeting with the 2 members of the band I made lots of notes regarding their collaborative input and inspirations. 
The main themes I took away from this where:
minimalism - bold shapes, sci-fi, cubism, line drawings, futuristic
collaboration - the close relationship between the 2 members of the band
music style - personal, synth, electronic, instrumental, dance
inspirations - Kevin Callaghan art, Kate Gibb, other bands such as Underworld, Chemical Brothers
style - write their own songs, music inspired by life events
Scaramanga - name inspired by James Bond baddie
Tumblr media
I also took a look at other band logos and from my research the focus is very much on typography. 
Tumblr media
0 notes
charliedesigns · 2 years
Text
Passion Project
THE FINAL DESIGNS
CONCEPT BOARD 1:
Tumblr media
LOGO
Tumblr media Tumblr media Tumblr media
THE BIG 3
Tumblr media
BEER CARRY BOX:  I specifically chose a cardboard box as my packaging as it is more environmentally friendly than plastic options.  I was keen to keep the design fairly simple for this making the brand logo the star of the show.  I did, however add some of my paint work to the top of the box as I feel this is the signature look of the brand and an important element of the cans.
Tumblr media Tumblr media
Handsome Frank: inspired by Americana.
From the beginning of this project I knew I wanted to have a very obviously American themed can and had various names chosen including The American Dream, Commander in Chief, American Dream Cream... Not completely happy with any of those, I came across a list of former presidents nicknames and as soon as I seen Handsome Frank I knew it was the perfect name for this beer.
I mixed colours taken from the American flag to create the paint swirl and visually I think it looks great.
Tumblr media
Double Deuces: Inspired by 80′s movie Roadhouse
The basis of this entire project was to create a beer brand for my husband’s homebrew so it was quite a personal journey for me.  I worked closely with him to develop the key themes and he was really keen for me to include his love of cheesy 80′s movies and American dive bar aesthetic.  With this in mind I didn't want to create a design that was too obvious so I picked out colours from that era and wanted to reflect his ideas in the name of the beer.
The name Double Deuces was inspired by the namesake bar in Roadhouse.
Tumblr media
A-Punk: Inspired by a song by Vampire Weekend
This design was my wildcard of the bunch, I had no real vision in mind for this can other than I wanted to have a little fun with the colours and design for this.  The main idea came from my initial lemon/lime flavouring concept and I used similar colours within this design adding blue and purple to give a little more depth and impact.
The name A-Punk comes from a song by Vampire Weekend and was one of the first gigs my husband and I went to.  Vampire Weekend are an American rock band playing mainly post-punk pop from New York City and ties into the recurring Americana theme at the heart of my passion project.
CONCEPT BOARD 2:
Tumblr media
LOGO
Tumblr media Tumblr media
THE FINAL 3
Tumblr media
I really wanted to carry through the 80′s theme within my vector design and used basic shapes to create this large scale pattern.  I think the design looks vibrant against the black label and icon version of the logo works really well.  I used the font ‘Maka’ for this version of the design and I feel the curved letterforms compliment the sharp shapes of my pattern.
0 notes