Your SlideShare is downloading. ×
0
How-to design HTML Facebook Applications
How-to design HTML Facebook Applications
How-to design HTML Facebook Applications
How-to design HTML Facebook Applications
How-to design HTML Facebook Applications
How-to design HTML Facebook Applications
How-to design HTML Facebook Applications
How-to design HTML Facebook Applications
How-to design HTML Facebook Applications
How-to design HTML Facebook Applications
How-to design HTML Facebook Applications
How-to design HTML Facebook Applications
How-to design HTML Facebook Applications
How-to design HTML Facebook Applications
How-to design HTML Facebook Applications
How-to design HTML Facebook Applications
How-to design HTML Facebook Applications
How-to design HTML Facebook Applications
How-to design HTML Facebook Applications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How-to design HTML Facebook Applications

5,258

Published on

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. …

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.

Published in: Technology, Business
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
5,258
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
61
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. DESIGNING FACEBOOK APPS Presentation made on Feb 25, 2012 By Socialize-er: Nilofar Khatib LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS
  • 2. LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS STEP 1 STUDYING THE BRAND <ul><ul><li>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. </li></ul></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>UNDERSTANDING THE BRAND GUIDELINES </li></ul></ul><ul><ul><ul><ul><li>Brand personality : The source of downtown </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Visual identity : </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Color palette : </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Graphic devices : </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Photography : Mood/Lifestyle Imagery </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Typography : Enzo </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Layout : Grid </li></ul></ul></ul></ul><ul><ul><li>STUDYING BRAND EXPRESSIONS </li></ul></ul><ul><ul><ul><ul><li>Print </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Outdoor </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Broadcast </li></ul></ul></ul></ul><ul><ul><ul><ul><li>PSA </li></ul></ul></ul></ul>
  • 3. LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS STEP 2 UNDERSTANDING THE TASK AT HAND <ul><ul><li>To launch an interactive social media competition which will give consumers the chance to make it ‘Your Downtown Doha&apos; 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. </li></ul></ul><ul><ul><li>The initiative is part of the company&apos;s effort to engage with the local population and to complement the Msheireb Downtown Doha project&apos;s uniqueness by seeking exclusive retail concepts that are new to the region and that will further add value to the development. </li></ul></ul><ul><ul><li>To ensure the retail offerings are truly world class, shoppers will be asked to embrace the ‘Your Downtown Doha&apos; campaign by getting out their digital cameras and smart phones to ‘snap and share&apos; their favourite shops, F&amp;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. </li></ul></ul><ul><ul><li>They can then upload the pictures to Msheireb Properties&apos; 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. </li></ul></ul><ul><ul><li>APPLICATION </li></ul></ul><ul><ul><li>Your Downtown Doha </li></ul></ul><ul><ul><li>HEADLINE </li></ul></ul><ul><ul><li>Make it your Downtown Doha, share your favourite retail experience. </li></ul></ul><ul><ul><li>SUB HEADLINE </li></ul></ul><ul><ul><li>Win a trip to your favourite destination and much more. </li></ul></ul><ul><ul><li>TABS </li></ul></ul><ul><ul><li>Instructions </li></ul></ul><ul><ul><li>Prizes </li></ul></ul><ul><ul><li>Terms &amp; Conditions </li></ul></ul><ul><ul><li>Submit your entry </li></ul></ul><ul><ul><li>Gallery </li></ul></ul>
  • 4. LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS STEP 3 APP DIMENSIONS ON FACEBOOK CANVAS BACKGROUND <ul><ul><li>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. </li></ul></ul>760px 1280px 720px
  • 5. LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS STEP 4 REPLICATING THE GRID 1280px 720px 760px
  • 6. LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS STEP 5 THE DESIGNS. WE’LL SHOW YOU HOW THERE COULD BE MANY VARIATIONS OF THE SAME WIREFRAME/STRUCTURE: 1280px
  • 7. LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS OPTION 1
  • 8. LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS
  • 9. LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS OPTION 2
  • 10. LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS
  • 11. LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS OPTION 3
  • 12. LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS
  • 13. LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS OPTION 4: APPROVED BY CLIENT
  • 14. LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS
  • 15. LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS
  • 16. LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS
  • 17. LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS
  • 18. LEARN FROM THE MARKET LEADERS SERIES 1: DESIGNING FACEBOOK APPS
  • 19. Let ’ s get social: Suite 218 (Duplex) Loft Offices 2 Dubai Media City Tel: +971 4 4504245 Fax: +971 4 4504246 Twitter: @ Socialize Agency Facebook: facebook.com/ SocializeUAE Blog: www.socializeblog.com THANKYOU Click here to see the My Downtown Doha app live! We look forward to your comments, questions &amp; suggestions. Drop us a line on our Facebook page and our designer will answer you within 24 hours!

×