راهنمای طراحی وبسایت: طراحی وبسایت، لوگو، برندسازی و شروع کار
طراحی سایت فروشگاهی نقش عمدهای در برندسازی و فعالیتهای بازاریابی ایفا میکند. بنابراین، وبسایت باید حرفهای به نظر برسد، اما در عین حال جذاب و خوشآیند باشد. به غیر از این، باید تجربهای عالی برای کاربر باشد.
اگر اولین بار است که وبسایت تجاری طراحی میکنید، یا میخواهید به صورت کامل وبسایت فعلی را نونما کنید، از مولفههای دیداری عمده ذیل پیروی کنید و باید توجه کنید به:
1. صفحهآرایی
باور کنید یا نکنید، صفحهآرایی به تنهایی میتواند بر برندسازیتان تاثیر عمدهای داشته باشد. به این خاطر، با انتخاب فونتی منحصربفرد یا صفحهآرایی اختصاصی، میتوانید وبسایت شرکت را نسبت به سایرین متمایز کنید. از سوی دیگر، با انتخاب فونت یا سبکی که هزاران دفعه قبلاً توسط بسیاری از وبسایتهای دیگر استفاده شده است ممکن است هویت وبسایت را در منظر تجاری گسترده به خطر بیندازید.
در حال حاضر، انتخاب سبک و فونت جذاب و منحصرفرد برای وبسایتتان اهمیت دارد. با این حال، اندازه نیز مهم است.
وبسایتهای شیک و مدرن امروزی همگی فونتهای واضح و با اندازه بزرگ دارند و به همین خاطر شما نیز باید همین مسیر را طی کنید. اندازه فونت نه تنها برای متن تصویر قابل تحسین و سرتیترها بلکه برای پاراگرافها و لینکها نیز کاربرد دارد. دلیل اولیه پشت این مطلب خواندن آسانتر فونتهای بزرگ و جلوگیری از «تراکم» بیش از حد در وبسایت است.
علاوه بر این، خواندن راهنما برای استفاده از صفحهآرایی زیبا برای آشنا شدن با تکنیکها و روشهای پایه برای کیفیت طراحی وب ضرر نخواهد داشت.
2. طرح رنگ
هنگام انتخاب رنگ برای وبسایت، قصد دارید طرحی خاص را بچسبانید. به صورت تصادفی هر رنگی را که دوست دارید انتخاب کنید و به آسانی ظاهر وبسایت را «پرزرق و برق» کنید.
در ادامه سه طرح رنگ عمده مطرح شده است که میتوانید از این میان انتخاب کنید:
· رنگهای شبیه: این رنگها در چرخ رنگ نزدیک به یکدیگر هستند. برای نمونه، میتوانید از سبز تیره با سبز روشن، یا سبز روشن با زرد روشن و غیره استفاده کنید.
· رنگهای مکمل: طرح رنگ محبوبی دیگر که در آن رنگها یکدیگر را تکمیل میکنند. برای نمونه، قرمز با سبز، صورتی با زرد یا آبی با نارنجی همخوانی دارند.
· رنگهای تکفام: این رنگها اصولاً سایههای متفاوت رنگی منفرد است. با این حال، این طرح نیازمند سطح خاصی از رنگآمیزی است حتی اگر از رنگهای متفاوت رنگی منفرد استفاده کنید، طراحی هنوز میتواند به ظاهر سیاه و خستهکننده به نظر برسد.
3. لوگوی شرکت
وبسایت شرکت را نمیتوانید بدون برندسازی به پایان ببرید، میتوانید؟
از آنجایی که یکی از مهمترین عناصر تمام شکلهای برندسازی طراحی لوگوی منحصربفرد است، باید شما نیز لوگوی منحصربفرد داشته باشید تا بتوانید در نقاط مختلف در وبسایتتان استفاده کنید- سرتیتر، آیکون نوار آدرس گردشگر، پاورقی و غیره. با این حال، مجبور نیستید برای بخش طراحی رنج زیادی بکشید زیرا میتوانید به سادگی از ابزار تولید لوگوی آنلاین استفاده کنید.
4. بهینهسازی موتور جستجو
سئو یعنی بهینهسازی موتور جستجو اهمیت دارد زیرا میتواند به رتبه بهتر وبسایت در موتورهای جستجوی محبوب نظیر گوگل و بینگ کمک کند. به این دلیل، باید برچسبها (سرتیترها)، کلان داده، سرتیترها، پانوشتها و ... درست انتخاب کنید.
علاوه بر این، باید بر روی طراحی وب پاسخگو تمرکز کنید که میتواند به انطباقپذیری وبسایتتان در برابر نمایشگرهای مختلف کمک کند یعنی نمایشگرهای بزرگ مانند لپ تاپ و رایانه و نمایشگرهای کوچک مانند گوشیهای هوشمند و تبلت. در حقیقت، غول فناوری، گوگل، طراحی وب پاسخگو را توصیه میکند. بنابراین، میتوانید تصور کنید که در ارتباط با حضور آنلاین وبسایتتان، اگر این نکته را نادیده بگیرید، وبسایت چه ضربه بزرگی خواهد خورد.
5. پانوشت اطلاعاتی
در حالی که بالای مرکز وبسایت مربوط به موردهای برجسته کسبوکار و خدمات یا محصولات اصلی پیشنهادی شما است، قسمت پایین برای اطلاعات مطلوب است. بنابراین، پانوشت باید شامل تمام پیوندهای مهم نظیر «درباره ما»، «تماس با ما» و ... باشد. میتوانید آدرس، ایمیل، شماره تماس و ... را مستقیم نشان دهید، و نقشهای کوچک داشته باشید که توسط مشتری یا مراجعهکننده برای تعیین مکان دفترتان قابل استفاده است.
وبسایت شرکتتان هویت آنلاین شما است. عملکرد و طراحیاش بر احساس مشتریان و شرکای تجاری درباره برندتان تاثیرگذار است، در نتیجه بر موفقیت کلیتان تاثیرگذار است. بنابراین، مطمئن شوید کل زمان ممکن را برای این کار صرف کنید به طوری که نتیجه نهایی مطابق استاندارد لازم باشد.
طراحی وبسایت یکصفحهای روشهای رایج، راهنمایی و توصیههای مربوط به تجربه کاربری
طراحی یکصفحهای برای برخی از وبسایتها بهتر است. این پروژهها معمولاً صفحاتی هستند که نمونه کارها را نشان میدهند (portfolio pages) یا سایت محصولات، صفحات اصلی و گاهی هم صفحات شرکتها.
شما سایتی میخواهید با محتویات کم ولی ظاهر ویژه قوی و ناوش (navigation) ساده. این یک مسأله بدیهی است.
اما چه ویژگیهای دیگری در آرایش یکصفحهای رایج است؟ و چگونه میشود سایتی طراحی کرد بهترین تجربه کاربری را ارائه کند.
هدف من در این پست این است که به شرح تمام روشهای رایج در طراحی یکصفحهای بپردازم. در این پست میتوانید روشهای رایج طراحی سایت های زنده، راهنماییهای مفید بسیار درباره تجربه کاربری و حتی طرحهایی مدرن بیابید تا بتوانید از آنها الهام بگیرید.
هیچ روشی برای طراحی یک سایت یکصفحهای بهترین روش نیست. اما اگر این پیشنهادات را دنبال کنید حتماً روی مسیر درست قرار خواهید گرفت.
پیوندهای ناوشی با اسکرول اتوماتیک
یک ویژگی بسیار رایج در طرحهای یکصفحهای، استفاده از نوار ناوشی با اسکرول اتوماتیک است.
یعنی وقتی که روی یک پیوند کلیک میکنید به طور اتوماتیک صفحه به آن قسمت از صفحه اسکرول میکند. درست مثل یک منوی ناوشی عمل میکند فقط حرکت صفحه را به هنگام اسکرول اتوماتیک به صورت یک انیمیشن نمایش میدهد که یک تجربه کاربری خیلی خوب ارائه میدهد.
برای دیدن نمونه وبسایت Hashtago را مشاهده کنید.
این یک طرح خیلی ساده با یک نوار ناوشی و ۴ پیوند مختلف است.
این ویژگی اسکرول هم موقعی که روی این پیوندها کلیک کنید عمل میکند و هم موقعی که با غلتک موشواره اسکرول کنید. یک طرح خیلی ساده است اما ممکن است انیمیشن آن برای برخی از مردم خیلی کند به نظر برسد.
این عیبی است که اعمال یک انیمیشن ساختگی به نوار ناوشی دارد.
به جای آن میتوانید کاری مانند Retainer Club انجام دهید که صفحات مختلف را به طور خودکار بارگذاری میکند و به قسمتهای جدید در همان صفحه اسکرول میکند.
متوجه خواهید شد که زمان بارگذاری به اندازه قابل ملاحظهای سریعتر میشود و حرکت انیمیشن خیلی صافتر میشود.
اگر به دنبال یک تجربه کاربری خوب هستید نیاز به سرعت انیمیشن صاف دارید. کار سادهای نیست اما هرچه بیشتر طراحی کنید بیشتر یاد میگیرید چگونه یک انیمیشن خوب بسازید.
نمونه مورد علاقه من از یک طراحی یکصفحهای با اسکرول اتوماتیک احتمالاً DangerousRobot است.
قسمتهای مختلف صفحه خیلی سریع بارگذاری و قابل رویت میشوند و ناوش در آن آسان است. هنگام طراحی یک جلوه دیداری برای نوار ناوش با اسکرول اتوماتیک باید دنبال چنین چیزی باشید.
این میتواند شبیه طرح وبسایت Playground باشد.
ببینید چگونه پیوندهای سمت راست در هر جای صفحه به دنبال شما میآیند. هنوز هم درست مانند یک نوار ناوشی معمولی عمل میکند فقط در این مکان کمتر مزاحم و بیشتر در دسترس هستند.
فکر نمیکنم این روشهای برای همه وبسایتها خوب کار کند. اگر متن زیادی در صفحه دارید و یا لازم است صفحه شما در صفحه نمایشهای کوچکتر با همین منوی عمودی درست نمایش داده شود، بهتر است از این روش استفاده نکنید.
به جای آن میتوانید از یک منوی دیگر استفاده کنید که روی تلفنهای همراه به راحتی قابل دسترسی باشد.
بسیاری از وبسایتها از پیوندهای ناوشی نقطهای استفاده میکنند. این منوها عالی نیستند چون کاربر نمیتواند بداند کدام قسمت از صفحه را دارد میبیند.
اما فضای کمی را اشغال میکنند و خیلی شیک و زیبا هستند.
به عنوان نمونه سایت Interface Agency سه دکمه ناوشی نقطهای کوچک دارد. برای اسکرول سریع در صفحه روی این دکمهها کلیک کنید.
یک آیکون به شکل مثبت گوشه بالای صفحه هست که صفحات بیشتر برای مشاهده ارائه میکند.
من چند شرکت مانند Ritual دیدهام که به طور خودکار به همراه یک انیمیشن بین قسمتهای مختلف جابجا میشود.
این قطعاً خوب است اما به نظر من برای یک صفحه با محتویات زیاد انتخاب خوبی نیست.
این روش بیشتر برای اضافه کردن تصاویر پرزرق و برق در آرایشهای شخصیسازی شده خوب است.
نوارهای ناوشی اگر بتوانید آنها را در آرایش خود قرار دهید خوب عمل میکنند. باید روشهای مختلف را مورد آزمون قرار دهید و ببینید کدام یک بهتر کار میکند اما نباید ایدههای خود را به زور در جاهایی که خوب به نظر نمیرسند اعمال کنید.
اضافه کردن دکمه فراخوان عمل برای صفحات فروش آنلاین
اگر میخواهید محصول یا خدمات آموزش مجازی بفروشید، هوشمندانه است که یک دکمه فراخوان عمل هم جایی در صفحه خود اضافه کنید.
مخصوصاً در مواقعی که دارید صفحه اصلی طراحی میکنید که ممکن است تنها صفحهای باشد که یک کاربر میبیند. مثل طرحهای یکصفحهای.
به عنوان نمونه Hero Icons فقط دو دکمه فرخوان عمل در نیمه بالای صفحه دارد بدون هیچ پیوند ناوشی دیگری.
متن تمیز، آیکونهای ساده و یک طراحی خیلی صاف. اما بدون چیزی که مانع آن شود که کاربران به جاهای دیگر سایت بروند.
که البته اشکالی ندارد.
چون هدف شما در این نوع صفحه این است که تشویق به تبدیل کنید. میتوانید این «تبدیل» را ثبت نام، خرید، ارسال ایمیل یا هر چیزی مانند آن حساب کنید. خیلی مهم نیست چه باشد.
اگر دارید به هدف خود میرسید، پس در مسیر درست قرار دارید.
صفحه اصلی افزونه Sketch Confetti نمونه دیگری از یک دکمه فراخوان عمل خیلی تمیز دارد.
این سایت از یک پسزمینه صورتی روشن درست زیر یک ویدیوی نمونه برای جلب توجه استفاده میکنید.
تنها ایراد من در اینجا مکان دکمه است. وقتی خواستار عمل از جانب کاربر هستید باید دکمه فراخوان عمل را در نیمه بالای صفحه قرار دهید. مخصوصاً در آرایش یکصفحهای.
اندکی درباره روشهای رایج طراحی دکمه فراخوان عمل تحقیق کنید و ببینید چه چیزی میتوانید از آن یاد بگیرید.
متوجه میشوید که با فراخوان عملهای مهم انتخاب قلم، اندازه قلم، مکان و رنگ همگی نقش بسیار بزرگی ایفا میکنند.
به عنوان نمونه، Midnight Sketch یک افزونه Sketch دیگر با آرایش یکصفحهای زیبا است. دکمههای فراخوان عمل روشن و درست توی صورت کاربر هستند.
این دکمههای فراخوان عمل کاربر را ترغیب به این میکنند که بلافاصله پس از دیدن روی آنها کلیک کنند.
انیمیشنهای صفحه به هنگام اسکرول کردن
بر اساس عنوان این بخش شاید فکر کنید اینها همان انیمیشنهای ناوش هستند. اما در واقع این انیمیشنها فرق دارند و واقعاً جلوه زیبایی ایجاد میکنند.
میتوانید به آسانی اجزایی به صفحه اضافه کنید که به هنگم اسکرول کردن به حرکت در میآیند و تغییر شکل میدهند. برای آن که این را بهتر بفهمید بهتر است یک نمونه را مشاهده کنید پس این صفحه را ببینید.
سایت Toggl دارای اپ زمان سنج خود است و صفحه اصلی آن عالی است.
همانطور که به پایین اسکرول کنید میبینید که اجزای مختلف صفحه به همراه انیمیشن ظاهر میشوند. به راحتی قابل تماشا هستند بنابراین خیلی سریع یا خیلی کند حرکت نمیکنند اما به طور واضح حرکت میکنند.
هدف از آنها این است که هنگامی که در حرکت هستند توجه کاربر را به خود جذب کنند و به این ترتیب به محتوای صفحهمان پویایی ببخشند.
این روش بهتر با تصاویر گرافیکی و بخشهای مختلف صفحه کار میکند، مخصوصاً بخشهای متناوب در صفحه که در بخش بعدی این مقاله بیشتر به آنها خواهم پرداخت.
صفحه اصلی Yarn App هم در بخشهای پایینیاش از این نوع انیمیشنها استفاده میکند.
این جلوه دیداری رفتار یا کارکرد صفحه را چندان تغییر نمیدهد. این روش فقط جنبه حسی دارد و باعث میشود راحتتر به چیزها نگاه کرد.
آیا این روش برای هر وبسایتی خوب است؟ قطعاً نه.
اکثراً این روش بیشتر با صفحاتی کار میکند که محتوای کمتری دارند که همانطور که پایین اسکرول میکنید به همراه یک انیمیشن ظاهر میشوند.
بهترین نمونه برای نشان دادن این نوع صفحه One Big Tweet است.
هر بخشی از صفحه از انیمیشنی متفاوت استفاده میکند اما هیچ پاراگراف بزرگ یا توضیحات خیلی پیچیده ندارد.
در گوشه سمت چپ بالای صفحه یک نوار ناوشی با اسکول خودکار که قبلاً ذکر کردم وجود دارد. بدین ترتیب این صفحه دارد این روش را به خوبی به کار میبرد.
این احتمالا یکی از بهترین نمونههای طراحی یکصفحهای است که تجربه کاربری را از همه چیز بالاتر در نظر میگیرد.
در هنگام طراحی اول از همه کاربر را در نظر بگیرید. بعد به جنبه حسی فکر کنید. این یکی از کلیدیترین نکات درباره آرایش یکصفحهای است.
تقسیم کردن صفحه به بخشهای مختلف
من این را قبلاً هنگام بحث درباره نوار ناوشی اسکرولی در طراحی یکصفحهای هم ذکر کردم. اما باید با جزئیات بیشتر نیز به این موضوع پرداخته شود.
وقتی آرایش یکصفحهای را طراحی میکنید باید محتویات صفحه را بخشبندی کنید. صفحه را با استفاده از رنگهای پسزمینه، استایلهای عنوان، آیکونها و جداکنندههای مختلف و چیزهای دیگر به چند بخش تقسیم کنید.
این به کاربران کمک میکند سریعتر و به آسانی بیشتر و بدون هیچ مشکلی از محتویات صفحه استفاده کنند.
بخشهای این صفحه برای ابزار رابط کاربری iOS 11 ظریف اما محسوس هستند.
همه بخشها استایلهای متفاوت عنوان و اندازههای متناوب تصاویر دارند تا یک سلسلهمراتب دیداری ایجاد کنند.
پایینتر در صفحه بخشی میبینید که رنگها و الگوهای پسزمینه متفاوتی دارد. چیز بسیار چشمگیری ندارد اما جلب توجه میکند.
معمولاً من بیشتر رنگهای پسزمینه متناوب را میپسندم.
حاوی نکاتی درباره کار با فوتوشاپ است برای افرادی که فوتوشاپ بلد نیستند.
پسزمینهها بین تاریک و روشن عوض میشوند با رنگهای متناوب بین آنها. برای کنتراست بالا عالی است و برای کسانی که نمیدانند چطور بخشهای صفحه را تقسیم کنند یک طراحی خوب است.
اما میتوانید با استفاده از رنگهای روشنتر، الگوهای مختلف یا حتی تصاویر بزرگتر یک صفحه رنگارنگتر بسازید.
به عنوان نمونه این صفحه اصلی را که توسط BARREL ساخته شده است، در نظر میکنید.
علاوه بر این صفحه را به چند بخش نیز تقسیم میکند اما از روشی کاملاً متفاوت برای این کار استفاده میکند. این شامل پسزمینهها، رنگها، آیکونها، و تصاویر بسیار میشود.
شما میتوانید این را تقریباً روی هر صفحهای به کار ببرید و نتایج عالی دریافت کنید.
نکته اصلی این نوع طراحی تناسب رنگها با چزئیات صفحه است. شاید در ابتدا سخت به نظر برسد اما هر چه به طور آزمایشی طراحی کنید یاد میگیرید.
این به این معناست که تنوع زیادی در تصاویر، محتوا و عناوین یافته میشود که همگی در یک طرح یک صفحهای قرار داده شدهاند. جلوه خیلی زیبایی است اگر بتوانید آن را با پروژه خود ادغام کنید.
نکات اضافی
اینها فقط برخی از روشهایی هستند که دیدهام در آرایشهای یکصفحهای به کار برده شدهاند. این مقاله شامل تمام روشهای طراحی وبسایتهای یکصفحهای نیست.
با روشهای مختلف دیگر نیز آزمایش کنید.
هیچ دو وبسایتی عین هم نیستند و امکان آزمایش وجود دارد. طرحهای یکصفحهای دیگر را نیز که دارای چیزهای مشابهی که شما دوست دارید، بررسی کنید و آنها را با هم مخلوط کنید تا یک پروژه طراحی سایت اختصاصی به فرد و عالی بسازید.