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

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

۱) Amaze

یکی از جالب ترین لوگوهای سال ۲۰۱۵ مربوط به شرکت Amaze می باشد. این طرح متشکل از ۱۰۰۰۰ چندوجهی است که نسبت به حرکات و صدای کاربر واکنش نشان می- دهد. به عبارت دیگر، این لوگوی شگفت انگیز ترکیبی از فناوری و رفتار انسانی است.

۲) DKNY

DKNY که یکی از معتبرترین برندهای صنعت پوشاک است در سپتامبر سال ۲۰۱۵ لوگوی جدید خود را از طریق شبکه اجتماعی اینستاگرام رونمایی کرد. برای سال جدید، این شرکت تصمیم دارد تا طراحی برای خانم ها را جایگزین طراحی برای دختران جوان کند و این تغییر مسیر را از طریق فونت لوگوی خود نشان داده است.

۳) Google

جای هیچ تعجبی ندارد که تغییر لوگوی پر بازدید کننده ترین سایت دنیا یعنی Google به یکی از شگفت انگیزترین اخبار دنیای تکنولوژی در سال ۲۰۱۵ مبدل می شود. این شرکت بنام پس از گذشت ۱۶ سال، لوگوی جدید خود را با تغییر فونت و شارپ شدن رنگ ها معرفی کرده است.

۴) Verizon

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

۵) Facebook

در سال میلادی گذشته یکی دیگر از شرکت های پرآوازه ای که لوگوی خود را تغییر داد، Facebook بود. برای طرفداران پرو پاقرص این شبکه اجتماعی، تغییرات جزئی لوگو بسیار مشهود بود. این اولین باری بود که در تاریخ ظهور Facebook فونت لوگو تغییر داده می شد. اگرچه فرمت نوشتاری حروفی مانند “a” و “b” عوض شده است ولی همچنان حرف شاخص “f” با فرمت قبلی باقی مانده است.

 ۶) Dailymotion

سایت Dailymotion که بزرگ ترین و پربازدید کننده ترین سایت در زمینه ارسال ویدیو است در ماه مارچ ۲۰۱۵ تغییری اساسی در لوگوی خود ایجاد کرده و با نماد قدیمی خود که تنها نام شرکت را در برمی گرفت، خداحافظ کرد.

۷) Electrolux

برند Electrolux یکی از پیشتازان صنعت لوازم خانگی از سال ۱۹۰۹ است که در ژانویه سال ۲۰۱۵ دست به تغییراتی در لوگوی خود زد. در این راستا، فونت استفاده شده در لوگو بطور کاملا اختصاصی برای این شرکت طراحی شده است که این نشان دهنده منحصربفرد بودن برند مذکور می باشد.

منبع: www.creativebloq.com

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

همانطور که از لغت اینفوگرافیک پیداست این کلمه از ترکیب لغات Information به معنی اطلاعات و graphic به معنی گرافیک دست آمده است (information+ graphic). پس می توان اینگونه نتیجه گیری کرد که اینفوگرافیک یعنی گرافیک و طرحی که در برگیرنده اطلاعات می باشد. به عبارت دیگر می توان گفت اینفوگرافیک، اطلاعات پیچیده را در غالب طرحی قابل فهم ارائه می دهد.

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

دلیل محبوبیت اینفوگرافیک ها چیست؟

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

چگونه می توانید اینفوگرافیک خود را طراحی کنید؟

 برای ساخت اینفوگرافیک ابزار بسیاری هستند که می توانند در این زمینه به شما کمک کنند. از جمله سایت های رایگانی که در این زمینه مورد استفاده هستند می توان به موارد زیر اشاره کرد:

وب سایت Canva به شما این امکان را می دهد تا گرافیک هایی در اندازه های متفاوت و بطور رایگان طراحی کنید.

 Piktochart وب سایتی بسیار کارآمد با بیش از ۱۰۰ تم و ۱۰۰۰ تصویر رایگان می باشد.

Infogr.am وب سایت دیگری است که با ارائه ۳۰ تم رایگان به شما کمک می کند تا خلاقیت خود را در زمینه ساخت اینفوگرافیک اثبات کنید.

در ادامه می توانید چند مثال از اینفوگرافیک های طراحی شده را مشاهده کنید.

همانطور که از تصویر بالا معلوم است این اینفوگرافیک در ارتباط با آسیب های مغز است. این مطلب را به راحتی و در یک نگاه می توان از تصویر مغز دریافت.

در اینفوگرافیک بالا ویژگی ها و مشخصات انسان های موفق و ناموفق به نمایش گذاشته شده اند.

 تصویر بالا، اینفوگرافیک آموزنده ای در مورد ابتلای کودکان به بیماری چاقی است.

منبع: www.webpagefx.com

۱) روان شناسی طراحی لوگو

یکی از اینفوگرافیک های جالب سال ۲۰۱۵، در ارتباط با بعد روان شناسی طراحی لوگو است.

هر روزه لوگوهای متنوعی به ما معرفی می شوند ولی عوامل متعددی در تاثیرگذاری لوگو نقش دارند. این مسئله از رنگ بندی و اشکال گرفته تا اندازه ها و فواصلی که قرار داده می شوند. اینفوگرافیک بالا به بهترین نحو ممکن روان شناسی لوگوها را نشان می دهد و به عبارت دیگر، دلیل موفقیت آن ها را نیز شرح داده است (جهت دیدن اینفوگرافیک در اندازه واقعی، روی تصویر بالا کلیک نمایید).

۲) جنگ نوستالژی و پیشرفت تکنولوژی

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

۳) بازی رنگ ها در طراحی وب سایت 

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

۴) ۴۰ روش داشتن خلاقیت

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

۵) مشخصات رایج طراحان معروف

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

۶) ۱۰ اصل مهم و اساسی در طراحی لوگو

در یکی از مواردی که اینجا ذکر شد روان شناسی لوگوها را بررسی کردیم. اینفوگرافیک بالا، ۱۰ تا قانون اساسی در طراحی لوگو را به شما نشان می دهد و می تواند راهنمای مناسبی در طراحی هرچه بهتر لوگو باشد (جهت دیدن اینفوگرافیک در اندازه واقعی، روی تصویر بالا کلیک نمایید).

۷) بهترین وضعیت فیزیکی در محیط کار

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

۸) مروری بر ۳۰ سال تجربه طراحی وب سایت

