19 ÎØæÉ áÊÕãíã ãæÞÚ æíÈ ãËÇáí

åÐå ÇáãÈÇÏÆ æÇáÎØæÇÊ áÇ ÊÛØí ÝÞØ ÌæÇäÈ ÇáÊÕãíã ßÕÝÍÉ ÇáåÈæØ (landing page) æáßäåÇ ÊÔãá ÃíÖÇ ÞÖÇíÇ ÓíÑ ÇáÚãá ÇáÚÇã. ÝÞã ÈÇÊÈÇÚ åÐå ÇáãÈÇÏÆ æÓÊÞæã ÈÅäÔÇÁ ÊÕãíãÇÊ ãæÇÞÚ æíÈ ÇÍÊÑÇÝíÉ. 1. ÖÚ ÃÝßÇÑß Úáì ÇáæÑÞ ÃæáÇ
ÛÇáÈÇ ãÇ íÞæã ÇáãÕããíä ÈÇáÐåÇÈ ááÝæÊæÔæÈ ãÈÇÔÑÉ ÞÈá ÇáÊÝßíÑ Ýí ÇáãÔßáÉ ÇáÊí íÍÇæáæÇ ÍáåÇ. ÝÇáÊÕãíã íÞæã ÈÍá ãÔÇßá æåÐå ÇáãÔÇßá áÇ íãßä ÍáåÇ ÈÇÓÊÎÏÇã ÇáÙáÇá Ãæ ÇáÜ gradients æáßä ãä ÎáÇá ÊÕãíã (layout) ÌíÏ æÊÓáÓá åÑãí æÇÖÍ (clear hierarchy). ÝßÑ Ýí ÇáãÍÊæí æÇáÊÕãíã æÇáÜ functionality.

2. ÇÈÏà ÈÑÓã ÇáãÓÊæí ÇáÃÚáí ãä ÇáÅØÇÑ (framework)
áÑÓã ÇáÃÓÇÓí Sketching ÓíÓÇÚÏß Úáí Íá ãÔÇßá ÊÌÑÈÉ ÇáãÓÊÎÏã (UX) æÊäÙíã ÇáÊÕãíã.
ÇáãÓÊæí ÇáÃÚáí ãä ÇáÅØÇÑ”framework” íÍá ÌãíÚ ãÔÇßá ÇáÊÕãíã. ÇáÅØÇÑ “framework” åæ æÇÌåÉ ÇáãÓÊÎÏã (UI) ÇáãÍíØÉ ÈÇáãÍÊæí æÇáÊí ÊÓÇÚÏ Úáí ÇáÊäÞá æÊäÝíÐ ÇáÅÌÑÇÁÇÊ (perform actions). æåí ÊÊÖãä ÇáÊÕÝÍ æÇáãßæäÇÊ ãËá ÇáÔÑíØ ÇáÌÇäÈí”sidebars”.
ÇÐÇ ÇÊÈÚÊ äåÌ ÇáÊÕãíã åÐÇ Óíßæä áÏíß Ýåã æÇÖÍ áãÇ ÓíÍÊÇÌå ÇáÊÕãíã ÚäÏ ÇáÈÏà ÈÊÕãíã ÈÇÞí ÇáÕÝÍÇÊ.

3. ÇÖÇÝÉ grid áÜ PSD
ÞÈá Ãä ÊÈÏà ÈÊÕãíã Ãí ÔÆ Ýí ÇáÝæÊæÔæÈ ÝÇäÊ ÊÍÊÇÌ Åáí grid ãäÇÓÈÉ ááÈÏÃ.
ÇáÜ grid ÓÊÓÇÚÏß Ýí ÊäÙíã ÊÕãíã ÇáÃÞÓÇã ÇáãÎÊáÝÉ¡ ÝÓÊÓÇÚÏß Úáí ÅäÔÇÁ ÞæÇáÈ ãÓÊÌíÈÉ “responsive” æãÊäÇÓÞÉ ãä ÍíË ÇáÊÈÇÚÏ æßÐáß ÓÊÍá ÇáßËíÑ ãä ãÔÇßá ÇáÊÕãíã ÇáÃÎÑí.
4. ÇÎÊíÇÑ ÇáÊíÈæÛÑÇÝí
ÇÓÊßÔÇÝ ÇáÎØæØ ÇáãÎÊáÝÉ æÇáÃáæÇä åæ ÌÒÁ ãä ãÑÇÍá ÇáãÔÑæÚ. æÇäÕÍ ÈÇÓÊÎÏÇã ÎØíä Úáí ÇáÃßËÑ Ýí ãæÞÚ ÇáæíÈ ÇÚÊãÇÏÇ Úáí ØÈíÚÊå. ÚãæãÇ Þã ÈÇÎÊíÇÑ ÎØ íÓåá ÞÑÇÆÊå Ýí ÇáäÕæÕ ÇáßËíÑÉ æíßæä ãäÇÓÈ ááÚäÇæíä. æáÇ ÊÎÝ ãä ÇÓÊÎÏÇã ÇáÎØæØ ÇáßÈíÑÉ.

