Mark's Inn

Innformation on my adventures in design.

[marksinn]

This story details a quote from the great Paula Scher (of @pentagramdesign ). It started out as a road back into analogue making (that’s how designers have renamed ‘cutting and sticking’), and, suitably, it was just a cacophony of errors. I was able to compile the very best misdoings into 12 panels that show a progression of the text from bad to good. #graphicdesign #graphicdesigner #illustrator #typography #stencil #creative#design #designinspiration #mistakes #paulascher #cogc #art #spraypaint #graffiti #instaart #filmmaking #posterdesign #posterart #typeposter #adobe #collageart #collage #premierpro https://www.instagram.com/p/Cjp8a4NKCdY/?igshid=NGJjMDIxMWI=

[marksinn]

Skateboard Designs: Bloom Spotted this bad-boy sprouting in the garden, enjoyed the simplicity of it, and figured it’d be getting ripped out soon. You’re welcome, weed. #skateboard #skateboardart #allhandsondecks #glasgow #graphicdesign #flower #weed https://www.instagram.com/p/CfGQ6MCKxzx/?igshid=NGJjMDIxMWI=

[marksinn]

Skateboard Designs: MDS Picked up a broken board from a skatepark and thought it might be nice to make a design that worked when it was split in two. Then I started creating transfers using gum paper. I hope this is a fitting enough tribute to all of your hard work, @kendoh88 #skateboard #allhandsondecks #glasgow #warzone #merlot #art #skateboardart https://www.instagram.com/p/CfAJnOlKQTs/?igshid=NGJjMDIxMWI=

[marksinn]

Scaramanga: Social Media Examples

[marksinn]

Scaramanga: Social Media Study

Social Media Platforms

Instagram is a photo and video sharing service that encourages users to post a lasting record of their experiences and lifestyle, generally posted in the trademark square frame that user’s homepage is styled around. - Photo editing is a popular way for users to enhance or perfect their photos before posting them - Stories allow users to document their day as it happens with short videos or photos that are only available for 24 hours. -Reels provide an opportunity for algorithm-based sharing, where a full-screen video is added to a constant carousel that trails through users feeds. - Direct Messages give users the ability to share posts and contact followers directly, hence the name -Shop is a recent feature that creates direct links for companies who advertise on social media to sell their products without taking customers off the app.

Twitter is a short-form blog site where users can write statements that are visible by anyone following or searching for them. Focussed hugely on hashtag trends. Photo, video and link sharing are all available in order to add to a statement or provide additional information Retweeting and @mentions allow users to directly connect with each other or to continue a conversation in the public eye.

Social Media Etiquette There are general rules that all users are supposed to stick to. Of course, there are millions of people who believe themselves to be exceptions to this. Thankfully, many sites now have moderators and blocking and reporting facilities for incidents where this etiquette is pushed aside. When it comes to using social media as a promotional tool these tend to centre around giving your customers a positive experience: Be genuine Don’t spam your followers Be collaborative Don’t over-promoteUse your position for the greater good Don’t put down competitors

Viral Marketing Strategies

#shotoniPhone

Apple’s photography-based campaign pushed the opinion that they had the best camera available in a mobile phone, and simlutanesouly encouraged their users to do their advertising for them. By claiming to have the best phone, it would then push the public to put this to the test, so they buy a phone, take the best photo they can, and post it online with the millions of other viral posts. Thus encouraging more people to put this to the test, by buying a phone…

In order encourage audience engagement Apple used and promoted #shotoniPhone to allow users to prove how good their photography skills were. Apple then took the best photos with this hashtag and put them on billboards all around the world, further encouraging customers to take even better photos, that Apple could then put on billboards. As a cross-promotional stunt, Lady Gaga shot a music video for Stupid Love entirely on and iPhone, furthering the idea that this camera is good enough for professionals - so why wouldn’t you want it for your next snap?

Three standout strategies that Apple used were to guide their customers to the creation of “perfect” content, the people engaged with the campaign as buyers then were seeing their work being used to promote the product they were now using. Apple uses a variety of social media to promote their products and services, but their Instagram was used solely as a tool to bring together the works from #shotoniPhone. Being featured on the social media of one of the world’s biggest companies is a level of which many people would kill for. The longevity of this campaign is also outstanding. Launching in 2015 for the iPhone 6, it is brought back with each new phone as the cameras continually improve with each new iteration of the device, meaning people are being given yearly reminders of the best new camera available, driving them to upgrade their device every year.

