صفحات وب از کدهای اچتـمل (HTML) تشکیل شده است و می توان این کدها را با هر ویرایشگر متن ساده ای مانند notepad نیز نوشت. اما ویرایشگرهای قوی تری برای ایجاد سهولت در کار طراحی وب ایجاد شده اند که علاوه بر سرعت در کدنویسی، باعث بالارفتن دقت در نوشتن کدها نیز میشوند و گاهی ایرادات شما را نیز در کدنویسی میگیرند. برخی از ادیتورها فقط امکان کدنویسی را برای شما فراهم میکنند، اما برخی دیگر به شما این امکان را میدهند که بصورت ویژوال به طراحی صفحات خود بپردازید و المان ها را بصورت drag-n-drop روی صفحه بکشید و صفحه وب خود را تکمیل کنید. البته بر کسی پوشیده نیست که طراحی وب پیشرفته، نیازمند کدنویسی دستی است و به همین دلیل ادیتورهای متنی براحتی با ادیتورهای ویژوال رقابت میکنند!

تعدادی از بهترین ادیتورهای رایگان HTML/CSS :

(در این بخش، نرم افزارهای غیر رایگان مانند دریم ویور را کنار میگذاریم. همچنین یکی از پیش شرط های ما این است که یک HTML Editor باید امکان intellisence برای کدهای اچتمل داشته باشد.)

1- ویرایشگر ویژوال ExpressionWeb : نرم افزار اکسپرژن‌وب محصول مایکروسافت در اکثر رتبه بندیها قدرتمندترین رقیب دریم ویور بوده است و تا پیش از این پولی بود و با قیمت 150 دلار فروخته میشد، اما از سال 2013 مایکروسافت این نرم افزار را بصورت رایگان ارائه میکند و به همین دلیل می توان آنرا بهترین نرم افزار طراحی وب ویژوال رایگان نامید. اما خبر بد اینکه : این آخرین نسخه از این نرم افزار است. زیرا مایکروسافت میخواهد محیطهای طراحی و برنامه نویسی خود را یکپارچه بر روی Visual Studio ارائه کند و دیگر شاهد نسخه بعدی اکسپرژن وب نخواهیم بود.

2 - ویرایشگر ویژوال Visual Studio Express : نسخه رایگان ویژوال استودیو مایکروسافت، امکان ویرایش صفحات html، css، JS  و asp.net را برای شما فراهم میکند .(لینک دانلود) پس از دانلود، باید برای دریافت کد فعالسازی رایگان، در سایت مایکروسافت ثبت نام کنید.

3 - ویرایشگر ویژوال Kompozer : یک نرم افزار ویژوال خوب و رایگان برای طراحی صفحات وب با امکان مدیریت CSS ها و تعریف webSite برای مدیریت بهتر صفحات پروژه جاری است و توسط بنیاد موزیلا پشتیبانی میشود.

4 - ویرایشگر ویژوال Blue Griffon : یکی برنامه رایگان برای طراحی صفحات وب است که از روی پروژه kompozer ایجاد شده است. محیط ویژوال و قابل درکی دارد. این برنامه نیز توسط بنیاد موزیلا پشتیبانی میشود. این ادیتور امکان تغییر رنگ ادیتور را نیز دارد. (صفحه را در حالت source view بگذارید. حالا وارد منوی view شوید. گزینه source view و سپس theme)

5 - ویرایشگر متنی Aptana : یکی از بهترین ادیتورهای متنی برای اچتمل ، سی اس اس و جاوا اسکریپت است و بخوبی از اشیاء و خواص جاوا اسکریپت پشتیبانی می کند. 

6 - محیط مجتمع WebMatrix : وب ماتریکس بهترین IDE برای طراحی قالب برای CMS های اوپن سورس است که توسط مایکروسافت ارائه شده است. اگر برای هریک از سیستم های مدیریت محتوا مانند جوملا، وردپرس، دات نت نوک و ... قالب طراحی میکنید، این پکیج مایکروسافت برای شروع کار عالی است. این نرم افزار، یک سرور آپاچی و دیتابیس mySql هم برای شما نصب میکنه و درضمن CMS مورد نظر شما (مثلا وردپرس) را در یک کلیک براتون نصب میکنه تا یک سرور php برای تست قالبهای خود داشته باشید. 

7 - ویرایشگر متنی Komodo Edit : این نرم افزار رایگان، بهترین نرم افزار ویرایش فایلهای XML است. زبان html و CSS را هم پشتیبانی میکند و درضمن می توانید پشتیبانی از زبان های برنامه نویسی دیگر را هم بصورت پلاگین به این نرم افزار اضافه کنید. (این برنامه یک نسخه پولی هم بنام Komodo IDE دارد). همچنین برای تغییر تم رنگی ادیتور برنامه، از منوی edit وارد گزینه prefrences شوید و برگه fonts and colors را باز کنید، منوی پایین افتادنی وسط صفحه را بازکنید تا سایر پلت های رنگی ادیتور را ببینید.

