لوگو (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

۱) آیا سال جدید با بازگشت تایپوگرافی 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

فیلترهای 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

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

• فایل 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

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

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

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

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

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

رنگ های 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

• یک هاست خوب انتخاب کنید

بنا بر تحقیقات انچام گرفته توسط سایت Akamai، تقریباً نیمی از مردم توقع دارند صفحات سایت در زمانی کمتر از ۲ ثانیه لود شوند و حدود ۴۰% از مردم گفته‌اند که اگر این زمان تنها یک ثانیه افزایش پیدا کند، صفحه را ترک می کنند. سایت‌های فروشگاهی با دنبال کردن اهدافی همچون جذب مشتری و افزایش فروش، بیش از سایر سایت‌ها به سرعت لود و بار گذاری مطالب اهمیت می‌دهند. مطالعه‌ای با عنوان “چرا عملکرد سایت اهمیت دارد. آیا سایت شما مشتری‌ها را دور می‌کند؟” ادعا می‌کند در ساعات اوج ترافیک، بیش از ۷۵% از مشتری‌ها ترجیح داده‌اند به جای انتظار در صفحه فعلی برای لود مطالب، سایت را بسته و سایت‌های رقیب را مطالعه کنند. سایت‌هایی که به سرورهای اختصاصی با سرعت بالا، پیکر بندی و منابع بهینه مجهزند. این قبیل سرورها با وجود گران بودن، برای شما با ترافیک بازدید بالا، یک ضرورت به شمار می‌آیند. از طرفی دیگر، هاست‌های اشتراکی سایت شما را در کنار صدها سایت دیگر بر روی یک سرور قرار داده و منابع سرور چه سخت فزاری و چه نرم افزاری بین صدها سایت به اشتراک گذاشته می‌شود که در نتیجه منابع محدودتری به سایت شما تخصیص می‌یابد. بنا بر این مطمئن باشید که هاستینگ اختصاصی بهترین گزینه برای ثبات، عملکرد و ارتقا سایت شما می‌باشد. هرچند همیشه هم شرکت‌های هاستینگ مقصر نیستند. گاهی اوقات قدرت سرورهای هاست افت می‌کند. به هر حال بهترین روش آن است که از شرکتی خدمات هاستینگ خود را بگیرید که هم پشتیبانی خوبی داشته باشند و هم بتوانند در ساعات اوج شلوغی، ترافیک سایت را خوب مدیریت و کنترل کند.

• بهینه سازی تصاویر

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

• فعال کردن فشرده سازی

همانند عکسها، فشرده سازی صفحات بزرگ وب نیز می‌تواند باعث کاهش پهنای باند صفحات و در نتیجه کاهش سرعت لود شود. بدین منظور کافی است فایل‌ها را قبل از آپلود به فرمت Gzip فشرده کنید. بنا بر ادعای یاهو، پس از این کار، سرعت لود تا ۷۰% کاهش می‌یابد. بهتر است که اولین منبع فشرده سازی را Gzip انتخاب کنید؛ زیرا ۹۰% کاربران اینترنت از مرورگرهایی بهره می‌جویند که از فرمت Gzip پشتیبانی می‌کنند. علاوه بر این، Gzip از سمت سرور نیز قابل دست رسی می‌باشد و می‌توان از طریق پوشه‌های  .htaccess, nginx.conf یا web.config آن را تنظیم کرد.

•  ذخیره سازی مرورگر

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

بهترین حالت این است که بتوان تمام منابعی که قابلیت ذخیره سازی دارند را حداقل یک هفته و ترجیحاً یک سال نگه داری کرد. نکته مهم بعدی برای سرعت بخشیدن به دانلود عناصر HTTP این است که هدرهای HTTP keep-alive را فعال کنیم.. به این ترتیب مر.رگر و سرور با یک اتصال می‌توانند اقدام به دریافت و ارسال چند فایل کنند. در واقع  هنگامی که کاربر از سایت شما بازدید می‌کند، اتصال سرور باز باقی می‌ماند و دیگر نیازی نیست تا برای هر در خواستیک اتصال جدید اتفاق بیفتد. برای فعال کردن keep-alive تنها کافیست چند خط کد ساده به .htaccess, nginx.cong یا web.config file اضافه کنید.

• اسکریپت و CSS

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

• پیکربندی CDN