در اینفوگرافیک شماره ۸ مروری به ۳۰ سال تجربه طراحی وب سایت شده است. زمانی که اولین سایت HTML در سال ۱۹۹۱ شکل گرفت تا زمان حال که طراحان خبره ای در این زمینه مشغول به فعالیت هستند. در حقیقت این طرح نشان می دهد چگونه در طی این مدت اندک علم طراحی وب سایت پیشرفت کرده و در مسیر رو به جلو حرکت کرده است (جهت دیدن اینفوگرافیک در اندازه واقعی، روی تصویر بالا کلیک نمایید).

۹) ۲۶ نکته قابل توجه پیش از توسعه یک وب سایت

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

۱۰) چگونه می‌توان یک اینفوگرافیک بی‌نظیر طراحی کرد؟

چناچه با دیدن لیست برترین اینفوگرافیک های سال ۲۰۱۵ مشتاق به طراحی اولین اینفوگرافیک خود شده اید طرحی را به شما معرفی می کنیم که بطور کامل نحوه طراحی اینفوگرافیک را به شما نشان می دهد.

منبع: www.creativebloq.com

۱) آیا سال جدید با بازگشت تایپوگرافی Serif همراه است؟

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

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

۲) تایپ دیجیتال

در دنیای امروز، تایپ دیجیتال همه جا وجود دارد؛ موبایل های هوشمند، تلویزیون، سایر وسایل و همانطور که به نظر می رسد این مبحث از اهمیت بالایی برخوردار است. در حال حاضر، یکی از طراحی های معروف در زمینه فونت San Francisco typeface است که اولین بار برای Apple Watch طراحی شد و متعاقباً برای سیستم عامل های iOS و OS El Capitan نیز بکار گرفته شده است. تغییر زمینه تایپوگرافی یکی از شناخته شده ترین و معروف ترین برندها دنیا توجه همگان را عمیقاً به خود جلب کرد. نمونه های دیگر از این قبیل که دنیای تایپوگرافی را با تحول جدیدی رو به رو ساختند، تغییر تایپوگرافی کتابخوان Amazon Kindle و لوگوی Google در سپتامبر سال ۲۰۱۵ می- باشد.

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

۳) نرم افزارهای طراحی تایپوگرافی

 طراحی تایپوگرافی تجارتی است که نیازمند مهارت ها و توانایی های ویژه ای است اما علاوه بر داشتن استعداد، بهره مندی از نرم افزارهای کارآمد می تواند کمک بزرگی در این زمینه کند. در ادامه، به معرفی ابزارهایی می پردازیم که در زمینه طراحی تایپوگرافی نقش عمده ای بازی می کنند. Prototype ،Adobe’s Project Faces و FontArk نرم افزارهایی هستند که کمک می کنند تا بتوان ساختار اصلی فونت مورد نظر خود را تغییر داده و آن را شخصی سازی کرد. با استفاده از این نرم افزارها به آسانی می توان ویژگی های مربوط به تایپوگرافی های متعدد را ترکیب کرده و فونتی را طراحی کرد که اختصاصی و منحصر بفرد می باشد.

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

منبع: www.creativebloq.com

]]> http://tarahan.com/%d8%aa%d8%a7%db%8c%d9%be%d9%88%da%af%d8%b1%d8%a7%d9%81%db%8c-%d8%af%d8%b1-%d8%b3%d8%a7%d9%84-2016/feed/ 0 http://tarahan.com/%d8%b3%d8%a7%d8%af%d9%87-%da%af%d8%b1%d8%a7%db%8c%db%8c-%d9%85%db%8c%d9%86%db%8c%d9%85%d8%a7%d9%84%db%8c%d8%b3%d9%85/ http://tarahan.com/%d8%b3%d8%a7%d8%af%d9%87-%da%af%d8%b1%d8%a7%db%8c%db%8c-%d9%85%db%8c%d9%86%db%8c%d9%85%d8%a7%d9%84%db%8c%d8%b3%d9%85/#respond Sun, 10 Jan 2016 07:34:34 +0000 http://tarahan.com/?p=5108 […]]]> در گذشته، مبحث ساده گرایی یا مینیمالیسم بسیار پرکاربرد بود و امروزه به نظر می رسد که بعنوان جایگزینی برای طراحی های شلوغ وب سایت ها، پوسترها، تبلیغات و لوگوها، دوباره به دنیای طراحی بازگشته است.

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

رنگ

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

صفحه آرایی

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

فضای سفید

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

گرافیک 

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

تایپوگرافی

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

ساده گرایی در سایت

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

ساده گرایی در رسانه ها

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

ساده گرایی در طراحی لوگو

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

منبع: justcreative.com

فونت های مربوط به خانواده قلم مو حسی برگرفته از دست نوشته ها را به طراحی داده و ظاهری جالب دارند. در این مقاله ۱۰ فونت قلم موی برگزیده را معرفی کرده و آن‌ها را به رایگان در اختیار شما قرار می دهیم.

۱‌) قلم مو Beacon

Beacon یکی از فونت های تایپوگرافی Serif است و این مزیت را دارد که می توان برخی از ویژگی های آن را تغییر داده و به نوعی آن را شخصی سازی کرد.

دانلود فونت Beacon

۲) قلم مو Ampad

فونت Ampad یکی از فونت هایی است که برای کارهای هنری ترسناک مورد استفاده قرار می گیرد و دارای ۴ سبک متفاوت می باشد که با توجه به کارآیی یکی از آن ها را می‌توانید انتخاب کنید.

دانلود فونت Ampad

۳) قلم مو True Lies

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

دانلود قلم موی True Lies

۴) قلم مو Goatskin

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

دانلود فونت Goatskin

۵) قلم مو Surfing Capital

قلم موی Surfing Capital فونتی است که به نظر می آید با آفتاب نورپردازی شده است و با لایه های مختلف سایه پردازی حسی آرامش بخش به بیننده منتقل می کند.

دانلود Surfing Capital

۶) قلم مو Levi Brush

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

دانلود فونت LeviBrush

۷) قلم موی Brush Hand New

قلم موی Brush Hand New بر پایه فونت Flash Bold طراحی شده است. در این طراحی جدید، کناره های حروف دیگر تیز نیستند و از سادگی بیشتری برخوردار هستند. درنتیجه، این فونت می تواند انتخابی ایده آل برای عناوین باشد.

دانلود فونت Brush Hand New

۸) قلم موی Paint Hand

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

دانلود فونت Paint Hand

۹) قلم موی Cylburn

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

دانلود فونت Cylburn

۱۰) قلم موی Mothproof Script

قلم موی Mothproof Script یکی از فونت های بسیار تاثیر گذار است که تا حدودی شبیه فونت سنتی blackletter طراحی شده ولی نسبت به آن خواناتر می باشد.