8 - ویرایشگر متنی CodeLobster : ویرایشگری قدرتمند در کار با کدهای HTML و CSS است و در هنگام استفاده از کدهای CSS حتی به شما نشون میده که هر دستور در چه مرورگرهایی قابل استفاده است.

9 - ویرایشگر متنی Eclipse classic : یکی از معروف ترین ویرایشگرهای متنی برای طراحان وب و برنامه نویسان جاوا است. این IDE امکان پشتیبانی از زبان های دیگر را هم دارد و کافیست پلاگین زبان یا خروجی خود را دانلود کنید و به قابلیت های آن بیفزایید. مثلا می توانید پلاگین ADT را به این نرم افزار اضافه کنید تا بتوانید برای اندروید برنامه بنویسید.

10 - ویرایشگر متنی Coffeecup HTML Editor : یک ادیتور کدهای اچتمل رایگان، با پشتیبانی از HTML و CSS ، یک نسخه پولی هم دارد که امکانات بیشتری را در اختیار شما قرار میدهد، اما نسخه رایگان آن برای یک طراح وب کافی است.

11 - ویرایشگر متنی Bracktes : این ویرایشگر اوپن سورس، به تازگی و با حمایت شرکت ادوبی وارد بازار ادیتورها شده است. ویرایشگر ساده و خوبی است. بخصوص اینکه خود این مرورگر با HTML ساخته شده است و شما نیز می توانید در ساخت آن مشارکت کنید. (توضیحات ویرایشگر براکتس را در سایت نردبان بخوانید)

دوباره آن زمان از سال فرا رسیده که ما در گوی بلورینمان نگاه می کنیم تا  ببینیم گرایش های داغ طراحی وب در سال آتی چه خواهند بود. بر کسی پوشیده نیست که گرایش ها می آیند و می روند، برخی بیشتر از آنچه باید می مانند. اما گرایش ها در توسعه و رشد پیشه ما الزامی هستند. گرایش ها متولد می شوند، ارتقا می یابند، و اغلب دیگر گرایش ها را ایجاد می کنند.  به عنوان یک طراح وب،  هنگامی که شما گرایش ها را در پروژه هایتان به کار می گیرید، خود را به چالش می کشید تا آنها را گسترش دهید و از آنِ خود کنید.

هنگام خواندن این مقاله به خاطر بسپارید که تغییر در گرایش ها از سالی به سال دیگر شاید ظریف باشد و شاید شما برخی از این گرایش ها را تا کنون  شناسایی کرده باشید. اما انتظار ما این است که مفاهیمی که در ادامه مطرح می کنیم، در سال 2012 حتی بزرگتر نیز شوند.

1 -  طراحی کنش گرا (Responsive)

من معتقدم که ما نهایتا به صحبت کردن در مورد طراحی وب کنش گرا  پایان خواهیم داد -  نه به این دلیل که این طراحی از بین می رود، بلکه به این دلیل که این طراحی به آنچه از او انتظار می رود خواهد رسید. بهر حال فکر نمی کنم که این اتفاق در سال 2012 بیافتد. به عنوان مفهوم هنوز بسیار جدید است و بسیاری از طراحان وب با آن آشنا نیستند.

ادامه معرفی و استعمال هر چه بیشتر دستگاه های موبایل چیزی است که سال 2012 را سال وب سایت کنش گرا خواهد کرد. طراحان و توسعه دهندگان وب به سوی استفاده از طرح های سیال حرکت خواهند کرد و به جای عرض ثابت و نیاز های رسانه ای به سوی طرح هایی سوق داده خواهند شد که به سایتها این امکان را می دهد تا در دستگاهها و صفحات با اندازه های مختلف دیده شوند.

2 – نوار ناوبری ثابت

همه ما در مواقعی سری به این تکنیک زده ایم، اغلب در وب سایت های شخصی یا وبلاگهای فردی. من شاهد افول زیاد این گرایش در 2010-2011 بودم ، اما تجدید حیات این گرایش در ماههای اخیر مشاهده می شود.

اگر وب سایت شما ناوبری عمده زیادی ندارد، باید تعدادی لینک کوچک ایجاد کنید. اما چرا آنها را همواره در دید کاربران قرار ندهیم؟ این کار عملکرد وب سایت را به صورت چشمگیری ارتقا می دهد و حتی به راحتی با طرح کلی صفحه یکدست می شود. ایده به این صورت است که نوار ناوبری و لینک های داخلی/ لوگو را به صورت قفل شده و ثابت قرار می دهید در حالی که بازدید کنندگان می توانند در محتوای صفحه حرکت کنند.

