how-to design html facebook applications

19
DESIGNING FACEBOOK APPS Presentation made on Feb 25, 2012 By Socialize-er: Nilofar Khatib LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS

Upload: socialize-group

Post on 26-Jun-2015

5.259 views

Category:

Technology


0 download

DESCRIPTION

A Socialize designer, Nilofar Khatib, takes you through the basics of designing a good Facebook application. She uses a recent app designed for our client in Qatar, Msheireb Properties, as an example. See the before & after through her eyes, and get inspired by one of the best looking non-flash apps on Facebook.

TRANSCRIPT

Page 1: How-to design HTML Facebook Applications

DESIGNING FACEBOOK APPSPresentation made on Feb 25, 2012

By Socialize-er: Nilofar Khatib

LEARN FROM THE MARKET LEADERSSERIES 1: DESIGNING FACEBOOK APPS

Page 2: How-to design HTML Facebook Applications

LEARN FROM THE MARKET LEADERSSERIES 1: DESIGNING FACEBOOK APPS

STEP 1STUDYING THE BRAND

The most crucial step before designing the app, just as with any creative is to have a solid understanding of the brand identity. This allows the brand message to stay consistent in the designs since the app would become a part of the brand expression.

ABOUT MSHEIREB PROPERTIES: The company is guided by the progressive vision of Her Highness Sheikha Moza bint Nasser. HH has identified a significant gap in the architectural history of Qatar and the lack of a distinctive modern architectural language that draws its roots from traditional Qatari architecture.

1.UNDERSTANDING THE BRAND GUIDELINES• Brand personality : The source of downtown• Visual identity : • Color palette : • Graphic devices : • Photography : Mood/Lifestyle Imagery• Typography : Enzo• Layout : Grid

2.STUDYING BRAND EXPRESSIONS• Print• Outdoor• Broadcast• PSA

Page 3: How-to design HTML Facebook Applications

LEARN FROM THE MARKET LEADERSSERIES 1: DESIGNING FACEBOOK APPS

STEP 2UNDERSTANDING THE TASK AT HAND

To launch an interactive social media competition which will give consumers the chance to make it ‘Your Downtown Doha' by sharing their favourite retail, dining and entertainment outlets from around the world which they would like to see in Doha. The nominations will be assessed by Msheireb Properties for inclusion in the retail mix.

The initiative is part of the company's effort to engage with the local population and to complement the Msheireb Downtown Doha project's uniqueness by seeking exclusive retail concepts that are new to the region and that will further add value to the development.

To ensure the retail offerings are truly world class, shoppers will be asked to embrace the ‘Your Downtown Doha' campaign by getting out their digital cameras and smart phones to ‘snap and share' their favourite shops, F&B and entertainment outlets from around the world. This could be any well-designed shop, trendy restaurant, cool brand or out-of-the ordinary mall.

They can then upload the pictures to Msheireb Properties' Facebook page with a brief description of why this concept, brand or outlet idea is so suited to Msheireb Downtown Doha. The top ten, as picked by a specialist panel at Msheireb, will then be opened up to the community for a public vote.

APPLICATIONYour Downtown Doha

HEADLINEMake it your

Downtown Doha, share your favourite retail

experience.

SUB HEADLINEWin a trip to your

favourite destination and much more.

TABSInstructions

PrizesTerms & Conditions

Submit your entryGallery

Page 4: How-to design HTML Facebook Applications

LEARN FROM THE MARKET LEADERSSERIES 1: DESIGNING FACEBOOK APPS

STEP 3APP DIMENSIONS ON FACEBOOK

CANVAS

1280px

72

0p

x

BACKGROUND

Active elements such as forms, gallery, links etc. were incorporated within 760 pixels. At the same time we also decided to utilize the negative space on the sides to maintain the browsing experience for users with larger screens. At the same time functional elements would be visible on all screen sizes.

760px

Page 5: How-to design HTML Facebook Applications

LEARN FROM THE MARKET LEADERSSERIES 1: DESIGNING FACEBOOK APPS

STEP 4REPLICATING THE GRID

1280px

72

0p

x

760px

Page 6: How-to design HTML Facebook Applications

LEARN FROM THE MARKET LEADERSSERIES 1: DESIGNING FACEBOOK APPS

STEP 5THE DESIGNS.

WE’LL SHOW YOU HOW THERE COULD BE MANY VARIATIONS OF THE SAME WIREFRAME/STRUCTURE:

1280px

Page 7: How-to design HTML Facebook Applications

LEARN FROM THE MARKET LEADERSSERIES 1: DESIGNING FACEBOOK APPS

OPTION 1

Page 8: How-to design HTML Facebook Applications

LEARN FROM THE MARKET LEADERSSERIES 1: DESIGNING FACEBOOK APPS

Page 9: How-to design HTML Facebook Applications

LEARN FROM THE MARKET LEADERSSERIES 1: DESIGNING FACEBOOK APPS

OPTION 2

Page 10: How-to design HTML Facebook Applications

LEARN FROM THE MARKET LEADERSSERIES 1: DESIGNING FACEBOOK APPS

Page 11: How-to design HTML Facebook Applications

LEARN FROM THE MARKET LEADERSSERIES 1: DESIGNING FACEBOOK APPS

OPTION 3

Page 12: How-to design HTML Facebook Applications

LEARN FROM THE MARKET LEADERSSERIES 1: DESIGNING FACEBOOK APPS

Page 13: How-to design HTML Facebook Applications

LEARN FROM THE MARKET LEADERSSERIES 1: DESIGNING FACEBOOK APPS

OPTION 4: APPROVED BY CLIENT

Page 14: How-to design HTML Facebook Applications

LEARN FROM THE MARKET LEADERSSERIES 1: DESIGNING FACEBOOK APPS

Page 15: How-to design HTML Facebook Applications

LEARN FROM THE MARKET LEADERSSERIES 1: DESIGNING FACEBOOK APPS

Page 16: How-to design HTML Facebook Applications

LEARN FROM THE MARKET LEADERSSERIES 1: DESIGNING FACEBOOK APPS

Page 17: How-to design HTML Facebook Applications

LEARN FROM THE MARKET LEADERSSERIES 1: DESIGNING FACEBOOK APPS

Page 18: How-to design HTML Facebook Applications

LEARN FROM THE MARKET LEADERSSERIES 1: DESIGNING FACEBOOK APPS

Page 19: How-to design HTML Facebook Applications

Let’s get social:

Suite 218 (Duplex) Loft Offices 2Dubai Media City

Tel: +971 4 4504245Fax: +971 4 4504246

Twitter: @SocializeAgencyFacebook: facebook.com/SocializeUAEBlog: www.socializeblog.com

THANKYOUClick here to see the My Downtown Doha app live!

We look forward to your comments, questions & suggestions. Drop us a line on our Facebook page and our designer

will answer you within 24 hours!