دانلود فونت Mothproof Script

 منبع: www.creativebloq.com

در این مقاله، ۱۰ سایت معرفی می شوند که بهترین نمونه‌ها از طراحی اسکرول پارالاکس در آن ها بکار گرفته شده است (برای مشاهده هر یک از وب سایت ها روی تصاویر کلیک کنید).

سایت .Melanie F 

سایت L’amour Fou

سایت Giampiero Bodino

سایت Madwell

سایت L’amour Fou

سایت Antone and Irene

سایت Parallaxis 

 سایت Urban Walks

سایت Life of PI

سایت Sweez

منبع: www.awwwards.com

Pixel Wrapped

استودیو طراحی Pixel Wrapped یک وکتور ساده اما جالب را بعنوان صفحه تماس با ما در نظر گرفته است. همانطور که می بینید فرم اطلاعات به صورت برگه ماشین تایپ در نظر گرفته شده است. اطلاعات تماس هم با فونت دست نویس روی یک برد آورده شده‌اند.

Ashes & Milk

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

Lionways

سایت Lionways برای صفحه تماس با ما پیش زمینه ای از چوب را انتخاب کرده و از تصویر یک کارت پستال برای فرم اطلاعات استفاده نموده است. دو نکته جالب توجه در این صفحه دیده می شود: ۱) منوی راهنمای سایت به شکل یک رسید قرار داده شده است و ۲) در طراحی کارت پستال از تصویر یک تمبر سال ۱۹۲۳ انتخاب شده است که حسی نوستالژیک را می رساند.

Digital Base

 یکی از متمایزترین صفحات تماس با ما مربوط به سایت Digital Base می باشد که با در بر داشتن تصویر یک پیغام در بطری شیشه‌ای، بهترین نماد تماس و ارسال پیام توسط کاربران می‌باشد.

Brown’s Court Bakery

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

Fat Fish

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

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

منبع: webdesignviews.com

فیلترهای CSS ابزاری قدرتمند هستند که بوسیله آن ها می توان جلوه های ویژه ای به تصاویر موجود در سایت بخشید.

استفاده از این فیلترها ساده است به شرطی که کارآیی تمامی پارامترها مشخص باشد. در مثال پایین،

اولین چیزی که به چشم می خورد، پیشوند webkit است. بعد از آن، یک پارامتر و کمیت تغییرات (داخل پرانتز) آورده شده است. در مثال ذکر شده، پارامتر Grayscale بکار گرفته شده است و میزان این تغییر تا ۵۰ درصد است. چنانچه این مقدار به ۱۰۰ درصد برسد، عکس کاملاً سیاه و سفید می شود. نتیجتاً، این کمیت شدت اعمال تغییرات را نمایش می دهد.

انواع فیلترهای CSS

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

Grayscale

این پارامتر تصویر را سیاه و سفید می کند. هرچه شدت آن بیشتر باشد یعنی کمیت آن افزایش یابد، میزان تاثیر فیلتر بیشتر می شود.

Sepia

فیلتر سبک غریی Sepia تغییراتی مشابه فیلتر Grayscale اعمال می کند.

Blur

فیلتر Blur بسیار شبیه ابزار Guassian Blur در فوتوشاپ عمل می کند و به نوعی تصویر را تار می نماید. با تعیین مقدار پیکسل این پارامتر می توان میزان وضوح تصویر را تغییر داد. همانطور که واضح است واحد کمیت این فیلتر پیکسل می باشد.

Saturation

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

Contrast

فیلتر Contrast مشابه Saturation عمل می کند. چنانچه کمیت مورد نظر شما در بازه ۰ تا ۱۰۰ درصد باشد، رنگ تصویر کدر می شود و هرچه از ۱۰۰ درصد بالاتر رود، شدت رنگ افزایش می یابد.

Brightness

این فیلتر CSS یکی دیگر از فیلترهایی است که عملکردی مشابه Contrast و Saturation دارد. بازه ۰ تا ۱۰۰ آن رنگ تصویر را کدر می کند و مقدار بیشتر از ۱۰۰ رنگ تصویر را روشن می سازد.

Hue-rotation

Hue-rotation یکی از جالب ترین فیلترهای CSS است که با توجه به درجه رنگی مورد نظر شما، رنگ های تصویر را مطابق ترتیب رنگی در چرخه رنگ ها تغییر می دهد. چرخه رنگ ها از ۰ تا ۳۶۰ درجه رنگ های متفاوتی دارد. با انتخاب یک نقطه در بازه آن، رنگ ها تغییر می کنند.

Invert

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

محدودیت فیلترهای CSS

•  یکی از محدودیت های اصلی فیلترها، پشتیبانی مرورگرها از آن هاست. همانطور که مشاهده کردید تمامی فیلترها پیشوند webkit دارند و این بدین معنی است که تنها در مرورگرهایی قابل استفاده هستند که از این ویژگی پشتیبانی می کنند (Chrome 7, Opera 20, Safari, Blackberry Browser, Firefox 34, Android Browser). 
• محدودیت بعدی به زمان بارگذاری سایت بر می گردد که با استفاده از فیلترهای CSS این زمان افزایش یافته و درنتیجه کارآیی سایت را کاهش می دهد.

 منبع: webdesignviews.com

تاکید

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

پروتوتایپ یا نمونه اولیه

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

ساده سازی

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

اندازه

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

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

  منبع: webdesignviews.com

۱. اولین قدم تنظیم سایز فایلی است که می خواهید در آن کار کنید. بهتر است برای طراحی یک اینفوگرافیک اندازه فایل را کاغذ A3 با DPI 300 درنظر بگیرید. دلیل این انتخاب قابلیت چاپ بر پوسترهای A2 می‌باشد بدون اینکه کیفیت آن کاهش یافته باشد و درعین حال فضای قابل توجهی را در حافظه سیستم ذخیره می‌نماید.

۲. گام بعدی تنظیم رنگ پس زمینه است و در اینجا از بازه رنگی خاکستری کم رنگ تا سفید استفاده شده است. برای ناحیه خاکستری کد c4c4c4 و برای قسمت سفید کد fcfcfc درنظر گرفته شده است. این اقدامات باید در کادر تنظیمات Layer Style انجام شوند که این کادر با دوبار کلیک کردن بر گزینه Layer در Layers panel فعال می‌شود. برای این طراحی در قسمت داخلی رنگ سفید انتخاب شده است.

۳. برای ترسیم دایره باید از Ellipse tool استفاده نموده و یک دایره بزرگ در مرکز فایل بکشید. بهتر است Opacity را به ۰% و Storke Size را به ۳ تغییر دهید. بدین ترتیب می‌توان رنگ پس‌زمینه را از میان دایره مشاهده کرد.