Jquery در مدل سازی این اثر بسیار سریع عمل کرده است و حتی بدون جاوااسکرسپت شما را قادر می سازد تا برخی کد های CCS را بکار گیرید تا جلوه ناوبری چسبنده را ایجاد نمایید. اغلب نوار ناوبری های  ایستا در سال 2011،  حرکت کاربر را صفحه به صفحه دنبال می کردند. با این حال در نمونه زیرSimon Wuyts نوار ثابت ناوبری را به مرحله ای جدید رسانده است.

شما هرگز به این فکر نمی کنید که برای سهولت نمایش، محتوای صفحه خود را در پنلی که شبیه نمایش اسلاید است، قرار دهید. این کار نه تنها نگرانی از رزولوشن صفحه را از بین می برد، بلکه سیستم ناوبری به سهولت به مرورگرهای موبایل انتقال می یابد و کار می کند. امیدوارم این تکنیک و همه مزیت هایش را در طراحی مجدد سایت خود در سال 2012 جدی بگیرید.

3 – حلقه ها

این گرایش در چند سال اخیر رو به زوال قرار داشته است و زمان بسیار اندکی است که در طراحی وب عملا مورد توجه قرار گرفته است. در دوره شکوفایی وب 2، طراحان بیشتر بر روی گرایش های دسکتاپ- محور مانند سایه برجسته (drop shadow) و گوشه های گرد تمرکز داشتند. اما حالا با CSS3 ایجاد این جلوه های کادر فانتزی کار ساده ای است.

بعلاوه شما می توانید حلقه ها و شکل ها را بدون نیاز به هیچ تصویری طراحی کنید. این ویژگی ها موجب شده تا طراحان به عکس ها از دید دیگری نگاه کنند. من دائما گزیده کارهای طراحان وب را بررسی می کنم و متوجه افزایش چشمگیر عناصر مدور شده ام. این الگوها می توانند به عنوان لینک های ناوبری، آیکن های پاورقی(footer)، یا حتی نمایش نمونه کارها استفاده شوند، مانند کار زیر:

اما همیشه شدید ترین نمونه ها بهترین نمونه های نیستند. شکلهای گرد صیقلی هستند و تماس چشمی بازدیدکنندگان شما را تهییج می کنند. از اینها برای برجسته ساختن منطقه های ویژه در طراحی خود مانند فهرست نویسی از منابع و صفحات مفید استفاده کنید. خود شکل به اندازه کافی خوشایند است تا در پس زمینه قرار گیرد و همچنان اثر  گیرایی داشته باشد.

4 – تصویر برداری بزرگ (Big Vector Art)

شخصیت های کارتونی (Goofy mascots) بزرگ اندازه ای که شما می توانید در سراسر وب ببینید، کم کم دارای برند می شوند. چند سال پیش شما نمی توانستید کارهای تصویری زیادی را پیدا کنید که در برندینگ وب ترکیب شده باشد. اما کیفیت استعداد طراحان وب به شدت ارتقا پیدا کرده. و من برای برند بازاریابی، ایده ای بهتر از یک موجود وکتور (تصویر بٌرداری vector-based) دوست داشتنی سراغ ندارم.

قیافه های بسیاری که به کمک موزیلا و فایرفاکس آمدند فقط نوک این کوه یخ را نشان می دهند.  MailChimp یک نمونه خوب دیگر است. میمون پستچی بدنام علاوه بر سرتاسر وب  در نرم افزارهای اندروید و iOS نیز شناخته شده است.

همچنین بیزنسمن کوچک  Freelance Switch واقعا در ذهن من ماندگار شده. تعداد زیادی شخصیت بٌرداری منحصربفرد در طراحیشان وجود دارد. این نوع کار در قلمرو جدیدی از زیبایی شناسی وب سایت پذیرفته شده است. و اگر سال 2011 چیزی برای ارایه داشته این است که سال 2012 مملو خواهد بود از این لوگو های بٌرداری دوست داشتنی!

 5 – منوهای چند ستونی

برخلاف نمونه قبلی ما، مواقعی وجود دارد که یک وب سایت باید تعداد زیادی لینک را مدیریت کند. قاعدتا نوع استاندارد ناوبری خیلی شلوغ و نامرتب خواهد شد مگر اینکه لینک ها را به نوارکناری منتقل کنید. اما بررسی تجربه کاربران نشان می دهد که نگه داشتن لینک های اصلی در بالای صفحات نتایج بسیار بهتری دارد.