As far as success go, from 2014-15, directly linked with this launch and the #shotoniPhone campaign, the sales of iPhone jumped by 62 million, one of there biggest growths in the 15 year lifespan of the iPhone.

Uber x South by SouthWest

Uber provided free rides throughout the South by Southwest festival, relying on their customers to post about it online, thus providing free advertising worldwide for a single event. As an app-based taxi company it made sense to target an audience of tech-focussed consumers to give freebies to in order to build awareness. Alongside the general free advertising they were gathering, there were also promotions for people who were ride-sharing with others to gain access to VIP experiences at the festival. Online happenings like this have effectively replaced the idea of ‘calling a taxi’ with ‘booking an Uber’. New users also gain the opportunity to get a free ride for a friend using shareable codes, this can oftern benefit both parties through vouchers and money-off schemes. Uber have partnered with multiple companies over the years since SxSW, including links within Facebook to book a car directly from the Messenger app. Hilton’s own app has the ability to plan a journey that will earn the user loyalty points with the hotel chain. The biggest impact for the company, arguably, is the demand for UberEats to come to Britain after its success in the US. As a thank you to healthcare workers durnig the Covid-19 pandemic, the hashtag #GratefulUK was used as a tool to push a promotion enabling frontline workers to be granted free rides and meals through Uber and UberEats. Following the South by SouthWest event in 2013, Uber’s revenue more than quadrupled over the next two years.

Reference

Carter, H. (2020). #ShotoniPhone: A Picture Perfect Campaign. [online] Medium. Available at: https://hayleycarter-39668.medium.com/shotoniphone-a-picture-perfect-campaign-93e54b89bab0 Digital Music News. (2020). Lady Gaga’s Latest Music Video Was Shot Entirely on iPhone 11 Pro. [online] Available at: https://www.digitalmusicnews.com/2020/03/05/lady-gaga-iphone-11-pro/ [Accessed 1 Jun. 2022].

DOJO Creative. (2019). Digital Marketing Examples: McDonalds, Uber, and Airbnb. [online] Available at: https://letsgodojo.com/digital-marketing-examples-mcdonalds-uber-and-airbnb/

Moloco (2021). The Uber Marketing Strategy Unpacked: 6 Lessons For Rideshare App Marketers. [online] www.moloco.com. Available at: https://www.moloco.com/en/blog/uber-marketing-strategy

iqbal (2019). Uber Revenue and Usage Statistics (2019). [online] Business of Apps. Available at: https://www.businessofapps.com/data/uber-statistics/ Twilio Blog. (n.d.). Uber Storms #SxSW: Free Uberx Rides, New Luxury Cars and Pedicabs. [online] Available at: https://www.twilio.com/blog/2013/03/uber-storms-sxsw-free-uberx-rides-new-luxury-cars-and-pedicabs.html [Accessed 1 Jun. 2022]

[marksinn]

Scaramanga - Desktop

Scaramanga Desktop Hand-in

6 Screens, Last modified on May 26, 2022 20:56 GMT

Oh, how tempting it is to just leave it there. A full, fleshed-out website that incorporates a vibe, a colour story and feeling. But it's not a real, fully working website, it's just the design stage. Some pages link to others, but they lead nowhere serious.

This was the plan. A simple landing page with art that represented the band and links to four subpages. These pages would be fairly minimal (are we spotting a theme?) in their offerings - the would be doorways that led to wonderful worlds, but there would not be much distraction around the doors themselves.

As you can see from my annotations, I wanted to get fancy. I wanted the user to hover over sections and have shapes grow and develop with the reader as they read/ watched/ experienced - but then I just wanted the user to understand what they were looking at and be able to access the information they wanted. And so I took my stripped back wire frame and populated it, proud to say my Live and Store pages are fairly similar to how they began, but I'm also happy to show you that I've managed to incorporate everything from my brand guidelines into an informative, interesting website that offers everything a fan needs.

Working from my original, drab brand guidelines I was able to create a first draft that was workable. I used this to learn, it was full of mistakes in terms of font-size, layout and links. While there are still similarities between the two, the amount of development and care that went into this metamorphosis really shows when you go into the website and appreciate the fine details in both aesthetics and in user experience.