۴. در یک لایه جدید بهتر است اشکال مدنظر خود را ترسیم کنید که این کار با استفاده از Pen tool میسر است. اشکال رسم شده در تصویر نشان داده شده‌اند.

۵. در Paths tab می توانید آخرین path کشیده شده را ببینید. دستور Ctrl+right-click را بر آن اجرا کرده، Fill Path را انتخاب نموده و بعد از رنگ پیش‌زمینه استفاده نمایید. در اقدام بعدی، path را deselect کرده و به قسمت Layers tab بازگردید. برای اینکه بهتر کار کنید می‌توانید لایه دایره را  مخفی (Hide) نمایید. از گرادیانت انعکاسی۱۴۱ درجه استفاده نموده و کد رنگ‌های f9f9f9 و ededed را بکار بگیرید.

۶. در این مرحله باید یک لایه جدید دیگر بسازید ولی دقت نمایید که موقعیت آن قبل از لایه پیشین باشد درنتیجه می‌توانید جلوه ۳D را با Pen tool ایجاد نمایید. حال، مانند قبل از گزینه Fill استفاده نمایید ولی این بار گرادیانت خطی ۹۰ درجه را با کدهای رنگی a7a6a6 و ffffff بکار گیرید.

۷. باز هم لایه جدیدی ایجاد کنید و آن را بالاتر از سایر لایه‌ها قرار دهید. برای انجام بهتر ادامه مرحله بهتر است شکل دایره اصلی را مجدد ظاهر نمایید و مانند تصویر اجزای سبزی را زیر قسمت سفید ایجاد کنید. برای ایجاد رنگ می‌توانید از گرادیانت انعکاسی ۱۳۳ درجه با کد رنگ‌های ۹ad429 و ddf470 استفاده کنید.

۸. همانطور که برای قسمت سفید انجام دادید، لایه جدیدی زیر لایه سبز ایجاد نمایید، با استفاده از Pen tool سایه زیرین تصویر را شکل دهید و برای آن گرادیانت خطی ۹۰- درجه با کدهای رنگی ۸۷bc0f و ۷۹aa08 را بکار گیرید. به یاد داشته باشید که تمامی رنگ‌ها و درجات فقط بعنوان راهنما برای شما درنظر گرفته شده‌اند.

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

۱۰. حال، می‌خواهیم اشکالی را ترسیم کنیم که نشانگر صخره هستند. پس بعد از اینکه شکل موردنظر خود را رسم کردید، از گرادیانت خطی ۷۰- درجه با کدهای رنگی ۸d6b50 و d1bc98 استفاده نمایید.

۱۱. در این مرحله، می‌خواهیم عنصر آب را اضافه کنیم. با استفاده از دایره اصلی، شکلی برای قسمت آبی رنگ ترسیم نمایید. اگر برای انتخاب رنگ آبی با مشکل مواجه شدید به شما پیشنهاد می کنیم که از گرادیانت انعکاسی ۳۶- با کدهای رنگی ۳۳abbb و ۳۶e6ed استفاده کنید.

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

۱۳. در این مرحله می‌خواهیم جلوه‌هایی از قطرات آب را اضافه کنیم. این کار را براحتی می‌توان با Pen tool انجام داد. از دستور رنگی آبی مشابه بالا استفاده کنید با این تفاوت که قسمت انتهایی قطرات را تیره‌تر کنید.

۱۴. در قسمت انتهایی می‌خواهیم شکلی نمایانگر کویر را به طراحی اضافه کنیم. مراحل طراحی قبلاً ذکر شده است فقط تنها تفاوت در اینجا تغییر رنگ‌هاست که می‌توان از کدهای رنگی dbc146 و ecf774 استفاده کرد. در این مرحله، طراحی کره زمین به پایان رسید. تنها چیزی که باقی می‌ماند، قسمت نوشته‌های اینفوگرافیک است.

منبع: www.webdesignermag.co.uk

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

انتخاب و ترکیب مناسب

اولین گام در این مرحله انتخاب درست و بجای تصاویر است. بعنوان مثال برای وب‌سایت Adventure.com که مرتبط با سفرهای ماجراجویانه است بهتر است تصاویر متشکل از رنگ‌های روشن و موضوعات جالب باشند. علاوه‌براین، باید به اندازه تصاویر دقت لازم را داشته باشیم و المان‌های UI در برگیرنده عکس‌ها را درنظر بگیریم. درنتیجه باید تصاویر را متناسب با محتوای متنی مدنظر Crop کنیم.

ترکیب سبک‌های تصاویر در فوتوشاپ

در مرحله بعد تنظیمات سبک عکاسی است که باید متناسب با چیدمان سایت و سایر عکس‌های مورد استفاده باشد. در فوتوشاپ، می‌توان با هم‌پوشانی رنگ‌ها، تنظیمات جالبی روی تصاویر انجام داد. در قسمت Layer Styles هر تصویر می‌توان از Colour Overlay استفاده کرد. در این تصویر دیده می‌شود که رنگ عکس روشن‌تر می‌شود. بعد می‌توان Blend Mode را از Normal به Exclusion تغییر داد و سپس Opacity را به ۳۰% یا کمتر کاهش داد.

استفاده از تکنیک Polish در فوتوشاپ

بر اساس کنتراست عکس و المان‌های UI دربرگیرنده هر تصویر، می‌توان Opacity را در Colour Overlay کم یا زیاد کرد. حتی در فوتوشاپ با تغییر کلی رنگ‌ها نیز می‌توان جلوه‌های جالبی در تصاویر ایجاد کرد. می‌توان با تنظیم رنگ‌های گرم و سرد ظاهری زیبا به عکس‌ها داد.

منبع: www.webdesignermag.co.uk

۱. اولین مرحله از تبدیل تم‌های فتوشاپ به صفحات HTML ایجاد یک فولدر جدید به نام webdites است که داخل آن نیز می‌بایست دو فولدر دیگر تحت عناوین images و css نیز ایجاد کنید. در این دو فولدر تمامی فایل‌های مربوط به تبدیل تم‌های فتوشاپ به صفحات HTML ذخیره می‌شوند.

۲. مرحله دوم  با باز کردن فایل فتوشاپ تم شروع می‌شود. در اینجا آموزش روی یک لوگو نمایش داده می‌شود. در نرم‌افزار فتوشاپ تمامی لایه‌های مرئی غیر از لایه Logo را نامرئی کنید. در قسمت Image گزینه Trim را انتخاب نموده و Transparent Pixels را تیک بزنید. در نهایت می‌توانید تصویر خود را در فولدر images به نام logo.png ذخیره نمایید.