سال جدید به طراحان یک شانس جدید برای نوسازی می دهد. ایده ها اغلب خیلی سیاه یا سفیدند، اما قلمرو دست نخورده ای از خلاقیت منتظر گشوده شدن است. طرح های چند ستونی در نوع خود عالی هستند. شما به راحتی می توانید لینک های متعددی را نمایش داده و این قسمت را به صورت چهار گوش در اطراف لوگوی خود جا دهید.

برای اینکه با این حالت راحت باشید باید تمرین کنید. چند مقاله اخیر در این زمینه را چک کنید تا در زمینه گرایشها در ناوبری وب اطلاعات بیشتری کسب کنید. طراحان هر سال با ایده های جدید و با اشتیاق زیاد به میدان آزمایش خیز برمی دارند. واضح است که اصلاح ناوبری استاندارد سهم بسزایی در این زمینه دارد.

6 - انیمیشن jQuery/CSS3/HTML5

من همیشه کاربرد جلوه های jQuery در سطح کوچک را توصیه کرده ام. طراحی وب باید علاوه بر تجربه کاربر ، زیبایی شناسی فانتزی و انیمیشن های اضافی را نیز در برگیرد. خوشبختانه پیشرفتهای صورت گرفته در کتابخانه  jQuery و ویژگی های CSS3 ، جلوه های عالی و با خط کدهای بسیار کمتری را ممکن ساخته است.

تنها در سال گذشته در وب من به تعدادی خودآموز در این زمینه برخورد کرده ام. jQuery پیشرو جلوه های مرورگر است اما متاسفانه حمایت 100 درصد نمی شود. از این رو استفاده از روش های قبلی به همراه  CCS به این معنی است که وب سایت شما تقریبا با همه بازدیدکنندگان سازگار است و تجربه استثنایی را نیز فراهم می سازد.

7 – روبان ها و  بنر

این طراحی توجه مرا در سال 2011 خیلی بیشتر جلب کرده بود. طراحان شروع کردند به نوشتن خودآموزهای ساده برای ایجاد روبان ها، بنرها، بوکمارک ها و دیگر انواع علائم نمایشی. ظهور گسترده اطلاعات رایگان نیز موجب شده ، طراحان  بیشتری به استفاده از گرایشها روی آورند.

شگفت زده خواهید شد اگر بدانید که چه تعداد زیادی از وب سایتها از این شیوه تنها در 6 ماه اخیر استفاده کرده اند. اغلب برای آزمایش نسخه بتا از این روبان ها استفاده می کنند تا نسخه منتشر شده کنونی نرم افزار  را دسته بندی کنند. بعلاوه شما می توانید روبان ها را دور دانلود های رایگان یا مقاله های ویژه در بلاگ ها ببینید. من تعدادی از روبان های دانلود PSD مورد علاقه ام را در ادامه آورده ام. آنها را چک کنید و چشمهایتان را برای دانلود های رایگان باز نگه دارید.

• Corner Ribbon
• Dark Slider with Featured Ribbon
• Colorful Ribbons
• Green Corner Ribbon Templates
• Simple Product Box

8 – فونت های سفارشی

کتابخانه آنلاین و رایگان فونت Typekit  نسخه آزمایشی رایگانی را برای طراحان علاقه مند ارایه می کند. این ابزار با کمی جاوااسکریپت به شما اجازه می دهد تا هر فونت سفارشی را در قالب های CSS بنویسید. در سال 2011 این گرایش رواج یافت ، مخصوصا بین طراحان ورد پرس که تلاش داشتند بلاگ هایشان از بقیه متمایز باشد.

Typekit اما سیستمی باگدار بود و تا چند سال پیش پشتیبانی اندکی داشت. اکنون فونت های وب گوگل به آنها کمک کرده و به نظر می رسد که بیش از همیشه پرطرفدار شده اند! کافی است شما سراغ یک کتابخانه فونت های پشتیبانی شده بروید و گوگل کدی را که شما نیاز دارید تحویل می دهد. سپس هنگام دادن جزئیات خانواده فونت CCS در html شما به سادگی هر فونت را با نام ارجاع می دهید.

اینکه این گرایش به تازگی بسیار پرطرفدار شده برای من جالب است. به نظر می رسد که الان حتی طراحان، پلاگین های رایگان ایجاد می کنند تا فونت های سفارشی راحت تر نصب شوند. نیاز به آپلود فونت های مورد نیاز نیست، هیچ استرسی در کار نیست و احتمال اشتباه بسیار کم است. بلاگر ها باید به این گرایش توجه کنند و به فونت های موجود را نگاهی بیندازند.

9 – داده نماها( infographics)

این گرایش مطمئنا بر طراحی وب به صورت کل تاثیر نمی گذارد، اما برای تجربه کاربر و ارایه محتوا،داده نما ها بسیار مفیدند..تا کنون اطلاعات در چنین روش ساده ای ارایه نشده بود. حتی اگر شما از موضوع درک چندانی نداشته باشید، اغلب اینفوگراف ها اطلاعات، جداول و تصاویر کمکی را به صورتی فراهم می کنند که یک کودک 5 ساله هم بتواند موضوع را دنبال کند.