Just as my mobile site grew arms, legs and symbols, this page is now fully representative of Scaramanga. There music is available at the touch of a button through all the big channels, the locations on the map, when clicked, would take you to the date for that show, then on to buy tickets. In the mobile version I showed a sub-subpage for the Store, here I present how articles from the News page would look when clicked. It's all very user friendly, the colours much brighter and happier than the original, which allows this to be an overall more inviting place to find out about your new favourite band: Scaramanga.

[marksinn]

Scaramanga - Mobile

I have to open with a small, unintelligible warble.

The colours are purely to distinguish between pages, which was necessary to solve a disagreement about how burger menus should look. My tutor and I couldn't agree on the specifics of a continuous layout between the opening page and the top right menu on the subpages. I'm being entirely honest, I think we both came out of the experiment thinking we had both won, and that the other person was still wrong.

I liked the idea of a page that moved with you, sections colliding into each other and building so you could always access the various subpages. Then I realised that I had only just started web design, and this was purely an exercise in laying out a rough guideline for a web-presence. But I was dead-set on keeping my pretty colours (sorry, boss)!

The layout here shows that each page will be littered with information, looking back I'm proud of (and surprised at) myself that they aren't as chock-full as I expected. I must have been taking my foot off the gas with regards to filling space, and I was clearly thinking about the use of information, images and layout. Now, I wasn't supposed to be thinking too much about the design aspect, but for a first go - I'm chuffed with this.

The wireframe allowed me to plan out what kind of information would appear on a page (e.g. for music I wanted album covers and play buttons) without going too heavy into how it would actually all look in the real world. In client-work wire frames are used to give a vague idea of how a website might look without any personality - just the skeleton of how information will be laid out. I worked off my original brand guidelines for the first concept, and then after a bit of beta testing with friends and colleagues, and an overhaul of the brand, I created the second (and final) version:

Now that my site is complete, I'm glad I had that frame to work from. Many pages are almost exactly as I'd planned - they followed the scaffolding perfectly (especially the 'Live' and 'Store' pages), but I was able to be flexible enough with my ideas to allow growth, change, and some aspects to be thrown out the window. The pages move with the reader, with access to menus and social media links staying ever present for the user to quickly access other areas of the site.

Mostly, I'm proud of my continued use of the visual language. I considered applying meaning to the symbols (having the M shape link to music, the jagged circle link to news), but that would have been too prescriptive. The band give a feeling of ad-hocness when you talk to them, so the feeling of these cool symbols littered around as pleasant background noise felt more fitting than by assigning purpose to each one.

If you really want to see what it's like to visit their website, jump in:

Scaramanga Mobile Hand-in

8 Screens, Last modified on May 26, 2022 21:07 GMT

[marksinn]

Scaramanga - Brand Guidelines

With all of this in place, I was now able to build a set of brand guidelines that would explain the story of Scaramanga. My first concept was, in hindsight, fairly drab. It told a moody tale of pretentiousness and feigned mystery. It looked like this:

I am afraid of negative space. I try to fill as much of a page as I can. I think it's because I'm quite a skinflint and want to get as much use out of something as I can. However, this is not the end of the toothpaste, I don't need to slice this open and use up every last drop of paper just to show that I've used it - which is what I thought I had to do. With a more fitting story that linked to a feeling that a electronic duo might want to portray, I was able to bring my colours, language and new outlook together to create something that, if I may be so bold, is more Scaramanga, and less ScaraMarka.

Here, you can see the increased use of white space around my images and text. A strict grid-system is in place to keep everything uniform, the iconography is peppered across the document, giving it a more cohesive feel. The text is small, drawing you in without screaming at you. All in, I feel this layout provides a more comfortable user experience - one that helped significantly when creating the web-presence for the band.

[marksinn]

Scaramanga - Visual Language

After playing around with symbols for ages (and I mean ages, I had to teach myself how to make pixel art*) I wanted to utilise the VIB Ribbon symbols I had taken inspiration from. It was suggested by my tutor to use them as a visual language across the brand for Scaramanga.

*It turns out the pixelated look was a little too on-the-nose, but it was fun to learn!

Playing with the shapes was next for me, seeing how they looked in various shades and thicknesses:

Before seeing how I could play around with one or two, using colours from the chosen range:

[marksinn]

Scaramanga - Logo Crafting

After the development work to create a logo for the band, I had to refine it. In the hunt for finest I went back to my original inspiration for this design, then to my mood boards and conversations with the band. I started to adapt the S mark according to various influences (other band logos, the BBC news opening titles, the original bullet designs, the VIB Ribbon symbols) - but nothing was quite working for me.

After discussing it with a new friend in the design world, he advised that it was more just a little bit of crafting that I had to apply, not redeveloping the whole idea. A soft curve on the corners, ensuring equal spacing between the lines on it, and a colour story that meant something to the brand. From here, I started to look into as many techno-linked colour schemes as I could find - throwing my S mark onto them to get a feel for how they would look.

These colours were much brighter than the ones I had been using before, dark oranges and dull greens were replaced with vibrancy and highlights. The bottom centre idea came from a discussion about what a Scaramanga show might be like: concrete walls, lasers bouncing from the stage, the band being lit from behind. Coincidentally a lot of these colours were in an image of The Prodigy that I had already been working with (you can see it to the left of the woollen Keith Flint). Kismet. Possibly.

[marksinn]

Passion Project: Printing. Both Kinds.

So I coffee stained paper, lots of paper. I tea-stained it first, but it wasn't very strong tea, so I went back with a bucket of java and it came out looking (and smelling) pretty good.

This spread, in particular, I was quite proud of. It had a lot going on, but liked the torn paper lying around my desk (which is just a photograph of exactly that) and I was chuffed to have come up with another take on my timeline - simplifying it down and taking a lot of text out. Some would say it was the same information but in minimalist form.

After discussions with my tutor I decided to strip a lot of the work back, some pages were the same as the first concept for my brochure, and I needed to start using my new design skills in my work. After taking a few classes in screen-printing I decided to adapt some photos of my skateboards and bring them into my work.

This photo had been the back cover of my first brochure, but it had such vivid points of contrast that it seemed like a good option. I took a few more images and transferred them onto a screen.

Here, and unused photo of my first three boards and a new design, the Merlot Death Squad, are ready to be inked onto paper.

These are just two of the prints I made. Images that I then digitally ripped off the paper and placed into my brochure. Once I had them back in the computer I was able to play around with composition and multiples, thus creating my new back cover.

It's been fun to mix the medias, use my old tried and tested ways of working and mix them up with new techniques. The final brochure will be printed on newsprint, to give not only that real-world look, but also to help with the 'aged'/'used' feel - without the coffee smell. The entire piece is, probably, more representative of my outlook and of how I want the Minimal brand to be seen.

Less writing. More skateboards.

Minimal.

[marksinn]

Passion Project: Adaptations

Firstly, I apologise for the quality of the screenshots - but this post is about layout, so really nobody's looking at the details.

Having pieced the brochure together, I took a break. Didn't look at it for about ten days or so. Coming back with fresh eyes (and fresh resources for my textures) meant I quickly spotted things that didn't work and things I wanted to improve.

Above is the layout I had at the end of my last session. A front cover, five double-page spreads, and a final photograph. I'll wait until I print out a copy before I decide what I think of the front and back pages, and I'm beyond chuffed with the 4th spread, but the others required a little editing.

And I know I tend to waffle on sometimes, and seeing as one of my aims with this brochure is to minimise text, I've given myself only a small space in each comparison to explain my process.

My next step will be to print this out. Having enjoyed the old skate magazines so much, my first plan is to see how they look on yellow, aged-looking paper. Wish me luck, fans.

[marksinn]

Passion Project: Layout Planning

Sketch - Having decided on the main images and copy I'd be using for my brochure, and having created my first version of it, it wasn't too big a job to restructure. There were ideas that I had put aside from the initial plan (such as the stairway-timeline or showing the progress of a design) that I decided to give a little more time to here.

1 - I like the idea of going full tilt boogie on the minimal front cover. I loved the use of colour that was evident across the 70s magazine spreads, but I might just find a cool texture, maybe something reminiscent of grip-tape, and subtly put it into the background. But if I'm going for minimalist, maybe I shouldn't?

2 & 3 - I still feel an introduction page is necessary, something to get my brand across, but in this iteration of the brochure I want the pictures to do the talking. For now I've just brought in the copy from my first draft but I might try to cut this down to a few explanatory sentences.