۳. در این مرحله تغییراتی در تصویر پس‌زمینه داده می‌شود پس می‌بایست تمامی لایه‌ها به استثنای لایه background غیرفعال باشند. بعد می‌توان با گزینه Crop اندازه تصویر را کوچک کرد. پس از انجام تغییرات فایل را با فرمت png. ذخیره نمایید.

۴. اکنون وقت آن است که به سراغ xhtml رفته و تنظیمات قسمت عنوان را انجام داد. اینجا بهتر است از ویرایشگر متن Dreamweaver استفاده نموده و کدی که در ادامه آمده است کپی نمایید. این اولین ایندکس ایجاد شده در html است که می‌توان آن را در فولدر websites ذخیره نمود.

۶. برای مرحله ششم، تمامی کارهای مرحله پنجم را تکرار می‌کنیم با این تفاوت که حرکت برش باید از پایین به بالا انجام شود. در نهایت می‌توان تصویر را تحت عنوان welcomebg-bottom.png ذخیره کرد.

۷. تا اینجا تنظیمات عکس‌ها انجام شده و تنها کاری که باید انجام داد این است اضافه کردن استایل، رنگ و تعیین موقعیت المان‌هاست. پس در  Dreamweaver یک فایل css.  ایجاد کرده و کد زیر را در آن کپی نمایید. این فایل را در فولدر css و به نام style.css ذخیره نمایید.

۸. در این مرحله بهتر است فایل ایندکس را گسترده تر نماییم که لزوماً المان‌های متفاوت را در صفحا سایت در موقعیت اصلی خود قرار می‌دهند. کد html مربوط به این قسمت در زیر آورده شده است.

۹. در مرحله بعد برای گذاشتن تصاویر thumbnail تنها کاری که باید کرد این است که به فتوشاپ مراجعه کرده و با استفاده از ابزار Crop تک تک تصاویر را برش می‌زنیم. بهتر است برای هر تصویر به اندازه ۵ پیکسل فاصله بگذاریم.

۱۰. با داشتن تصاویر متعدد باید موقعیت آن‌ها را در صفحه بدرستی انتخاب کرد که این مشکل را تنها می‌توان به کمک CSS حل نمود. کدهای مربوطه در ادامه آورده شده‌اند.

۱۱. مرحله بعد در فرآیند تبدیل تم‌های فتوشاپ به صفحات HTML مربوط به قرار دادن markup ها در فایل html است که همراه با تگ های تصویری می باشند. دقت داشته باشید که دستور div به تنهایی در markup ها استفاده می شود و این امر برای قرار گرفتن div ها در موقعیت اصلی خود ضروری است. کدها زیر، شما را در این قضیه راهنمایی می نمایند.

۱۲. برای تنها کادر پس‌زمینه از تکنیک بکار رفته برای welcome box استفاده می‌کنیم. به فتوشاپ مراجعه نموده، لایه About me box را فعال کزده و عمل برش را با استفاده از ابزار crop انجام دهید. همانطور که در مراحل ۵ و ۶ آورده شده است یک بار crop کرد از بالا یه پایین و بار دیگر از پایین به بالا خواهد بود.

۱۳. برای داشتن button باید دو تصویر ایجاد شود پس در فتوشاپ لایه بالای لایه button که دربرگیرنده متن می باشد را نامرئی نمایید. سپس یک بار از بالا و یک بار از پایین عمل crop را انجام دهید.

۱۴. در این قسمت از فرآیند تبدیل تم‌های فتوشاپ به صفحات HTML باید مجدداً  از ابزار crop استفاده کرده و عنوان تصویر بلاگ را برش بزنیم.

۱۵. در پایان هم نوبت به علائم شبکه‌های اجتماعی می‌رسد. پس در فتوشاپ تصاویر مربوط به هر کدام را crop کرده و تصاویر را در فولدر images ذخیره نمایید.

منبع: www.webdesignermag.co.uk

مراحل اولیه بدین ترتیب است:

• فایل GIF را در فوتوشاپ باز کنید.
• در قسمت window، گزینه Timeline یا Animation را باز کنید.
• همچنین، باز در قسمت window گزینه Layers را انتخاب نموده و اطمینان حاصل نمایید که پنجره Layers باز است.

در ادامه به سه روش اختصاصی سازی تصاویر GIF را آموزش می‌بینید.

روش اول تغییر تصاویر GIF در فوتوشاپ – تنظیم لایه‌ها

در پنجره Layers بالاترین لایه را انتخاب کنید و گزینه ‘Create new adjustment layer’ را برای ایجاد لایه تنظیمات جدید کلیک نمایید. برای ایجاد هر نوع تغییری می‌توانید تنظیمات مربوط به آن را انتخاب کنید. هرگونه تغییری جلوه‌های جدیدی به تمامی لایه‌های زیرین می‌دهد. در این قسمت می توانید رنگ ها و کنتراست را تغییر دهید. زمانی که تمام تغییرات مدنظر اعمال شد برای ذخیره کردن فایل بهتر است از گزینه ‘Save for Web and Devices’ استفاده کنید. در این زمان بهتر است میزان Transparency، Matte و سایر گزینه های انیمیشن را چک کنید.

مثال:

bbbbbbbbbbbbb bbbbbbbb نمونه اصلی bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb نمونه تغییر یافته

روش دوم تغییر تصاویر GIF در فوتوشاپ – گزینه‌های ترکیب

درحالیکه پنجره Animation/Timeline باز است، تمامی فریم ها را انتخاب کرده و آیکون trash را کلیک کنید. به پنجره لایه ها رفته و اولین لایه را انتخاب کنید. آیکون fix را کلیک کرده و منوی Blending Options را برای داشتن گزینه های ترکیب باز کنید. تغییرات دلخواه را روی اولین لایه اعمال کنید. در مثال زیر، تنها جلوه هم پوشانی رنگ ها نشان داده شده است. زمانی که تمامی تغییرات اعمال شدند روی لایه راست کلیک کرده و Copy Layer Style را انتخاب کنید. سپس همه لایه ها را انتخاب کرده، مجدداً راست کلیک کنید و در این حالت، Paste Layer Style را برگزینید. تمامی لایه ها افکت مورد نظر شما را خواهند داشت. در پنجره Animation/Timeline در قسمت بالا سمت راست، More menu  را انتخاب کنید. گزینه Make Frames from Layers را برای هر لایه فعال کنید تا بطور جداگانه در فریم قرار بگیرند. همه فریم ها را انتخاب کنید و فلش موجود در پایین هر فریم را کلیک کنید. از این طریق می توانید سرعت فریم را تنظیم کنید. پس از این مرحله می توانید تصویر خود را ذخیره کنید.