بسته به نوع وب سایت شما ، شاید این گرایش چندان مفید نباشد. یک کار خوب نیازمند تلاش و وقت زیاد بر روی فوتوشاپ است. با این حال اگر شما استعدادش را دارید یا می توانید خود آموزش ببینید، من توصیه می کنم که این کار را انجام دهید. الان بیش از هر زمان دیگری اینترنت به مکانی تبدیل شده که همه دور هم جمع می شوند و اطلاعات به اشتراک می گذارند. اینفوگراف ها با استفاده از رسانه وب این فرایند را سرعت بخشیده اند.

10 – تمرکز بر سادگی

نهایتا هدف هر وبسایتی داشتن بازدیدکنندگان در سریعترین زمان ممکن است. طراحی های حسی و ساده راهی به سوی آینده هستند. طی 5 سال گذشته اغلب گرایش های رایج طراحی از مینیمالیسم ناشی شده اند. این نظر بی اساس نیست، از آنجایی که تعداد عناصر کمتر صفحه مانع از سردرگمی بازدیدکننده و در واقع تمرکز بیشتر بر هدف آنها می شود.

می توان نمونه های بسیاری از این دست ارایه کرد، و زمینه های بسیاری را نیز دربرمی گیرد. اوایل ماه می ما گالری وب سایت های مینیمالیست را پوشش دادیم که نمونه های عالی را معرفی می کند. بسته به نوع وب سایت، شما شاید حتی نیازمند قطعات طراحی بسیاری باشید تا یک اثر هارمونیک ساده  بیارایید.

اما چیدن یک صفحه تمیز و مرتب نیازمند مینیمالیسم در قلب خود نیست. مدتی برای نوشتن ایده های خود برای ناوبری، سلسله مراتب صفحات، سرصفحه ها، ناحیه محتوا و غیره وقت بگذارید. من متوجه شده ام که کمی برنامه ریزی قبلی بسیار به حرکت در ساده سازی همه چیز کمک می کند.

نتیجه

اینها تنها تعداد کمی از گرایش های طراحی در سال 2012 هستند. آینده غیر قابل پیشبینی است و هیچ کس نمی تواند با اطمینان بگوید که چه چیزی در انتظار است. فکر می کنم این واقعیت مشهود است که طراحان سایت در سالهای اخیر بسیار سریع تر از گذشته در حال یادگیری بوده اند. از این رو ما می توانیم انتظار نوآوری های بسیار و معناشناسی های جدید داشته باشیم که ما را در عصر طلایی تکنولوژی و اگاهی گسترده اینترنت راهنمایی کنند.

ترجمه توسط : حسین رئیسی از شرکت طراحی وب رهنمون

با گسترش تعداد کاربران اینترنت و درنتیجه افزایش تعداد کاربران وب سایتها، بسیاری از سایتها تصمیم به راه اندازی شبکه های اجتماعی مجزا برای ارتباط با کاربران خود می‌گیرند. گرچه 5 سال پیش راه اندازی سایتی مانند اورکات نیاز به برنامه نویسی و هزینه های ابتدایی گزافی داشت، اما امروزه CMS های رایگان بیشماری هستند که در عرض چند ساعت، یک شبکه اجتماعی شخصی برای شما ایجاد میکنند. در این مقاله با محبوب ترین CMS های ساخت شبکه اجتماعی آشنا میشوید: 

1 - BuddyPress: این نرم افزار از شرکت محبوب وردپرس ارائه شده است. این نرم افزار کاملا رایگان است و امکانات استاندارد و خوبی دارد و شما می توانید با استفاده از پلاگین هایی که برای این نرم افزار نوشته شده، قابلیت های آنرا اضافه کنید. 

2 - Pligg : پلیگ یک CMS برای انتشار محتوا با بینهایت کاربر است. اگر شما به فکر ایجاد یک community از نویسندگان هستید که در تولید  محتوا در سایت سهیم باشند ، پلیگ می تواند انتخاب خوبی باشد. 

3 - elgg : الگ نیز یکی دیگر از CMS های اوپن سورس برای راه اندازی هرگونه شبکه اجتماعی است. از شبکه اجتماعی کوچکی برای شاگردان یک مدرسه تا شبکه اجتماعی دانشگاه ها. این CMS بر روی LAMP (Linux, Apache, MySQL, and PHP) نصب میشود و به همین دلیل برنامه نویسان رابطه خوبی با آن دارند و پلاگین هایی نیز برای آن نوشته اند. 