4 & 5 - This design best exemplifies the way Minimal the brand works - but, again, I want the images to stand alone. Expect the copy to be reduced, and maybe the page order to change, as I'm now realising there are two text-heavy articles one after the other. Also taken from my research, I'd like to put some illustrated spray-paint cans around the pages here.

6 & 7 - This is one of those "I'll put in some placeholder text, for now" moments that, the more I look at it, the more I like it. The memory of a friend's MSN tag-name: "Now would be a good time to say something profound. Nothing comes to mind." is currently resurfacing.

8 & 9 - The most involved page is definitely my research on Jim Phillips. I spent a lifetime on the timeline in my first version of the brochure, so I think it'll take some time to iron out the creases in this one. Currently quite happy with the text on the left-hand page though, again feels similar to the layout from the old magazines.

10 & 11 - This deck design is probably one of my best received and best-produced. The story of its creation is quite cool, so if I can find a way to include the development sketches and photos then I feel that would add to the finished product. Perhaps.

12 - I liked finishing the brochure with a flat image, but I feel that a full page might really bring home my "let the pictures do the talking" motif this time around. Obviously, composition needs to be played around with here.

[marksinn]

Passion Project: Publications Research

As I look to create a brochure to promote my skate brand, I turned to other flyers, catalogues and magazines from the skate world. I've learned a lot from online publications and historical magazines. This post is a small summary of what I've picked up/ plan to use:

The fact that I focussed my research on magazines from the 70s means that a lot of these are photographs of yellowing pages - it's a look I'd like to explore.

[marksinn]

Passion Project: Branding Alternatives

This branding is very cool - am I allowed to say that? I love the smooth style of it, I love the way it all flows, I love the fact that it has a skatepark feel to it through the bumps and slopes. However, when applying it to decks and t-shirts it became clear that it's not really obvious enough. So, I spent time creating various thicknesses that felt more in tune with the idea of a skate brand, yet I still wanted to allow the logo to carry the Minimal concept.

A lot of this logo carries the meaning of the brand well, but I think in the situation where I'm trying to create a bold brand in a popular market, it may not have the impact that I want it to.

[marksinn]

Scaramanga - Online Personas (and the user's journey)

This task involved considering who the target market for Scaramanga would be, from further conversations with the band regarding their style and as I begin to plan their website, I began to create a fictional fan. Someone who would represent Scaramanga's demographic, and I considered what kind of person they would be and how they would access the band's online presence.

Introducing: Craig

Once I had a persona in mind, I was able to picture the way he would likely discover the band and begin his journey to becoming a fan. In the modern world of constant connection, the gathering of information has never been easier. This cartoon explains how Craig found his favourite new band (probably before you've heard of them):

[marksinn]

Scaramanga - Logo (and brand identity)

Here. We. Go.

For three months now I've been working with Scaramanga, a Glasgow-based electronic duo set to relaunch their brand in the Spring. Having worked together for a few years now, both members were keen to have a new logo, website and identity going forward into the new year.

Before meeting the band I listened to a selection of their songs and sketched out my immediate response to their sound.

Then, when talking to the band about their style, influences and vision, I took copious notes on what went into creating Scaramanga.

Following this conversation, the band provided more songs for inspiration. Once again, I listened to the music and drew out some more detailed thoughts.

Now, armed with a slew of information, I was able to research the influences on the band and began to develop ideas based on their music and their words. I took this all and compiled mood boards that contain film and pop culture references, images that represented the vibes I took from our conversation and the words & images that came to mind when listening to the music.

One thing that came to mind was a 90s Playstation game called Vib Ribbon, where various buttons were to be pressed when specific symbols came on the screen. I created hand drawn representations of these symbols to start developing logo ideas.

The stand out here was the form of an M - with it being a central letter in the band's name. I started working with that as a stand out part of the logo, using the serifs on either side of the M to help highlight the entire name. As a second idea I took the nomenclature of the band, a Bond villain from the 70s, and played with bullet holes being shot through and around the word Scaramanga.

Once I hard worked these two ideas into images that I was happy with, I developed colour schemes that suited the designs. Before I made my final decisions, I wanted to see how certain variations would look in the real world.

I was incredibly happy with the designs, and so presented both images to the band for their consideration.