بسیاری تصور می‌کنند که CDN نکته طلایی سرعت سایت می‌باشد. به همین دلیل در این مقاله اول موارد دیگر بررسی شد تا ثابت کنیم این طرز تفکر اشتباه است. CDN لزوماً و به تنهایی سرعت سایت را بالا نمی‌برد. سی دی ان می‌تواند بعد از اجرای روش‌های ذکر شده، عامل موثر بعدی در افزایش سرعت سایت باشد. CDNها، سرورهایی هستند که در مناطق و جاهای مختلف قرار گرفته‌اند و امکانات پایداری را به کاربر ارائه می‌دهند. هنگامی که شبکه در خواستی را دریافت می‌کند، داده‌ای که در نزدیک‌ترین سرور قرار گرفته سرعت لود صفحه را بالا می‌برد و در نتیجه، سرعت دانلود نیز بهبود پیدا می‌کند. محتوای مورد نظر بین چند سرور تقسیم می‌شود و به این ترتیب مسائلی که باعث تاخیر پاسخ گویی سرور می‌شوند، کاهش پیدا می‌کنند و بالطبع سرعت دانلود بالا می‌رود به علاوه، به دلیل پخش سرورها، up-time سایت هم افزایش پیدا می‌کند و اگر یکی از سرورها به هر دلیل نتواند به در خواست پاسخ بدهد، درخواست برای سرور نزدیک بعدی فرستاده می‌شود. این فایل‌های استاتیک به صورت جدا (و در بیشتر موارد در URLهای مختلف) از HTML مرکزی صفحه‌ای سرو شده‌اند. در نتیجه ساختمان صفحه شما به مرورگر فرستاده می‌شود. به این ترتیب نه تنها سرعت بار گذاری صفحه بالا می‌رود، بلکه اجازه نمایش صفحات قبل از لود کامل را نمی‌دهد. استفاده از CDN عملکرد سایتتان را در سر تا سر دنیا بهبود می‌بخشد و از این جهت ارزش سرمایه گذاری را دارد. باید به خاطر داشته باشید که سی در ان به تنهایی و به طور جادویی سرعت سایتتان را افزایش نمی‌دهد. استفاده از CDN  در کنار سایر نکات ذکر شده، باعث نتیجه گیری حداکثری خواهد شد.
حرف آخر
روش هایی که در این مقاله ارائه شدند واقعاً ارزشمند هستند و می‌توانند سایت وردپرسی شما را تا آخرین حد ممکن سریع کنند. اما نباید انتظار داشته باشید که فقط با کمک یکی از این روش‌ها سرعت لود صفحات سایتتان بالا برود. این تکنیک‌ها در کنار هم سرعت بار گذاری را افزایش می‌دهند. CDN  به تنهایی نمی‌تواند سرعت لود را بالا ببرد. ذخیره سازی مرورگر و فشرده سازی فایل‌های بزرگ می‌توانند منجر به دانلود سریع‌تر عناصر از سرور به کامپیوتر کاربر شود. ضمناً شما می‌توانید سرعت سایتتان را از طریق Google PageSpeed Insight  و یا GTmetix بررسی کنید و ببینید که صفحات سایت شما در مقیاس سرعت بارگذاری، اندازه صفحات و تعداد درخواست‌ها چطور عمل می‌کند. هدف سایت، ایجاد یک تجربه کاربری خوب است و اولین قدم برای نیل به این هدف  افزایش سرعت بار گذاری صفحات می‌باشد تا کاربر در اولین کلیک از سایت شما ناامید نشود.

هشتگ (Hashtag) اولین بار به منظور نام گذاری گروه‎ها‎ و موضوعات در چت IRC مورد استفاده قرار گرفت؛ به این صورت که با اضافه کردن کاراکتر «#» قبل از حروف یا کلمه‌ای خاص، امکان جست و جوی سریع آن برای کاربران فراهم کردند. پیدایش توییتر به وسیله هشتگ (Hashtag)صورت پذیرفت. اولین باری که هشتگ (Hashtag)  استفاده شد، در سال ۲۰۰۷ توسط گروهی با نام کریس مسینا بود که در توییتر اقدام به استفاده از هشتگ نمودند . اوایل پیدایش، استفاده از هشتگ برای کاربران عمومی به نوعی ترفند برای بهبود رتبه در نتایج جست و جو اعلام شد و هیچ استفاده دیگری برای آن در نظر گرفته نشده بود. این در حالی است که عده‌ای دیگر از کاربران، کاربرد صحیح از هشتگ را آموخته بودند و برای کارهایی غیر از جست و جوی مطالب استفاده می‌کردند. برای نمونه #sandiegofire که در اخبارها استفاده شد.

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

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

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

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

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

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

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

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

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

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

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