1 / 10

Arabic Web Design

Arabic Web Design. Cecilia Huster 25 September 2008. Overview. Page Layout: headers, HTML elements, images Alphabet and numbers Examples Tools and resources. Layout Best Practices: Mirroring. Start on the right, move to the left. For every element, at every level. Alphabet.

perrin
Télécharger la présentation

Arabic Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Arabic Web Design Cecilia Huster 25 September 2008

  2. Overview • Page Layout: headers, HTML elements, images • Alphabet and numbers • Examples • Tools and resources Cecilia Huster, Senior UX Designer

  3. Layout Best Practices: Mirroring Start on the right, move to the left. For every element, at every level. Cecilia Huster, Senior UX Designer

  4. Alphabet • Impure Abjad (consonant-only alphabet) • Some vowels symbols • 28 basic letters • No distinction between UPPER and lower case • Cursive • most letters are connected • Mixing Arabic and Latin script is very common Cecilia Huster, Senior UX Designer

  5. Numbers • Eastern Arabic • right to left • Indian origin • Western Arabic: • left to right • phone numbers, dates, prices • based on Eastern Arabic Cecilia Huster, Senior UX Designer

  6. Masthead Horizontal navigation Mirrored drop down Arabic on right English on left Cecilia Huster, Senior UX Designer

  7. Right-aligned English text Article page Western Arabic numbers for Arabic Date Cecilia Huster, Senior UX Designer

  8. Shopping Basket Basket summary Subtotals in 2 currencies Delete Quantity Price Description Continue Shopping Save order Check out button Cecilia Huster, Senior UX Designer

  9. Tools • Adobe Creative Suite Middle East Version • letter spacing and justification • ligatures, vowel signs • page, paragraph and footnote numbering • Arabic, Farsi or Hindi digits • Tasmeem • typography and calligraphy • plug-in for Adobe products Cecilia Huster, Senior UX Designer

  10. Thank you • Original slides at www.ceciliahuster.com Cecilia Huster, Senior UX Designer

More Related