Work in Progress - Graphic guidelines, printed & digital graphics for Urban Waves. Visual design for the website.
The guidelines involved selecting colour swatches, typefaces and designing digital icons to be used throughout the website.
The Urban Waves concept mixes together skateboarding - rigid city surfaces with surfing - tropical and sunshine. Colours are bright and vibrant, playful.
Urban Waves posters, typography and tag lines.
Variations of illustrative element in poster format.
'For those who ride rigid surfaces'
Variations of an illustration background - reused multiple times in different media formats within the project. It also serves as an example the kind of illustrative elements used with the project. A mixture of photo and vector shapes, colourful and vibrant.
Urban Waves Visual design - desktop
Medium to High-fidelity mockups of different pages for the Urban Waves website: Landing page and Decks page. Product pages for individual desks are viewable below. Rapid prototyping was done in Adobe XD/Sketch. Click on the video below to see how a possible user journey/flow would be experienced with a screen capture of the prototype.
Urban Waves UX of Rapid Prototype
Screen capture of visual design and possible UX, taking user journey from home page down to the product page.
graphic elements - icons
These were created to be part of a tab that drops down when a navbar element is clicked. The panel offers a visual choice for different skateboard parts or a pre-built range.
Skateboard deck design - Urban Waves (ride rigid)
I AM the city
Spirit Yoga, email and landing page design
Work in progress. Working with a limited palette, a selection of striking photos and a dynamic but uncluttered layout to create segments related to the key points on the landing page for Spirit Yoga. Design for email, both desktop and mobile, with links to landing page.
Using a hierarchal or horizontal grid to chunk related elements into different segments but then arranging the individual segments of the hierarchal grid to create emphasis or interest. Making the proportions within each segment work, using multicolumn or balancing visual weight.
HTML5 web banner at the bottom of the page would link to landing page as well, the one on this page is an animated .gif version of the banner. The html5 version is difficult to upload here - I’m building a Wordpress site to accommodate these kind of media.
eMail designs for desktop and mobile
Visual design - spirit yoga - segment
Full size screenshots of different segments of the landing page. The one above is the view above the fold.
Mockup of Landing page, Visual and graphic design
Medium - High fidelity version of the landing page design side by side with the grid I created and used in layout. It's a hierarchical grid with some modular and multi-column elements. On the right of the desktop version is the mobile version of the page. Play the screen capture video below for a closer look at the elements on the page - the browser frames the different segments of the page so it gives a better view of how the user would be experiencing the page. There's a post on my blog related to this: How I came to love grids
Screen capture of landing page - Spirit Yoga
Html5 web banners
Pop up banner (720 x 300) This is an animated .gif version of the html5 and .swf versions.
Engineering perfection poster project
Printed graphics. Three predominant ‘company’ colours were used in a simplified palette that suited a Constructivist - industrial style. The concept for this poster was inspired and developed by a synergy in Constructivist posters from the Soviet Union with the production process. My idea was to communicate the relationship between the engineers or product designers and the workers on the production line in their roles in bringing the company’s products from paper to a completed reality. The pride inspired by each person’s contribution within the overall process is motivational. The posters were designed mainly for an internal audience, encouraging pride towards perfection. Though they are also seen by external people visiting the company and attending meetings in the engineering meeting room.
'Call to action' segment
Work in Progress. The assignment required a call to action mechanism to be created to be placed on the product page after enough information had been communicated for users to be able to make a decision on whether the product met their requirements. This break allows for reflection and an opportunity for action. I designed some variations. The variant at the bottom of the page is going to be modified for the tech support page of the site. An example of the ‘call to action’ segment in context, I’ve used a medium fidelity prototype of a product page to show how the call to action might work.
Space Ape Poster
Printed graphics. Space ape is a representation of humanity - Over the course of our history we have looked upward to the stars and dreamt of ascending into those heavens. The American and Soviet Union flag mix making up the title ‘Space Ape’ in one is a play the space race.
eShot campaign assets
A series of images for eShots to launch new websites assets. These were cobbled together from various elements. You can read a blog post about the process of ‘Frankenstiening’ or creating these composite images from scratch. Link to blog post.
New Accessories Catalogue, Visual design reboot site
Work in progress. These are medium fidelity prototypes of the new accessory catalogue. The concept is to shift the current site into a modern and flat style. The current .com is being developed on a Drupal platform. The assignment for the design of the online catalogue involved modernising the visual design into a simple and clean, fresh and modern interface. Reorganising the information on each accessory into a clear arrangement in a hierarchal grid with two tabbed sections of summary and specifications seemed like a great way to organise the datasheets. The treatment of the ‘hero’ images placed on an kind of infinity wall to create a feeling of depth gives the page a sophistication that’s very attractive.