4 -lovD by less : یکی دیگر از CMS های ایجاد شبکه های اجتماعی با قابلیتهای کامل.

5 - mixxt.com : شبکه اجتماعی خود را در چند دقیقه ایجاد کنید. میکست در نسخه پولی اش چیزهای بیشتری هم به شما ارائه میدهد که می توانید شبکه خود را گسترده تر کنید. 

6 - Xoops : زوپس یکی از CMS های محبوب در سایت سورس‌فورج  است و شما با آن می توانید از یک وبلاگ شخصی تا یک شبکه اجتماعی بزرگ ایجاد کنید. برای گسترش سایت خود کافیست ماژولهای community را به برنامه اضافه کنید.

7 - mahara.org : این CMS بیشتر روی ایجاد portfolio های آنلاین برای کاربران کار میکند (چیزی شبیه لینکدین) اما قابلیت های کامل شبکه های اجتماعی را نیز دارد .

8 - Dolphin: یکی از محبوبترین CMS های ایجاد شبکه اجتماعی. 

9 - anahita : آناهیتا خود را یک فریم ورک شبکه اجتماعی می داند که شما می توانید برپایه آن ، انواع شبکه های اجتماعی را ایجاد کنید. 

10 - oxwall: یک شبکه اجتماعی پویا و ساده را با این نرم افزار تجربه کنید. 

11 - community engine : یک شبکه اجتماعی که با استفاده از Ruby on rails راه اندازی شده است. 

12 - peoplepods.net : یک CMS برای ایجاد شبکه اجتماعی که پشتیبانی نسبتا خوبی نیز دارد و راحتی قابل انگولک و شخصی سازی است. 

13 - phpfox.com : اگر به دنبال ایجاد یک شبکه اجتماعی شبیه فیسبوک و مانند آن هستید ، پی اچ پی فاکس یکی از آماده ترین هاست: 

همانطور که می بینید نرم افزارهای گوناگونی برای ایجاد و مدیریت شبکه های اجتماعی وجود دارند، کافیست چندتا از آنها را روی یک شبکه لوکال نصب کنید و سپس هر کدام را که برای شبکه شما راحت تر و مفیدتر بود انتخاب کنید. گاهی مقایسه امکانات بطور یک طرفه ، شما را به مناسب ترین CMS برای کارتان نمی رساند و تست هر مجموعه می تواند گزینه بهتری باشد. 

مواردی مانند میزان پشتیبانی ، میزان استفاده از CPU و RAM سرور، سادگی و قابلیت گسترش و وجود پلاگین های متنوع می توانند پارامترهایی باشند که شما به سمت یک انتخاب مناسب پیش می برند. 

Peter Vukovic : قبل از نوشتن این مقاله، نگران بودم که چه مسیری را انتخاب کنم – صدها پست در مورد "گرایش های طراحی" در وبلاگها وجود دارد که درهر یک به تعداد زیادی نمونه پرداخته می شود. نکته عجیب اینجاست که دراغلب این مقاله ها گرایش  را با مد اشتباه می گیرند.اکنون زمان آن رسیده که بین مد ها و گرایش های واقعی تمایز قایل شویم.

 گرایش در مقابل مد: تمایز مهم

 گرایش به آرامی در طی یک دوره زمانی بلند تر رخ می دهد و به آرامی نیز ناپدید می شود (البته اگر ناپدید شود). مد چیزی است که طی زمانی کوتاه بسیار رایج می شود و بعد به سرعت ناپدید می گردد گویی که از ابتدا وجود نداشته است.  غذای ارگانیک یک گرایش است؛اما رژیم غذایی سریع( crash diet )مد است. اولی قدرت ماندن دارد اما دومی ظرف چند ماه با چیز جدیدی جایگزین می شود.

چنین اتفاقی در صنعت طراحی رخ می دهد. اگر شما توجه زیادی به زنگ ها و سوت های جدید داشته باشید، برای کاری با دوره عمر کوتاه ریسک می کنید. از طرفی دیگر درک گرایش های واقعی به شما کمک می کند به روز باشید و کاری تولید کنید که ظرف یک سال منسوخ نشود.

در ادامه برخی از این گرایش های را بررسی می کنیم:

 گرایش 1: صفحه آرایی غنی(rich typography )

 از آن روزها که طراحان به رویه های (typefaces ) موجود در کامپیوتر کاربران محدود بودند، زمان زیادی گذشته است. فونت های وب از قبیل فونت های گوگل و تایپ کیت، شما را قادر می سازد که در طراحی خود از تعداد نامحدودی فونت استفاده کنید و به طور چشمگیری جذابیت آنها را ارتقا دهید. مدتی است که طراحان از این فرصت بهره می برند، و روز به روز سایت های بیشتری با توجه زیاد به صفحه آرایی ایجاد می شودند. برخی سایت ها مانند Typographica تقریبا تماما به تایپ اتکا دارند و همچنان زیبا به نظر می رسند.در مورد صفحه بندی طراحی وب، گرایش های صفحه بندی در طراحی وب را ببینید.

کی و چگونه از آن استفاده کنیم:

• شما می توانید صفحه بندی قوی را تقریبا در هر پروژه طراحی وب استفاده کنید – داشتن مجموعه تایپ غنی برای هر سایتی مفید خواهد بود.
• مطمئن شوید که آیا یک فونت خاص رایگان است یا هزینه دارد – فونت های وب رایگان بسیاری وجود دارد، و فونت های گوگل دارای مجموعه خود است. به نظر من Type kit بهترین انتخاب است اما دارای هزینه است.
• از یک فونت برای سرتیترها و از یک فونت متفاوت برای متن استفاده کنید. این بهترین جلوه بصری را ایجاد می کند.
• به اندازه فونت متن اصلی دقت ویژه داشته باشید – در اغلب موارد متن اصلی باید کمی بزرگتر از اندازه نرمان باشد تا بهترین نتیجه حاصل شود.

گرایش 2: قالب بندی یکپارچه (solid blocking)

شرکتهای طراحی و بازاریابی شیفته این شیوه هستند. بالا: Dynamite   چپ: Lithium  پایین: Landor

مدتی از وجود این گرایش می گذرد و اصولا یک طرح مشبک آجر مانند را معرفی می کند که بلوک های یکپارچه رنگ، همراه با بلوک های دارای عکس و متن را به نمایش می گذارد. 

این شیوه به دلیل سادگی، و ارائه دید کلی منظم و سریع از محتوای سایت و با کمترین سردرگمی، برای کاربران گیرا است. کنتراست بین  بلوک های رنگ یکدست و بلوک های تصاویر و متن، موجب ایجاد علاقه بصری قوی می شود که اغلب کاربران را به کاوش بیشتر سایت ترغیب می کند.

کی و چگونه از آن استفاده کنیم:

• بلوک بندی یکپارچه روشی عالی  برای پروژه های متعدد است – از وب سایتهای شرکتها گرفته تا سایت های شخصی و حتی شبکه های اجتماعی (Pinterest or Huddle را ببینید)
• رنگ های مختلف را امتحان کنید و موقعیت بلوک ها را تغییر دهید تا شاهد نتایج بسیار متفاوتی باشید.
• چاشنی اش را زیاد کنید – از استفاده صرف نمایه عمومی و تنها اضافه کردن صلیقه شخصی خود به طراحی دوری کنید. برای مثال، می توانید از ترکیب ویژه ای از فونت ها استفاده کنید یا در برخی از بلوک ها تصاویری قرار دهید.
• بلوک بندی یکپارچه برای صفحه اصلی سایت مناسب است و کار می کند ، اما صفحات داخلی باید محتوای بیشتری داشته باشند. هنگام ایجاد صفحات داخلی برخی از بلوک ها را نزدیک یکدیگر قرار دهید تا طراحی شکلی منسجم تر داشته باشد و انتقال از صفحه اصلی بسیار متفاوت به نظر نرسد.

گرایش 3: خانگی

خود عنوان گویای همه چیز است -  این گرایش در مورد طرح های گرم، ساده و بی تکلف است، چیزی که شما انتظار دیدنش را در آشپزخانه مادربزرگ ها دارید.

بالا: Hello Bar  چپ: Shoplocket راست: Amazelabs

این ظاهر و حس با ترکیب رنگ ها و الگو های ظریف، تکه های دست نوشته،  نقاشی و صفحه بندی ساده بدست می آید. چون این گرایش از علایم بصری که ما با آرامش و استراحت پیوند داده ایم استفاده می کند، به محض ورود، سایت گرم، دوستانه و جذاب به نظر می آید.

کی و چگونه از آن استفاده کنیم:

• این سبک مناسب فعالیت های خدماتی است که نیاز دارند تا ساده،کم هزینه، و آسوده به نظر آیند.
• الگو های ظریف و دارای نقش برای این احساس و ظاهر خاص ضروری هستند، اما صفحه بندی خوب و خوانا به همین اندازه دارای اهمیت است.
• این سبک طراحی بسیار خوشایند است اما زیاده روی نکنید – به یاد داشته باشید که آنچه داخل باکس قرار دارد اهمیت دارد.

گرایش 4: نوع بزرگ اندازه (oversized type)

سرتیترهای بزرگ و بولد در طراحی گرافیک جدید نیستند، اما در صنعت طراحی وب گرایشی نسبتا جدید به شمار می روند. شرکتها و افراد بیشتر از پیش از این روش برای تحریک علاقه کاربران استفاده می کنند.

بالا: Big Omaha  یک مثال بارز از این نوع است.چپ: Basecamp در صفحه اصلی بیانیه خود را واضح اعلام می کند. راست: Zurb  با حروف بزرگ وعده ای بزرگ می دهد.

برای بهترین اثرگذاری باید حرفی گیرا و برانگیزانده داشته باشید – مطمین باشید که چه می خواهید بگویید.

کی و چگونه از آن استفاده کنیم:

• ·        هنگامی که شما یک پیشنهاد یا بیانیه ای قدرتمند داشته باشید، حروف بسیار بزرگ ایده ای عالی هستند. این روش برای تیتر هایی که چیز بااهمیتی برای گفتن ندارند کارکرد خوبی ندارد.
• ·        این روش ابزاری برای جلب توجه است – آن تنها را برای سرتیترها استفاده کنید و از تایپ معمولی برای دیگر موارد استفاده کنید.
• ·        حروف بزرگ تقریبا در تمامی انواع پروژها کاربرد دارد اما برای طرح هایی که نیاز به حس قدرتمند شخصیت دارند بسیار مناسب است.

گرایش 5: پیش زمینه عکس

یک گرایش طراحی دیگر که مدتی است مورد استفاده قرار می گیرد و اثر شگفت انگیزی در درگیر کردن  کاربر دارد -  به شرطی که عکاسی خوب بوده باشد.

بالا چپ:سایت های Creative people’s  و Alexey Abramov خیره کننده هستند. راست: Tennessee fishing

این گرایش که توسط برند های مد و عکاسان پایه گذاری شد،در حال حاضر تقریبا در تمامی صنایع با میزان بالایی از موفقیت استفاده می شود. مشتریان آن را دوست دارند چون خوب به نظر می آید – کابران آن را دوست دارند چون احساس خوبی دارد.

کی و چگونه از آن استفاده کنیم:

• رویکرد پیش زمینه عکس برای اهداف نمایشی و برند سازی فوق العاده است – هنگامی که هدف اصلی شما ارایه بصری قدرتمند است. از همین رو است که اغلب توسط برند های مد و لباس و مقاصد گردشگری مورد استفاده قرار می گیرد.
• تنها از عکس های با کیفیت و رزولوشن بالا استفاده کنید.
• تلاش کنید تا محتوا را طوری بچینید که با عکس متناسب باشد -  این کار طرح را حتی جالب تر نیز می سازد.

گرایش 6: داده نماها (اینفوگرافیک)

داده نماها مطمئنا ماندگار خواهند بود – آنها که زمانی تنها برای مقاصد آموزشی برای موضوعاتی خاص استفاده می شدند، در طی سالهای گذشته محبوبیتی بی سابقه کسب کرده اند. اگرچه آنها آنچنان طراحی وب به شمار نمی روند، اما تعداد روزافزونی از وب سایت ها از آنها به عنوان ابزار خوبی برای اضافه کردن جاذبه بصری به محتوا استفاده می کنند.

داده نما راه بسیار خوبی برای چاشنی دادن به وب سایت است. بالا: Academy چپ: Grip Limited راست: Pointless Corp

کی و چگونه از آن استفاده کنیم:

• داده نما ها بیشتر از آنچه تصور می کنید کاربرد دارند – آنها می توانند در شرح یک فرایند، مجموعه ای از اعداد یا آمار، علت و معلول و غیره استفاده شوند.
• داده نما های خوب به اطلاعات ارایه شده وضوح می بخشند – مطمئن شوید که در مورد اصول داده نما ها در وب مطالعه کنید. اینجا برای شروع مناسب است.
• اگر در حال انجام یک پروژه بسیار فنی یا خاص هستید که نیازمند مقداری خلاقیت است، این روش خوبی است.

نتیجه

گرایش های طراحی گرافیک که در بالا شرح داده شدند احتمالا برای مدت زمانی ماندگار باشند – هیچ نشانه ای وجود ندارد که افراد آنها را در مقابل چیز دیگری ترک می کنند. از طرفی ، تعدادی مد طراحی وجود دارند که به سرعت مشهور می شوند و سپس خیلی زود از بین می روند – پاپیون چرم و کوک زدن از آن دسته اند. هنگامی که شما قصد دارید طراحی وب سایت انجام دهید که قدرت ماندگاری داشته باشد به گرایش های بالا توجه کنید – صفحه آرایی غنی یا با سایز بزرگ، بلوک بندی یکدست، ظاهر خانگی، پیش زمینه عکس و داده نما ها. احتمال اینکه این گرایش های طراحی قدیمی شوند کم است و شما می توانید آنها را در هرمی از روشها ترکیب کنید تا وب سایت هایی فوق العاده داشته باشید.

وب سایت رهنمون