مثال:

bbb bbbbb bbbbbbbb نمونه اصلی bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb نمونه تغییر یافته

روش سوم تغییر تصاویر GIF در فوتوشاپ – فریم ها

اگرچه این روش از سایر روش ها وقت‌گیرتر است ولی انعطاف‌پذیری زیادی دارد چراکه انیمیشن‌های GIF فقط مجموعه‌ای از تصاویر است و این قابلیت وجود دارد که بطور مجزا هر یک از فریم‌ها را تغییر داد و درنهایت جلوه‌ای ویژه بر انیمیشن ایجاد می‌شود. درحالیکه پنجره Animation/Timeline باز است، تمامی فریم ها را انتخاب کرده و آیکون trash را کلیک کنید. می توانید هر جلوه‌ای که می‌خواهید در لایه‌ها بطور جداگانه ایجاد کنید. در مثال زیر، افکت Color Halftone بر هر لایه اعمال شده است. همه فریم ها را انتخاب کنید و فلش موجود در پایین هر فریم را کلیک کنید. از این طریق می توانید سرعت فریم را تنظیم کنید. پس از این مرحله می توانید تصویر خود را ذخیره کنید.

مثال:

bb bbbbbb bbbbbbbb نمونه اصلی bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb نمونه تغییر یافته

 منبع: www.creativebloq.com

۱. Balsamiq Mockups

Balsamiq Mockups شاید یکی از محبوب‌ترین و شناخته شده‌ترین ابزارها برای طراحی Mockup است که این قابلیت را به طراحان می‌دهد تا در زمانی اندک و به زیبایی Mockup های جالبی طراحی کنند. همچنین این ابزار به شما کمک می‌کند تا مشکلات UI را بهتر مرتفع نمایید و زمان زیادی را برای جزئیات صرف ننمایند.

Balsamiq Mockups مجموعه وسیعی از اجزای سازنده Mockup ها را در اختیار دارد که قدرت انتخاب بالایی به کاربر می‌دهد.

۲. Mockingbird

Mockingbird یکی دیگر از نرم‌افزارهای رایج است که این امکان را فراهم می‌کند تا Mockup های طراحی شده را لینک کرده و به اشتراک گذاشت. بوسیله این ابزار می‌توان نمونه‌های اولیه Mockup را به سرعت طراحی کرد و همچنین این قابلیت وجود دارد که با ویرایشگر drag-and-drop به سرعت و بصورت انفرادی یا گروهی واسط‌هایی را طراحی کرد.

۳. Mockup Builder

Mockup Builder یک نرم افزار رایگان است که توسط Micrsoft Silverlight ساخته شده و این قابلیت را به کاربر می دهد تا Mockup های نرم افزاری و وب‌سایتی طراحی کند. اگرچه مجموعه المان‌های در دسترس متنوع هستند ولی به لحاظ کمی محدودند. با این وجود، بعنوان یک ابزار رایگان، Mockup Builder راهکارها و گزینه‌های ساده و بجایی را به کاربر پیشنهاد می‌دهد. زمان به اشتراک‌گذاری، Mockup طراحی شده را می‌توان در قالب PNG و PDF بکار گرفت.

۴. HotGloo

HotGloo یکی دیگر از ابزارهای طراحی Mockup است که بدلیل مجموعه غنی و عظیم اجزای سازنده میان کاربران از رواج بالایی برخوردار است و گفته شده که بیش از ۲۶۰۰۰ پروژه طراحی با این نرم افزار انجام شده است. محیط فراهم شده توسط این نرم افزار به کاربر کمک می کند تا تمام فرآیند طراحی را به راحتی تجربه کند.

۵. Invision

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

۶. Proto.io

Proto.io یکی از نرم‌افزارهایی است که برای طراحی در وسایل متحرک بکار برده می‌شود. بوسیله این برنامه می‌توان در iPhone, iPad و Android به طراحی Mockup‌ های جالبی پرداخت، کنترل کاملی بر رنگ‌ها، فونت‌ها و صفحه‌آرایی داشت و پروژه‌ها را با سایر طراحان به اشتراک گذاشت.

Mockup های طراحی شده توسط این نرم‌افزار مستقیماً از طریق وسایل متحرک قابل رویت هستند و این امکان را فراهم می‌کنند تا کاربر طراحی خود را در دنیای واقعی تجربه کند.

منبع: www.mashable.com

کتاب الکترونیکی Building UI Mockups Developers Don’t Hate برای طراحی Mockupها بکار رفته و چگونگی از بین بردن فاصله بین طراحی و توسعه پروژه را شرح می‌دهد. این دو مقوله همیشه بطور جداگانه فعالیت می کنند ولی هر کسی که در این زمینه ها کار می کند می داند که تفاوت های کوچک هر دو می توانند منجر به مشکلات بزرگی شوند. علاوه برای این کتاب مذبور از اینکه چطور طراحان UI و UX می توانند برای طراحی Mockupها در کنار یکدیگر همکاری کنند، می گوید.

این کتاب بسیار مفید حجم کمی داشته و در ۳۵ صفحه تالیف شده است، براحتی قابل فهم است و مراحل طراحی Mockupها را در قالب تئوری و تعداد تمرین به وضوح و کامل توضیح می دهد. کتاب Building UI Mockups Developers Don’t Hate کاملاً مختصر ولی کاربردی و عملی، عناوین زیر را دربرگفته و شرح می دهد:

• دستورالعمل طراحی Mockupها و بهترین تمرین ها برای درک بهتر فرآیند طراحی
• شرح محدودیت های توسعه که می توانند به طراحی شما آسیب وارد کرده و آن را خراب کنند.
• چگونگی پبروی از صحت بصری فرآیند طراحی Mockupها برای حفظ هرچه بیشتر جزئیات مدنظر در ترجمه
• معرفی بهترین پلاگین های فوتوشاپ جهت تسهیل همکاری بین میان طراحان و توسعه دهندگان
• شرح کامل مزایا و معایب Mokhupهای مرورگر
• معرفی ۲۰ مرجع برتر برای ساخت هر چه بهتر طراحی ها

این کتاب کارآمد و جالب را می توانید از طریق لینک زیر دانلود کرده و بعنوان مرجعی موثق همیشه در اختیار داشته باشید.

منبع: www.creativebloq.com

اجزای سازنده یک طراحی

