ROY SPENSLEY SELECTED WORK DIGITAL DESIGN / ART DIRECTION

Transcription

1 ROY SPENSLEY SELECTED WORK DIGITAL DESIGN / ART DIRECTION

2 SPAFAX ICON MOBILE & TABLET WEBSITE SPARFAX / B2B / JUNE 2015

3 This is a business to business product to airlines to provide video via phone, tablet and desktop. Emphasis was on handheld devices to download offline to take on planes. I was responsible for the mobile and portrait tablet versions, designing menu UI, layouts, style of UX (ie x2 layout) interactivity and general design (pictured - homepage mobile).

4 I created all site pages in tablet and mobile format, ranging from product pages, login forms and hero landing pages. The designs were also to be used at a world trade show as a video showpiece to promote the product to different airlines. This meant producing the work to a very high standard to enable it to be used in presentational/completed format (pictured - homepage tablet).

5 Taking the desktop design I decided to make drop down menus for flight selection with central layout and large buttons for mobile. I also came up with the idea to use a scroll to top feature at the foot of the site to improve user experience.

6 I created the layouts for tablet portrait as well whilst working on the mobile. I also created some desktop pages so always thinking how to implement it across all 3 formats.

7 For the individual movie page I decided to create a nav menu with squares and icons, to give it a greater user experience (desktop had large horizontal buttons).

8

9

10

11 I created the menu design here and top UI layouts and ideas. I came up with the idea of pushing the site to the right to then show the menu and have plus and minus expanding UI.

12 For each page I created the design to match the desktop closely, but also have the best look and feel for that format.

13

14

15 Close up images of menu UI I was in charge of designing. I implemented a site sliding across animation with plus/ minus content extensions. Utilising a modern navigation bar look and feel.

16 JOHNNIE WALKER WEBSITE DESIGN BBH / JUNE 2015

17 Working for BBH I created a wide range of web pages in both desktop and mobile format. Utilising a modular approach with a minimal look and feel. Many mobile designs were created with main focus on being responsive and CMS driven.

18 I worked closely with the team and UX developer as there were usability guidelines to follow for the project, as well as CMS limitations to adhere to for the responsive elements. I designed different modules to fit into this setup, whilst keeping a minimal, clean look for the website.

19 (top) (page continued)

20 I thought it would look better if all the bottles were the same height so I proposed we did this across the project and find the right imagery.

21

22

23

24

25

26 I designed many different layouts that could work responsively for mobile and desktop including form design elements.

27 Modular page design for entance to the differnt whisky pages.

28 Extensive mobile designs were created, a selection shown here. From product pages to the heritage of whisky. This was a large scale project with many different design elements.

29

30 RUGBY WORLD CUP 2015 MOBILE GAME UI ITV / GOODBOY DIGITAL / 2015

31 At multi award winning mobile game company Goodboy I was senior designer for the official Rugby World Cup Game 2015 (ITV). Firstly creating wireframes for the mobile game (as above).

32 For this project I took the colour palette and created a look and feel for the Official ITV Rugby World Cup 2015 game that sits with their official app. I designed the style, going for a minimal, modern approach. I also designed the icons where I created white circles with minimal details for a clean look and feel.

33 As senior designer I created all the layouts and ideas for the design including the icon style, layouts and also then I created the textures for the game. This game also features a live kick experience, where in the world cup if theres a kick you can kick at the same time in the app. I created a CMS wireframe for the developer to create which kicker and where the ball is for when the staff have to input this data.

34 Additionally for this project I went on to work closely with the developer to create the textures for the game itself. We kept updating the game to improve it and add more effects like misty smoke and camera flashes. I created all the textures shown and tried to create a realistic look of a european game arena. Additionally I added some shadows to the crowd to improve the look and used a development tool (charles) to change textures during build phase. (Note that the UI is not fully implemented in these designs).

35 DAVID BLACK WEBSITE DESIGN & BRANDING DAVID BLACK - MUSICIAN / FREELANCE / 2014

36 (2014) Web design and branding for musician. All designed from scratch aiming for a modern look with an organic, premium feel.

37

38 I designed it with a modular approach to allow easy responsive design into mobile and tablet.

39 ADVENTURE TIME MOBILE WEBSITE DESIGN TURNER / WASTE CREATIVE / 2014

40 I designed this mobile website and kept a simple UI approach. The user taps through to each world by tapping a square. Since it s a responsive design I created the portrait layout too. It was very different to the desktop as that was a rich parallax scrolling site.

41 UI menu slides in from the left.

42 URL:

43 BP FUEL WEBSITE WIREFRAMES BP / GOODBOY DIGITAL / 2015

44 Wireframes for a BP project to promote new fuel type. The wireframes have some look and feel as it was a minimal website project. I created the high fidelity wireframes and chose the icon style and general fresh, clean look and feel. (The green orb was a required feature asset)

45 I also created a few versions of sitemaps for this website experience. On the left I created a tabbed menu experience idea, shown here is when the user has clicked the opening times it would expand and show further details. I designed a menu system with idea of pushing it across to the right on tap. The menu would also expand on clicking the plus (+). I came up with all these ideas including the tabbed buttons etc and layout myself and was in charge of all look, feel and layout.

46 STARWARS GAME GAME UI DESIGN DISNEY / GOODBOY / 2015

47 This is a game interface for a series of Starwars games I designed at multi awarding games studio Goodboy Digital. The client wanted a technical look. I was given the task with a general brief of creating something technical and panel like with instruments. I decided to create slightly unusual icons with small details and minimal shapes and elements to each piece to make it a bit different, whilst still being technical in style.

48 BRITISH GAS VARIOUS WEB DESIGNS BRITISH GAS / WASTE /

49 British gas landing page designs.

50

51 FIVE STAR PRINTING WEB DESIGN & BRANDING FIVE STAR / FREELANCE / 2014

52 (2014) Web design and branding for printing company.

53 (2014) I updated the companies branding with a fresh colour scheme of light and yellow tones for a modern, professional aesthetic.

54 TWISTED SHOTGUN BRANDING & WEBSITE PERSONAL / TWISTEDSHOTGUN.COM /

55 I started a webcomic in 2013 to enable me to do comics and illustrations. I created a brand identity and website to house my illustrations.

56 I created a minimal colour scheme with a UI that matched the comics style and feel. Users are expecting to see comic type navigation for webcomics, so I made these nav buttons.

57 Final design and merchandise. Main focus is the comic itself, whilst keeping a clean look. URL:

58

59 ADIDAS WEB DESIGN EXPERIMENT PERSONAL PROJECT 2014

60 (2014) Experimental project as I wanted to try to design for a single product using strong colours. I wanted to try using only two bright colours and create a microsite that flowed well with a vertical look. Small touches like polygon textures and UI elements enhanced the design.

61

62 WW2 INTERACTIVE INTERACTIVE WEB DESIGN & BRANDING UNIVERSITY PROJECT / 2008

63 (2008) An interactive project where I created all the assets myself, including photography as well as coding the site myself. It was a huge project with lots of details and interactions.

64

65 PORTFOLIO 08 WEBSITE & BRANDING PORTFOLIO 2008

66 (2008) My portfolio design from 2008 had a full page feature in Web Designer Magazine Issue 150. It featured parallax scrolling and a fresh, light feel.

67 THANK YOU LONDON, UK