5. ÇÎÊÑ colour theme
ÇÓÊÎÏã ãÌãæÚÉ ãÍÏæÏÉ ãä ÇáÃáæÇä ætones áÊÌäÈ ÇáÍãá ÇáÈÕÑí ÇáÒÇÆÏ visual overload.
ÎáÇá ÚãáíÉ ÇÎÊíÇÑ ÇáÎØæØ íÌÈ Ãä ÊÈÏà Ýí ÇÓÊßÔÇÝ ÇáÃáæÇä ÇáÊí ÓÊÓÊÎÏãåÇ Ýí æÇÌåÉ ÇáãÓÊÎÏã æÇáÎáíÝÇÊ æÇáäÕæÕ.
ãä Çáãåã ÊäÓíÞ ÇáÃáæÇä Ýí æÇÌåÉ ÇáãÓÊÎÏã ÇÚÊãÇÏÇ Úáí æÙíÝÉ ÇáÚäÇÕÑ”element’s functionality” .ÝßÑ Ýí ÊÕãíãÇÊ ãæÇÞÚ ãËá (Facebook, Twitter, Quora, and Vimeo).

6. ÊÞÓíã ÇáÊÕãíã
ßá ÞÓã Ýí ÇáãæÞÚ íÍÊÇÌ Ãä íÑæí ÞÕÉ. Ýåæ íÍÊÇÌ Åáí ÓÈÈ æäÊíÌÉ äåÇÆíÉ ááãÓÊÎÏã. ÇáÊÕãíã íÍÊÇÌ áãÓÇÚÏÉ ÇáãÍÊæí Ýí ÅÈÑÇÒ Ãåã ÇáÃÌÒÇÁ. Ýí ÇáæÇÞÚ áÇ íäÈÛí Ãä íæÌÏ ÚÏÏ ßÈíÑ ãä ÇáÏÚæÇÊ CTA Ýí ÇáÕÝÍÉ áÐáß ßá ÔÆ Ýí ÇáÕÝÍÉ íÌÈ Ãä íÞæÏ Ýí ÇáäåÇíÉ Åáí “ãÇÐÇ íãßääí Ãä ÃÝÚá åäÇ”.
ÝßÑ Ýí ÃÈÓØ ÊÕãíã íãßäß ÊÎíáå áåÏÝ ÈÓíØ æÇÈÏà Ýí ÅÖÇÝÉ ÇáãßæäÇÊ æÇáÚäÇÕÑ ÇáÖÑæÑíÉ. æÝí ÇáäåÇíÉ ÓÊÏÑß ãÏí ÕÚæÈÉ ÇÈÞÇÁ ÇáÊÕãíã ÈÓíØ.

7. ÅÚÇÏÉ ÇáÊÝßíÑ Ýí ÇáãõäÔà (established)
åá äÍÊÇÌ ÍÞÇ áÒÑ ÇáÈÍË¿ Ýí ãÚÙã ÇáÍÇáÇÊ ÇáÌæÇÈ íßæä áÇ
ßãÕããíä ÝäÍä äÔßá ØÑíÞÉ ÊÕÝÍ ÇáãÓÊÎÏãíä ááÇäÊÑäÊ¡ æÇáÃãÑ ãÊÑæß áäÇ áÊÍÏíÏ ÚÏÏ ÇáÎØæÇÊ ÇáÊí ÓíÃÎÐåÇ ÅÌÑÇÁ ãÚíä (ßÇáÊÓÌíá) æãÏí ßÝÇÁÉ ÇáãæÞÚ. ãä Çáãåã ÅÚÇÏÉ ÇáÊÝßíÑ Ýí ÇáÃäãÇØ ÇáÊÝÇÚáíÉ Ýí Ãí ÚäÕÑ æäÑí ßíÝ íãßääÇ ÊÍÓíäå.

8. ÊÍÏí äÝÓß
ÃõÔÌÚ ßá ÇáãÕããíä áÊÍÏí ÃäÝÓåã Ýí ßá ãÔÑæÚ. ÝÇáÇÈÊßÇÑ áÇ íÃÊí ßÔÑØ ÃÓÇÓí Ýí ÇáãÔÑæÚ ÍíË ÇáÃãÑ ãÊÑæß áß áÅÈÊßÇÑ ÔÆ ÊÝÇÚáí ÌÏíÏ. æÃãËáÉ áÊÍÏíÇÊ ãÎÊáÝÉ íãßä Ãä ÊÊÖãä ÇÓÊÎÏÇã äÙÇã ÔÈßí ÌÏíÏ (grid system) æÅäÔÇÁ ÚäÇÕÑ ÌÏíÏÉ Ãæ ÍÊí ÊÍÏíÇÊ ÈÓíØÉ ßÊÌäÈ ÇÓÊÎÏÇã áæä ãÚíä Ãæ blend modes .

9. ÇåÊã ÈÇáÊÝÇÕíá
íãßä Ãä íßæä ÇáÇåÊãÇã ÈÇáÊÝÇÕíá Úä ØÑíÞ ÊÝÇÚá ÈÓíØ¡ ÑÓæã ãÊÍÑßÉ (animation) ÛíÑ ãÊæÞÚÉ Ãæ áãÓÉ ÌãÇáíÉ ßÇáÜ gradient Ýí ÒÑ.

10. ÚÇãá ßá ÚäÕÑ “component” ßãÇ áæ ßÇä ÓíÚÑÖ Ýí ãÓÇÈÞÉ

11. ÔÍÐ “Sharpen” Úãáß
áÊÌäÈ ÇáÈßÓá ÇáÖÈÇÈí “blurry pixels”¡ ÍÇæá ÊÍÏíÏ ÇáÊÈÇíä ÇáÕÍíÍ Èíä strokes æÇáÎáÝíÉ Ãæ ÃáæÇä ÇáÎáÝíÉ.
ÈÇáÇÖÇÝÉ Åáí ÇÚÊÈÇÑ ÇáÌÇäÈ ÇáÌãÇáí íæÌÏ ÈÚÖ ÇáÃÔíÇÁ ÇáÔÇÆÚÉ ÇáÊí íÌÈ ÊÌäÈåÇ áÅäÔÇÁ ÊÕãíã ããíÒ æäÙíÝ. íÌÈ Çä ÊÈÍË Úä ÈÚÖ ÇáÃÔíÇÁ ÚäÏ ãÍÇæáÉ ÔÍÐ “sharpen” Úãáß ßÇáÍæÇÝ ÇáÈÇåÊÉ æÊÈÇíä ÇáÊÏÑÌÇÊ.
æåÐå ÝÞØ ÈÚÖ ÇáÃãËáÉ áãÔÇßá ááÈÍË ÚäåÇ æáßä Ýí ÇáæÇÞÚ íæÌÏ ÞÇÆãÉ áÇÊäÊåí. ÏÇÆãÇ ÇäÙÑ áÊÕãíãß ßßá áãÚÑÝÉ ÇÐÇ ßÇä ßá ÔíÆ íÚãá ÌíÏÇ æãä Ëã Þã ÈÊÍáíá ßá ÚäÕÑ Úáí ÍÏå ÈÚäÇíÉ ÃßÈÑ.

12. ÊÑÊíÈ æÊäÙíã ÇáÜ PSD
ÊäÙíã æÊÑÊíÈ ÇáÜ psd ÃÍÏ Ãåã ÇáÃÔíÇÁ Ýí ÇáÊÕãíã ÈÇáÝæÊæÔæÈ. ÈÇáÑÛã ãä ÍÌã ÇáãÔÑæÚ æÚÏÏ ÇáãÕããíä ÇáÚÇãáíä Úáíå íÌÈ Ãä ÊÍÇÝÙ Úáí ãáÝÇÊß äÙíÝÉ æãäÙãÉ. æåÐÇ ÓíÓÇÚÏ Ýí ÊÓÑíÚ ÚãáíÉ ÇáÊÕãíã æÇáÚãá ãÚ ÇáãáÝÇÊ ÇáãÔÊÑßÉ ãÚ ÇáãÕããíä ÇáÂÎÑíä.

13. ÊÕãíã ÃÝÖá ÓíäÇÑíæ æÇáÇÓÊÚÏÇÏ ááÃÓæÃ
ßÑ Ýí ßíÝ ÓíÈÏæ ÊÕãíãß æßíÝ æÓíÚãá Úáí ÇáÃÌåÒÉ æÇáÔÇÔÇÊ ÇáãÎÊáÝÉ.
ßãÕããíä ãåãÊäÇ åí Íá ÇáãÔÇßá ÚÈÑ ÇáãÚæÞÇÊ ÇáãÎÊáÝÉ. Ýí ÊÕãíã ãæÇÞÚ ÇáæíÈ¡ ÊÊÑÇæÍ ÇáÞíæÏ ãä ÇáÞÖÇíÇ ÇáÊÞäíÉ æÇáãÝÇåíãíÉ “conceptual” Åáí ãÔÇßá ãÑÊÈØÉ ÈÇáãÍÊæí.
äÍÊÇÌ áÅäÔÇÁ ãæÞÚ áÇ íÚãá ÝÞØ Ýí ÇáÓíäÇÑíæ ÇáãËÇáí æáßä ÃíÖÇ Ýí ÃÓæÇ ÓíäÇÑíæ. Úáí ÓÈíá ÇáãËÇá íãßä Ãä íÓÊÎÏã ÇáãÓÊÎÏã ÔÇÔÉ ÕÛíÑÉ ÌÏÇ æíÊÍÞÞ ãä ÇáãæÞÚ ÚäÏ æÌæÏ ãÍÊæí Þáíá ÝíÈÏæ ÇáãæÞÚ æßÃäå ãÚØá.
æãÚ Ðáß áÊÞÏíã Úãá ÌíÏ íÌÈ ÅäÔÇÁ ÃÝÖá ÓíäÇÑíæ áå. áÐáß ÓäÞæã ÈäÚÑÖ ßãíÉ ãËÇáíÉ ááäÕ æäÝÊÍ ÇáãæÞÚ ãä ãÊÕÝÍ ÍÌãå ãËÇáí æåÐÇ íÌÈ Ãä íßæä ÇáÓíäÇÑíæ ÇáÔÇÆÚ áãÚÙã ÇáãÓÊÎÏãíä.


14. ÊÌäÈ ÇÖÇÚÉ ÇáßËíÑ ãä ÇáæÞÊ Úáí ÝßÑÉ “concept” ÞÈá ãÔÇÑßÊåÇ ãÚ ÇáÚãíá
ÚäÏ ÇÞÊÑÇÍ ãÝåæã æÝßÑÉ Ãæ ÊÕãíã “ÇáÔßá æÇáãÙåÑ”¡ ÝÇäÊ ÈÍÇÌÉ ááÊÃßÏ ãä Ãäß æÇáÚãíá ãÊÝÇåãíä. ÝÈãÌÑÏ Ãä íæÇÝÞ Úáí ÇáãÝåæã ÇáÃðæáí íãßäß ÇáÇÓÊÑÎÇÁ æÈÏà ÇáÚãá.
æáßä ÇÐÇ áã íÍÈ ÇáÚãíá Ãæá ãÝåæã “concept”¡ íÌÈ Ãä ÊÌãÚ ãáÇÍÙÇÊ ßÇÝíÉ ãäå áÅäÔÇÁ ãÝåæã ËÇäí ÌÏíÏ ãäÇÓÈ”concept”.

15. ßä ÃÝÖá ÕÏíÞ ááãØæÑíä “developer’s”
ÇáãØæÑíä ÃÔÎÇÕ ãÈÏÚíä æíÍÈæÇ Úãáåã ãËáß. æáßäåã áÇ íÔÊÑßæÇ Ýí ÇáãÔÑæÚ ãä ÈÏÇíÊå æßËíÑÇ ãÇ íÊÏÎáæÇ ÝÞØ ÚäÏãÇ íÊã ÇÎÊíÇÑ ÇáãÝåæã “concept” æíÊã ÊÌÇæÒ ÏæÑåã ÇáÅÈÏÇÚí. ÝåÐÇ ÝßÑÉ ÎÇØÆÉ ÊãÇãÇ æÃÍíÇäÇ ÃÝÖá ÇáÃÝßÇÑ ÊÃÊí ãä ÝÑíÞ ÇáãØæÑíä¡ áÐáß ÊÃßÏ ãä ÇÔÑÇßåã Ýí ÇáãÔÑæÚ ãä ÈÏÇíÊå. ÝãÔÇÑßÉ ÃÝßÇÑß “concepts” æÍãÇÓß ãÚåã ÓÊÄÏí Åáí ÃÝÖá ÇáÃÝßÇÑ æÊäÝíÐ ÃÝÖá Ýí ÇáäåÇíÉ.

16. ÇáÚÑæÖ ÇáÊÞÏíãíÉ: ÇÔÑÍ áí ßÃäí ØÝá ÚäÏå 4 ÓäæÇÊ
ãä Çáãåã ÅäÔÇÁ Úãá ÚÙíã æÊÞÏíãå. Ýíãßä ÊÌÇåá ÃÝÖá ÊÕãíã áß æäÓíÇäå ÅÐÇ áã ÊÞÏãå ÈÔßá ÕÍíÍ. ÝßÑ Ýí Çä ãÇ íÈÏæ æÇÖÍ ÊãÇãÇ áß ÞÏ áÇ íßæä æÇÖÍ áÔÎÕ ãÇ íÑí ÊÕãíãß áÃæá ãÑÉ.

17. ÃÍÈ ßá ÃÝßÇÑß æáßä áÇ ÊÊÚáÞ ÌÏÇ Èåã
ßãÕãã ÝÇäÊ ÊÍÊÇÌ ÈÃä ÊÄãä ÈãÇ ÊÝÚáå¡ æáßä ÃíÖÇ íÌÈ Ãä Êßæä ãäÝÊÍ áÊÞæã ÈÊÛííÑ ÝßÑÉ ÈÓÑÚÉ æÇÈÊßÇÑ ÝßÑÉ ÌÏíÏÉ. æáÇ ÊäÓí Ãäå íæÌÏ Íáæá ßËíÑÉ ÑÇÆÚÉ.

18. ÊÇÈÚ ÊÕãíãß ÎáÇá ÚãáíÉ ÇáÊØæíÑ
ÇÐÇ ßäÊ ÊÚãá Ýí æßÇáÉ ÞÏ ÊÌÏ äÝÓß ÊÚÇäí Ýí ÊÕãíã ãÔÑæÚ ÌÏíÏ ÈÚÏ ÇáÇäÊåÇÁ ãä ãÔÑæÚ ÓÇÈÞ ÞÏ ÃäåíÊå. ÝÚáí ÚßÓ ÇáÇÚÊÞÇÏ ÇáÚÇã¡ Úãáß Ýí ÇáãÔÑæÚ áÇ íäÊåí ÈãÌÑÏ ÊÓáíã ÇáÜ PSD .
ÇÐÇ ßäÊ ÊåÊã ÍÞÇ ÈÊÕãíãÇÊß æÊäÝíÐåÇ ÈÔßá ÌíÏ¡ ÝÞã ÈãÑÇÌÚÉ ÇáãØæÑíä ãä æÞÊ áÂÎÑ æãÓÇÚÏÊåã ÈÞÏÑ ÇáÅãßÇä ááÊÃßÏ ãä Ãä ßá ÔíÆ ãËÇáí.

19. ÇÚÑÖ ãÑÇÍá Úãáß
ßÌÒÁ ãä ãÌÊãÚ ÇáãÕããíä¡ ÝäÍä ÌãíÚÇ äÍä Ãä äÑí ãÑÇÍá ÇáÊÞÏã Ýí ÇáÚãá æáíÓ ÝÞØ ÇáäÊíÌÉ ÇáäåÇÆíÉ. ÝÈãÌÑÏ ÇáÇäÊåÇÁ ãä ÇáãÔÑæÚ æÊÍÕá Úáí ãæÇÝÞÉ ÇáÚãíá ÝÞã ÈÊÚÒíÒå æÇä Ããßä Þã ÈÅäÔÇÁ ÏÑÇÓÉ ÍÇáÉ”case study” ááÊÞÏã Ýí ÇáÚãá. ÓÊÓÇåã Ýí ÇáãÌÊãÚ æÓÊÍÕá Úáí ãáÇÍÙÇÊ æÊÚáíÞÇÊ ÞíãÉ Ýí ÇáãÞÇÈá.