طراحی سایت

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

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

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

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

پارالکس

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

برای یک جایگزین پیاده سازی و ایده جالب‌تر می توانید به این مثال از Joshua Bemenderfer نگاهی بیاندازید.

اسلایدشو

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

اسلایدشو واکنشگرا / تنها با استفاده از CSS و HTML۵

اسلایدر Testimonial با استفاده از سی‌اس‌اس

حالت کشویی

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

پنجره‌های MODAL و گالری‌های تصویری

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

دکمه‌ها و افکت های شناور

خب، این موضوع تقریبا حالتی است که توسعه دهندگان قبلا نیز با آن کار کرده اند. اما در سی‌اس‌اس ۳ به نظر تلاش بسیاری برای ساختن افکت‌های مختلف شده که برای دکمه‌ها و منوها می‌توانیم در نظر بگیریم، البته نه فقط برای دکمه‌ها و منوها بلکه برای هر المانی که می تواند کلاس hover را دریافت کند. پیدا شدن HTML۵ و موضوع Canvas در کنار SVG طراحان را یاری نموده تا بتوانند کارهای خارق‌العاده دیگری را نیز انجام دهند.

برای انیمیشن‌های مربوط به دکمه و افکت‌های مربوطه می‌توانید لینک‌های زیر را مطالعه نمایید.

مجموعه دکمه‌ها توسط Christophe Guerrin

افکت‌های موج دار توسط Pau Giner

افکت تایپ‌رایتر تصادفی

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

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

درست است؟

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

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

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

۱. استفاده نادرست از پوسته

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

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

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

۲. استفاده از طراحی پیشفرض بوت استرپ

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

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

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

۳. مشکلات مربوط به تایپوگرافی

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

یکی از مرسوم ترین مشکلاتی که وبسایت های طراحی شده براساس «home-made» دارا است، هم سنجی بسیار پایین میان فونت های Headline و بدنه وبسایت است. برای حل این مشکل کافی است که اندازه فونت مربوط به Headline را بزرگ تر کنید. همچنین با استفاده از حالت Bold می توانید آن را مهمتر نشان دهید. در این حالت می‌توان متن مربوط به Headline را از بدنه وبسایت جدا کرد.

۴. استفاده از پس زمینه تیره

رنگ پس زمینه یکی از مهمترین مسائل و بخش های مربوط به وبسایت است. پس بهتر است آن را با دقت بیشتری انتخاب کنید.

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

۵. استفاده از چندین دکمه CTA

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

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

ادامه دارد…..