UI Kit ها مجموعه بنیادین عناصری هستند که به شما کمک می‌کنند تا ارائه مناسبی از محصول نهایی خود داشته باشید. برخی از این المان ها عبارتند از: صفحه نمایش، آیکون ها، جداول، کلیدها و غیره. این عناصر، اجزای سازنده پروتوتایپ هستند. اولین مرحله هر طراحی که ایجاد پروتوتایپ است بسیار وقت گیر و خسته کننده است. با استفاده از UI Kit هم می توان در زمان صرفه جویی کرد و هم اینکه بازخوردهای خوبی در این زمینه دریافت کرد. یکی از انواع UI Kit ها تحت عنوان Grade UI Kit در طراحی وب سایت ها بسیار کارآمد است و شامل صدها آیکون، جدول، صفحه نمایش و سایر المان هاست.

از مزایای ساخت پروتوتایپ با UI Kit می توان به موارد زیر اشاره کرد:

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

تنها داشتن ایده کفایت نمی کند بلکه تبدیل آن به واقعیت نیز ضروری است و این امر با ساخت پروتوتایپ توسط  UI Kit میسر می شود.

استفاده از UI Kit ها برای ساخت پروتوتایپ طراحی

پیش از آغاز ساخت پروتوتایپ توسط UI Kit بهتر است نکات زیر را در نظر داشته باشیم:

• اهداف خود را تعیین کنید و این امر نه تنها در مورد اهداف کاربری است بلکه در ارتباط با اهداف کسب و کار هم صدق می کند.
• کاربران را مشخص کنید. قرار است چه کسانی از محصولات یا سایت شما بازدید نمایند؟ این کار را براحتی می توانید با استفاده از User Personas یعنی اطلاعات مربوط به کاربران انجام دهید.

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

حال که اهمیت بکارگیری UI Kit ها مشخص شد در ادامه به بررسی استفاده عملی آن می پردازیم.

۱. تعیین ویژگی های اساسی واسط خود

به المان های مورد نیاز خود فکر کنید ولی آن ها را در چهارچوب اهداف پروژه و کاربران قرار دهید. اینجاست که داشتن User Persona بکار می آید و به شما کمک می کند تا از انگیزه ها و نیازهای کاربران آگاهی یابید. بعنوان مثال بهتر است که بدانید:

۱. آیا کاربران نیاز به login در سایت دارند؟

۲. آیا نیاز به فرمی برای ثبت نام در سایت وجود دارد؟

۳. هر کاربر چگونه یک آیتم را برای خرید انتخاب می کند؟

۴. مراحل خرید پس از انتخاب یک آیتم چیستند؟

لیستی از ویژگی های اصلی که می خواهید در UI شما نمایش داده شود بنویسید. بعنوان یک پیشنهاد، به ویژگی هایی توجه کنید که بدرستی محصول شما را از سایر محصولات متمایز می کنند.

۲. انتخاب صفحات نمایشی که می خواهید در پروتوتایپ دیده شوند.

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

۳. UI Kit انتخابی شما باید متناسب با هویت ظاهری محصول شما باشد.

نکته اصلی در انتخاب UI Kit مناسب توجه به عملکردها و ویژگی هایی است که شما جهت نمایش تعیین نموده اید. به یاد داشته باشید اجزای سازنده ای را انتخاب کنید که تناسب بیشتری با ظاهر ایده آل محصول شما دارند. در زمان انتخاب UI Kit، به نکات زیر توجه ویژه ای داشته باشید:

• آیا امکان اختصاصی سازی طراحی را به شما می دهد؟
• آیا اجزای سازنده مورد نیاز شما را شامل می شود؟
• آیا فرمتی که در دسترستان قرار می دهد قابل ویرایش کردن است؟

قالب های رایج برای UI Design شامل Adobe Photoshop و Sketch می باشند.

۴. استفاده از Photoshop یا Sketch برای تغییر رنگ ها و اجزای سازنده 

وقتی UI Kit مدنظرتان را انتخاب کردید در نرم افزار طراحی خود فایل ها را باز کرده و ویرایش کنید. می توانید مراحل این کار را در زیر مرور کنید:

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

• ۵. افزودن برخی تعاملات پایه با استفاده از روش های ساخت پروتوتایپ

   زمانی که ساخت واسط کاربر بوسیله UI Kit ها به پایان رسید، سه روش متداول برای ساخت پروتوتایپ وجود دارد:

  ۱. نرم افزار ارائه که غالباً بوسیله مبتدیان مورد استفاده قرار می گیرد و شامل ابزارهای استاندارد ارائه مانند Keynote یا Powerpoint می شود تا چگونگی کارکرد محصول را به کاربر نشان دهند.

  ۲. پروتوتایپ های کدگذاری شده که افراد نیمه ماهر و ماهر هر دو از آن استفاده می کنند. با مراجعه به HTML و CSS می توان این پروتوتایپ ها را بکار انداخت.

  ۳. برنامه های پروتوتایپ سازی اختصاصی که تمامی کارشناسان در هر سطحی از این برنامه استفاده می کنند. ابزارهای ساخت پروتوتایپ به دانش اندک و غیر حرفه ای نیاز دارند و به شما کمک می کنند تا براحتی کار ساخت پروتوتایپ را انجام دهید.

  در نهایت می خواهیم UI Kit های کاربردی و رایجی را به شما معرفی کنیم که در این زمینه بسیار کارآ هستند و به شما کمک زیادی می کنند.

• Android Lollipop UI Kit
• Awesome Web UI Kit
• ۱۵۰ Free UI Kits

منبع: www.creativebloq.com

یکی از موارد استفاده از ۳D خلق تصاویر سه بعدی است که با مشکلاتی از قبیل ویژگی های هندسی، ایحاد تحرک و ویژگی های پیچیده و متعدد CSS همراه است. این مسائل بسیار آزار دهنده هستند و تلاش بر این است که بتوان آن ها را مورد بررسی قرار داده و راه حلی برای آن ها پیدا کرد.

در این مقاله، تلاش بر این است تا استفاده از CSS در تصاویر ۳D جلوه ای چرخان ایجاد کرد.

مکعب ها دارای ۶ وجه هستند پس ما باید از ۶ المان استفاده کنیم. اینجا برای هر وجه یک تگ div ایجاد می کنیم و هر یک را با عنوان “cube” در یک container (عنصر دربرگیرنده تگ) قرار می دهیم.

برای ایجاد پرسپکتیو باید تمام تگ های بالا را در Container نامرئی دیگری نیز قرار دهیم. همانطور که در تصویر پایین می بینید این container  بعنوان یک بخش (section) تعریف می شود چراکه نیازی نیست همیشه از تگ div استفاده کنیم.

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

