seal.com rebranding 2012
DESCRIPTION
Slides from the talk given by Brenden Rawson, Sign-Up.to's Australian Managing Director, on the 2012 rebuild of Seal's official website.TRANSCRIPT
![Page 1: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/1.jpg)
SEALRebranding for 2012
![Page 2: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/2.jpg)
SEAL.COMRebranding for 2012
• Brenden RawsonSign-Up.to - Managing Director (Australia)
•@urbanbrenden
![Page 3: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/3.jpg)
Requirements
• New design
• Mobile and tablet ready
• New tour page concept
• New video page concept
• Integrate with Sign-Up.to
• Branded email templates
![Page 4: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/4.jpg)
Concepts
• Inspirational work
• Mock-up artwork
• Colour schemes
• Fonts
![Page 5: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/5.jpg)
Concepts
Mobile
TabletDesktop
![Page 6: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/6.jpg)
Timeline
• The project initially had no exact
timeline however that quickly
changed with the announcement of
‘The Voice Australia’
• The project from beginning to end
took approximately 2 months
![Page 7: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/7.jpg)
Budget
• This project was part of a larger
on-going marketing program and
as such had no directly attributable
budget
•We were able to keep costs down
by managing and implementing all
aspects of the design in-house
![Page 8: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/8.jpg)
Facebook timeline
• During the website development
the new Facebook timeline for
pages was released
•We took the opportunity to build a
timeline on Seal’s career
• Multiple people across multiple
agencies collaborated
![Page 9: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/9.jpg)
![Page 10: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/10.jpg)
Facebook timeline
![Page 11: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/11.jpg)
Implementation
• HTML 5
• CSS3
•Web fonts
• Responsive fluid layout
• Extensive jQuery Javascript
![Page 12: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/12.jpg)
Integration
• Subscriber capture forms linking
back to Sign-Up.to marketing
platform
• Twitter widget
![Page 13: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/13.jpg)
Testing
• Multiple Internet browsers
• Adobe Shadow Edge Inspect
• iPhone, iPad, PC, Mac and various
screen sizes
• Seal’s 27” Thunderbolt display
![Page 14: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/14.jpg)
Complete
![Page 15: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/15.jpg)
Complete
![Page 16: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/16.jpg)
Complete
![Page 17: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/17.jpg)
Complete
![Page 18: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/18.jpg)
Complete
• Moved the site to Amazon EC2
servers with S3 backed CloudFront
edge assets
![Page 19: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/19.jpg)
Challenges
• Mobile, web and social - optimising content, not just the framework
• Break points for responsive design - how to adjust the content correctly not just resize a window
• Convincing the client to move to a simple vector based design opposed to the traditional pixel based
![Page 20: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/20.jpg)
Learnings
• SEAL.COMWhen working one-to-one with the client you need to be extremely flexible as direction can often change
• Facebook timelineThe Internet is the best place for archived media - you just have to
find it
![Page 21: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/21.jpg)
Outcomes
• All new branded website that fit the
client’s multi-device requirements
whilst also embracing new web
technologies and integrations
• Certain sub-pages such as the tour
page will be overhauled along with
a standard design refresh in 2013
![Page 22: Seal.com Rebranding 2012](https://reader035.vdocument.in/reader035/viewer/2022062614/546454bcb4af9f5d3f8b49ae/html5/thumbnails/22.jpg)
Thank you
• Brenden RawsonSign-Up.to - Managing Director (Australia)
•@urbanbrenden