برای افزودن رنگ، بهتر است از کد دستوری hsla استفاده کنیم چراکه به کمک آن می‌توان توالی زیبا و چشمگیری از سایه‌ها و رنگ‌ها را ایجاد کرده، درنهایت آن‌ها را کپی و ویرایش نمود.

 تا اینجا مکعبی داریم که اندازه آن مشخص نیست. این کار را می‌توان از طریق تنظیمات اندازه در container، تگ div مکعب و وجوه آن انجام داد.

 برای حصول اطمینان از کارکرد صحیح ۳D باید تنظیمات تبدیل را بدرستی انجام داد و این امر از اهمیت بالایی برخوردار است.

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

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

 با انجام این دستورات و اعمال کدهای بالا، می توان با استفاده از CSS در تصاویر ۳D حالت چرخشی را ایجاد کرد.

منبع : www.webdesignermag.co.uk

۱) اندازه و رزولوشن تصاویر GIF: در ابتدای کار باید اندازه و رزولوشن فایل را انتخاب کنیم. از آنجایی اندازه های متنوعی برای تصاویر وجود دارند، بهترین و رایج ترین انتخاب می‌تواند ۴۶۸*۸۰ پیکسل و رزولوشن ۷۲dpi باشد.

۲) ایجاد تغییرات لازم: پس از اینکه لایه های متعدد برای هر اسلاید ایجاد شدند، می تواند با استفاده از قسمت Menu گزینه view را انتخاب کرده و بعد به سراغ گزینه Animation بروید. برای اینکه انیمیشن از جذابیت بیشتری برخوردار باشد می توانید لایه های متنی را کپی کرده، تغییرات لازم را اعمال نموده و از برخی جلوه های تصویری استفاده نمایید تا بدین ترتیب نتایج زیبایی بدست آورید.

۳) توالی تصاویر GIF: بر اساس مکان قرار گیری برخی از طراحان سایت ها نیاز دارند تا انیمیشن بعد از زمان معینی متوقف شود. گاهاً نیز اتفاق می افتد که تصویر برای همیشه از کار افتاده و دیگر تحرکی ندارد. برای جلوگیری از چنین مشکلاتی بهتر است چهارچوب زمانی را زیر هر اسلاید تنظیم نموده و فایل GIF نهایی را بصورت Save for Web ذخیره نمایید. درنهایت، این امکان وجود دارد که تنظیمات پایانی را پیش از ذخیره نمودن فایل تغییر داده و تنظیمات دلخواه خود را نهایی سازید.

طراحی داخلی و مد

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

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

رنگ های Flat

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

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

شمای رنگی یکنواخت

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

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

کنتراست بالای رنگ

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

در تصویر بالا سایت Hega رنگ پس زمینه روشن و نوشته های تیره انتخاب کرده و بخوبی توجه کاربر ار جلب می نماید.

ترکیب رنگ ها در طراحی سایت 

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

صورتی: روابط عاشقانه، جوانی و اطمینان

قرمز: عشق، شور و اشتیاق، خطر و اضطرار

زرد: تفریح، خوش بینی، شادی و احتیاط

نارنجی: گرمی، جاه طلبی، شور و شوق و خلاقیت

سبز: طبیعت، شانس، رشد و امنیت

آبی: سازش، آرامش، اعتماد و افتخار

بنفش: ثروت، قدرت، معنویت و آرامش

برای دانلود کتاب Flat Design & Colours به لینک زیر مراجعه نمایید:

منبع: www.creativebloq.com

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

منوی Mega Drop-Down

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

منوهای Mega Flyout

منوهای Mega fly-out می توانند تعداد زیادی از لینک های زیر گروه را شامل شوند در حالی که طراحی کلی سایت را بهم نریخته و وجه کاربر را بخوبی جلب می نماید.

 منوهای اسلایدری Multi-Level

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

  منوهای عمودی

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

منوهای تصویردار

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

منوهای عمودی متحرک

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

ظاهر نامتعارف

گاهاً در برخی منوها دیده شده که از فونت هایی استفاده می شود که خاص بوده و بطور معمول خیلی کم بکار برده می شوند. ولی استفاده از این فونت ها در بعضی سایت ها و منوها بسیار جذاب بوده و جالت توجه می باشند.

 طراحی رنگ آمیزی

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

درجه بندی رنگ ها و جلوه های سایه

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

منبع: www.entheosweb.com

پیشگامان طراحی گرافیک

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

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

انقلاب رسانه های جمعی

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

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

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

حرکت به سمت دیجیتال شدن

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

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

منبع: www.webdesignviews.com

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

۱. طراحی سایت نا منظم: که امروزه یکی از پر طرفدارترین طراحی‌های جدید دنیای گرافیست می‌باشد، به سایت‌هایی گفته می‌شود که از خصوصیات زیر برخوردارند:

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

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

طراحی سایت

۲. طراحی سایت خلوت: این نوع طراحی سایت، در ظاهر ساده هستند اما تفکری در پی ساخت آن‌ها نهفته است. استفاده از المان‌های کم و گرافیکی و استفاده از دو یا سه رنگ در طراحی، به آن‌ها ظاهری متفاوتی داده است و برخلاف دسته اول، به تمیزی معروفند. از نظر طراحی کاملاٌمتمایز، حرفه ای و مدرن هستند. همچنین پیام “صاحب این سایت مشتاق است” و ” صاحب این سایت قابل اعتماد است” را به بازدیدکننده القا می‌کند.  این گونه سایت‌ها برای همه مناسب است غیر از کسانی که دوست ندارند تفاوت شایانی با بقیه داشته باشند. این تفاوت آن‌ها را می‌ترساند و سایت‌های استاندارد را می‌پسندند.

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

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

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

امروزه وب سایت‌های بدون صفحه یا تک صفحه نسبت به وب سایت‌های چند صفحه‌ای محبوب‌تر می‌باشند و تجربه کاربری بهتری دارند. همچنین نرخ تبدیل سایت‌های بدون صفحه بالا است و هزینه توسعه این مدل سایت‌ها کم می‌باشد.

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

مزایای سایت‌های بدون صفحه یا تک صفحه‌ای

۱- سازگاری با گوشی‌های موبایل و جذب کاربر:

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

۲- پیمایش راحت تر صفحه و رساندن پیام به مخاطب:

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

۳- سازماندهی بهتر مطالب:

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

در زیر نمونه‌ای از یک وب سایت تک صفحه‌ای را می‌توانید مشاهده کنید: