مهم نیست که چقدر تخصص طراحی دارید، یک وب سایت جدید مانند صفحه خالی یک نویسنده است. کارهای زیادی وجود دارد که می توانید انجام دهید که حتی شروع کردن به آن آسان نیست. بنابراین، قبل از اینکه Lorem Ipsum را امتحان کنید، این 10 قانون طراحی وب را بخوانید. حتی اگر دقیقاً بدانید که چه می خواهید، ممکن است در این دستورالعمل ها چیز مفیدی بیابید. تا انتها بخوانید تا 3 مرحله قطعی در مورد نحوه طراحی یک وب سایت، از فاویکون ها تا فونت ها، نقشه های سایت و رنگ های هگزا را کشف کنید. و نکات تخصصی را برای تجارت الکترونیک، تجارت/آژانس دیجیتال مارکتینگ/شرکت، نمونه کارها و وبلاگ نویسی انتخاب کنید.
این دستورالعمل ها و نکات می تواند به شما کمک کند بازدیدکنندگان صفحه وب خود را طولانی تر نگه دارید و آنها را از نقطه A به نقطه B به طور یکپارچه برسانید.
قبل از اینکه شروع به ساختن وب سایت خود کنید (علاقه مندان برای دیدن فرآیند ساخت بدون خرابی به سمت پایین حرکت می کنند)، این 10 قانون را به عنوان دستورالعمل های مفیدی برای شیک تر کردن مشتریان وب سایت خود، بلکه کارآمدتر در نظر بگیرید.
قانون شماره 1: از بهم ریختگی پرهیز کنید
چیدمان ها می توانند با تصاویر، چیدمان های مختلف دکمه ها و چیدمان های به ظاهر نامنظم به هم ریخته به نظر برسند. یک چیدمان به هم ریخته همچنین بازدیدکنندگان را از رفتن به مرحله بعدی، چه بازدید از یک صفحه محتوا یا افزودن چیزی به سبد خرید خود، باز می دارد. به یاد داشته باشید که فضای سفید دوست شماست.
قانون شماره 2: طرح را در بالای تاشو اولویت بندی کنید
"Fold" به معنای قسمتی از حاشیه زیر مرورگر است. دسترسی به هر محتوایی که در زیر صفحه قرار دارد فقط با پیمایش امکان پذیر است. یعنی کاربر باید از ابتدا اسکرول کند! همیشه مطالب و اطلاعات کلیدی را بالای خط تاشو قرار دهید.
برای سایت‌های تلفن همراه، چین‌ها کوتاه‌تر هستند و فضای کمتری برای پیمایش بازدیدکنندگان باقی می‌ماند. مزایا را در نظر بگیرید.
قانون شماره 3: قانون هیک هیمن را به خاطر بسپارید
قانون هیک هیمن بیان می کند که با افزایش گزینه ها، تصمیم گیری فرد نیز به زمان بیشتری نیاز دارد. انتخاب های خود را در هر مرحله از تجربه کاربری محدود کنید تا توجه بازدیدکنندگان شما به جای دیگری از سئو وب منحرف نشود. یک دکمه فراخوان به عمل بسیار موثرتر از گزینه های منوی طولانی است.
قانون شماره 4: پیمایش روی کلیک را تشویق کنید
پیمایش یکپارچه طرح‌بندی‌های وب را به هم متصل می‌کند. در مقایسه با پیمایش و کلیک کردن، کلیک کردن زمان زیادی طول می کشد تا بارگیری شود تا زمانی که آن را تجربه کنید. اسکرول کردن در موبایل نیز بصری تر است.
بهتر از همه، پیمایش روان‌تر از کلیک کردن است، بنابراین کاربران مدت بیشتری در سایت شما می‌مانند. یک مطالعه اخیر توسط Crazy Egg نشان داد که تغییر از کلیک به پیمایش نرخ تبدیل را تا 36٪ افزایش می دهد .
قانون شماره 5: از عکس های واقعی و طبیعی استفاده کنید
آیا می دانستید که بازدیدکنندگان وب سایت از عکس های مصنوعی متنفرند؟ عکس‌های مدل‌های بیش از حد ژست ممکن است در یک سایت شرکتی خوب به نظر برسند، اما بازدیدکنندگان احساس می‌کنند با تصاویر معتبرتری از شما یا اعضای تیمتان مرتبط هستند. تصاویر استوک طبیعی که با زندگی صریح هستند می توانند جایگزین خوبی باشند. در واقع، ما بهترین دسته‌بندی تصاویر استوک را برای وب‌سایت‌ها انتخاب کرده‌ایم تا انتخاب سبکی متناسب با برند شما را برای شما آسان کنیم .
قانون شماره 6: از نشانه های بصری استفاده کنید
استفاده از تصویر یا گرافیکی که مستقیماً برای کاربر است، مانند تصویر شخصی که به دکمه‌ای نگاه می‌کند یا فلشی که به یک گزینه منو اشاره می‌کند، یک تکنیک مطمئن برای وادار کردن بازدیدکنندگان شما به اقدامات مهم است. آیا شما صریح هستید؟ شاید اثر؟ مطمئن
قانون شماره 7: خوانایی بر شیک بودن حروف الفبا ارجحیت دارد
آیا تا به حال از یک وب سایت فوق العاده شیک بازدید کرده اید که در آن باید گردن خود را فشار دهید تا فونت های سریف مایل را بخوانید که کمتر قابل خواندن هستند؟ هزاران فونت وب زیبا وجود دارد، اما اکثر آنها برای وب سایت ها مناسب نیستند.
متن خوانا و آسان برای خواندن حواس شما را پرت نمی کند و خواندن اطلاعات کلیدی در اندازه های مختلف صفحه نمایش آسان است. شکل‌های نمایشگر شفاف‌تر و هندسی‌تر بدون سری‌تر یا پررنگ‌تر برای وب‌سایت‌ها بهتر از سریف یا ایتالیک کار می‌کنند.
قانون شماره 8: روانشناسی رنگ
رنگ یک راه فوری برای دادن حالت و شخصیت خاصی به طرح وب سایت شما است. علاوه بر این، انتخاب رنگ های مناسب می تواند بر نحوه پاسخ کاربران به سایت شما تأثیر بگذارد. آیا می دانستید که رنگ نارنجی می تواند ارزش خوبی را به مشتریان ارائه دهد ؟ یا اینکه رنگ آبی با هوش و تخیل مرتبط است (مناسب برای آژانس های خلاق)؟ در مورد روانشناسی رنگ ها بخوانید و رنگ هایی را انتخاب کنید که تاثیر مناسبی بر بازدیدکنندگان شما بگذارد.
قانون نهم: ابتدا صفحاتی را برای موبایل طراحی کنید
بیشتر طراحان وب در ابتدا تصور می‌کنند که وب‌سایت‌هایشان روی یک دسک‌تاپ متناسب دیده می‌شود، اما در واقعیت، حدود نیمی از جلسات مرور در سراسر جهان در دستگاه‌های تلفن همراه انجام می‌شود. در برخی از بخش ها، درصد کاربران تلفن همراه حتی بیشتر است.
بسیاری از طراحان وب حرفه ای به شما توصیه می کنند که ابتدا طرح بندی وب سایت خود را با در نظر گرفتن موبایل طراحی کنید، اما باید حداقل به ایجاد سایت های موثر و زیبا در دستگاه های مختلف توجه کنید.
قانون شماره 10: طراحی برای همه
سازمان بهداشت جهانی (WHO) تخمین می زند که حداقل 2.2 میلیارد نفر در سراسر جهان نابینا یا کم بینا هستند. این بدان معناست که 28.5 درصد از جمعیت جهان به نوعی اختلال بینایی دارند. افزایش کنتراست رنگ در چیدمان، مانند استفاده از متن سیاه با پس‌زمینه سفید، و استفاده از سان‌سریف‌های سایز بزرگ، دو راه ساده برای سهولت دسترسی و جامع‌تر کردن طراحی وبسایت شما هستند.
چگونه یک وب سایت طراحی کنیم: راهنمای عملی برای مبتدیان
اگر این 10 نکته آسان برای ایجاد طرح بندی های زیبای وب سایت را در نظر داشته باشید، آماده شروع طراحی وب سایت خود هستید.
ساختن یک وب سایت می تواند سرگرم کننده باشد، اما اگر ندانید از کجا شروع کنید می تواند کمی خسته کننده باشد. در اینجا، فرآیند محکم طراحی یک وب سایت را از نقطه نظر عملی کشف کنید.
با در نظر گرفتن این موضوع، هر طراحی وب سایت حرفه ای را برنامه ریزی کنید. این صفحه را نشانه گذاری کنید و به سرعت شروع به ساخت وب سایت خود کنید.
مرحله 1: هویت سایت خود را بسازید
هر سایتی به یک لحن و سبک یکپارچه نیاز دارد که به عنوان نوعی هویت برند در تمام صفحات سایت عمل کند. این نه تنها باعث می‌شود سایت شما مرتب و حرفه‌ای به نظر برسد، بلکه به بازدیدکنندگان شما اجازه می‌دهد تا در حین حرکت در سایت شما تعامل داشته باشند. اگر صفحات وب سایت به طور محسوسی با یکدیگر متفاوت باشند، بر تجربه کاربر تأثیر منفی می گذارد و زمان ماندن را کاهش می دهد. بنابراین، شما باید زمانی را صرف اصلاح هویت کلی سایت خود کنید.
هویت سایت موثر شامل موارد زیر است:
نماد یک تصویر گرافیکی است که وب سایتی را مشخص می کند که برای ویجت ها و موارد دلخواه در WordPress.com یا برای نمادهای صفحه شروع برنامه هنگام ذخیره مرورگر در تلفن همراه استفاده می شود. اندازه کوچک یک نماد، یک فاویکون در کنار عنوان وب سایت در برگه مرورگر ظاهر می شود.
نمادهای سایت حداقل 512 در 512 پیکسل مربع هستند و معمولاً به عنوان فایل های PNG، GIF یا ICO ذخیره می شوند. فاویکون ها می توانند کوچک باشند، اما باید حداقل 196 در 196 پیکسل برای مشخصات با وضوح بالا مورد استفاده کروم در دستگاه های اندرویدی باشند.
مهم است که آیکون های سایت خود را در اندازه و فرمت فایل صحیح آپلود کنید تا به راحتی ظاهر شوند. معمولاً موضوعی که با آن کار می کنید آموزنده است، اما برای تصاویر کوچک، بهتر است آنها را به صورت PNG آپلود کنید. قوانین نمایش بسیاری از تصاویر وب را در این مقاله در فرمت های رایج فایل بیاموزید.
لوگو یک نماد سایت عمومی تر است. به عنوان مثال، یک لوگو ممکن است شامل متنی در گرافیک باشد، مانند نام تجاری، در حالی که نماد سایت از یک گرافیک بصری ساده استفاده می کند.
لوگوها باید اندازه مناسبی داشته باشند تا به طور موثر بر روی دستگاه های مختلف کار کنند. مهمترین چیزی که باید از آن آگاه بود این است که برخی از دستگاه ها مانند مک و سایر محصولات اپل از فناوری Retina Display استفاده می کنند . این فناوری نقاط بیشتری را در هر اینچ نسبت به سایر دستگاه‌های قدیمی نشان می‌دهد، حدود 300 DPI، و در نتیجه تصاویر تمیزتر و واضح‌تری به نمایش می‌گذارد.
ساده ترین راه برای اینکه لوگوی خود را در یک صفحه نمایش استاندارد به خوبی نمایشگر رتینا نشان دهید، دو برابر کردن اندازه آرم رتینا است. به عنوان مثال، اگر سیستم مدیریت محتوای وب سایت شما از شما می خواهد که یک لوگوی 100 در 100 پیکسل بارگذاری کنید، باید یک نسخه 200 در 200 پیکسل را آپلود کنید.
اگر در حال راه اندازی یک برند یا تجارت جدید هستید، این روش را برای بهینه سازی لوگوی سایت خود در شیراز برای طراحی وب سایت واکنش گرا امتحان کنید. می توانید لوگوی خود را در هر نقطه از وب ظاهر کنید (و چاپ کنید)، که هر کدام به شکل و پیچیدگی متفاوتی نیاز دارند. یکی از گزینه ها این است که یک لوگوی انعطاف پذیر با فونت برند خود برای تغییرات لوگو برای همه فرم های رسانه ایجاد کنید.
نمونه ای از لوگوی انعطاف پذیر در آموزش شاتر استاکمهم نیست که چگونه لوگوی خود را طراحی می کنید، مهم است که بدانید چگونه فایل های خود را به درستی ذخیره کنید. آرم‌ها باید همیشه به‌عنوان بردار ذخیره شوند تا بتوان آنها را مجدداً تغییر داد، مانند تغییر اندازه یا تغییر رنگ . وقتی آماده آپلود در وب سایت خود هستید، مطمئن شوید که فایل لوگوی خود را به صورت PNG ذخیره کرده اید تا واضح و بدون شکستگی پیکسل به نظر برسد.
فونت ها و فونت های وبدر طراحی چاپی، تایپ‌فیس‌های وبسایت از بسیاری از دستورالعمل‌های مشابه پیروی می‌کنند. ایجاد یک سلسله مراتب در وب سایت شما مهم است و این سلسله مراتب تگ های H شما خواهد بود . "H" مخفف "Header"، H1 برای مهم ترین و بزرگترین سبک متن، پس از H2، بزرگ ترین و مهم ترین بعدی، و به همین ترتیب از طریق H6.
مهم نیست که اندازه H را روی چه اندازه ای تنظیم می کنید، باید فونت های وب را پیدا کنید که خوانا باشند. در نتیجه، اکثر طراحان وب، sans serif های بسیار واضح را برای سرفصل های کوچک ترجیح می دهند، در حالی که سریف ها، سبک های نمایش یا ایتالیک را فقط برای متن H1 یا H2 امتحان می کنند.
همچنین می توانید فونت های وب را در وب سایت خود نصب کنید. این بدان معناست که بازدیدکنندگان هنگام بازدید از سایت شما فونت ها را دانلود می کنند و سایت شما می تواند سبک حروف را سفارشی کند. رتبه سایت در گوگل و انواع فونت های وب رایگان و منبع باز را ارائه می دهد و بسیاری از فونت های وب رایگان و پولی بیشتری را می توانید در استراتژی فروشگاه فونت پیدا کنید. مقاله ما را در مورد 101 بهترین فونت رایگان موجود در وب که توسط Shutterstock ویرایش شده است را بررسی کنید تا فونت های مورد علاقه خود را کشف کنید.
می توان ادعا کرد که رسانه چاپی مهمتر از وب سایت برای تمرکز بر خوانایی بیشتر متن است. این به این دلیل است که دستگاه های تلفن همراه کوچک هستند و میزان نور ساطع شده از صفحه نمایش، خواندن آنها را برای خوانندگان کم بینا دشوار می کند. همچنین می‌توانید با استفاده از فونت‌های آسان‌خوان، مانند sans serif، با افزایش اندازه فونت و افزایش کنتراست رنگ بین رنگ فونت و پس‌زمینه، خوانایی را افزایش دهید.
ما فونت‌های نمایش وب را در مجموعه Shutterstock از بهترین فونت‌ها و ترکیب‌های فونت برای طراحی وبسایت پوشش داده‌ایم، بنابراین می‌توانید به راحتی فونت‌های هدر و بدنه را برای قرار دادن هویت خود انتخاب کنید.
گاهی اوقات می توان رنگ را تا پایان فرآیند ایجاد نادیده گرفت. با این حال، رنگ ابزار قدرتمندی است که نه تنها می تواند صفحات وب سایت را متحد کند، بلکه بر روحیه و درک کاربر نیز تأثیر می گذارد.
در وب سایت، رنگ ها به عنوان کدهای HEX تعریف می شوند. کدهای HEX نسخه های کدگذاری شده رنگ های RGB در قالب #RRGGBB (#قرمزسبزآبی) هستند. (اگر واقعا کنجکاو هستید، یاد بگیرید که کدهای HEX چگونه کار می کنند ) نمی دانید چگونه نمونه های CMYK یا RGB را به HEX تبدیل کنید؟ شما به راحتی می توانید کدهای رنگ را در کدهای رنگی HTML با استفاده از ابزار انتخابگر رنگ و نمودار رنگ آنلاین ما پیدا کرده و تغییر دهید.
شاید قبلاً یک پالت رنگ مارک دار داشته باشید. اما اگر اینطور نیست، می توانید از نظریه روانشناسی رنگ برای کمک به تعیین رنگ استفاده کنید. انتخاب پالت رنگ به عنوان یک راه بالقوه مهم برای نگه داشتن کاربران در یک صفحه طولانی تر عمل می کند و رنگ های مختلف تأثیر روانی قدرتمندی بر بینندگان دارند.
طرح این سایت دارای انتخاب های رنگی جالبی برای جلب توجه کاربر است. مشارکت کننده تصویر popovartem.com .
رنگ های برند مانند رنگ لوگو را به خاطر بسپارید. لازم نیست فقط یک رنگ در وب سایت شما باشد. در واقع، اگر لوگوی شما نارنجی و زرد روشن است، ممکن است بخواهید از آنها فقط به عنوان رنگ های برجسته استفاده کنید. پس زمینه زرد روشن چشم بیننده را خسته می کند و خواندن تمام متن را دشوار می کند. مانند تایپوگرافی، انتخاب رنگ بر خوانایی سایت شما تأثیر می گذارد و تأثیر زیادی بر تجربه کاربر دارد
برای برخی از پالت‌های رنگی آماده وب، طرح‌های رنگی دست‌چین شده ما را برای وب‌سایت‌ها بررسی کنید . در اینجا شما نه تنها می توانید عناصر UX را در نظر بگیرید، بلکه ترکیب های خاصی را نیز دریافت کنید که سایت شما را متمایز می کند.
مرحله 2: صفحه اصلی سایت خود را بسازید
صفحه اصلی یا صفحه فرود، بخش مرکزی یک وب سایت است. صفحه اصلی شما معمولاً اولین جایی است که بازدیدکنندگان از یک موتور جستجو می‌آیند، این صفحه اصلی در نقشه سایت شما است و بازدیدکنندگان اغلب پس از بازدید از صفحه شما به آنجا باز می‌گردند. صفحه اصلی شما باید لحن سبک را برای بقیه بک لینک های وب سایت شما تنظیم کند و باید از فراخوانی برای اقدام مانند دکمه ها، نشانه های بصری مانند فلش ها و گزینه های منو استفاده کند تا کاربران را به صفحات مختلف هدایت کند .
یک قانون سرانگشتی خوب برای صفحه اصلی شما ممکن است پیروی از قانون Hick Hyman باشد (قانون شماره 3 در بالا را ببینید)، که گزینه های محدودی در مورد نحوه ادامه دادن به کاربران ارائه می دهد.
برای مثال، ممکن است بخواهید خوانندگان شما به پایین اسکرول کنند. برای انجام این کار، فلش بالای صفحه یا call-to-action می تواند به عنوان یک درخواست کننده عمل کند. آیا می خواهید کلیک ها را به صفحات مختلف هدایت کنید؟ یک دکمه مهم یا گزینه منو باید مرکز چیدمان شما باشد. در یک سایت جستجو محور، نوار جستجو باید واضح، برجسته و در مرکز صفحه باشد.
طراحی سایت از دکمه ها و فلش های رنگی روشن برای هدایت تجربه کاربر استفاده می کند. مشارکت کننده تصویر everst .
تصویر قهرمان تصویری است که بر صفحه فرود شما غالب است. با این حال، در صورت تمایل می توانید این تصاویر را با تایپوگرافی، انیمیشن ها یا ویدیوهای جذاب جایگزین کنید. عملکرد این تصویر این است که به کاربران حسی فوری از سایت بدهد و تجربه کاربری فراگیرتری را تشویق کند. شما همچنین می توانید هویت بصری سایت خود را با استفاده از یک طرح رنگ یا سبک خاص تقویت کنید.
از تصاویر قهرمان نیز می توان به عنوان نشانه های بصری هوشمندانه استفاده کرد. یک رنگ یا الگو در یک منطقه خاص می تواند چشم را به سمت یک دکمه هدایت کند، در حالی که یک پرتره که با وضوح بیشتری به یک عنصر خاص در یک چیدمان نگاه می کند یا به آن اشاره می کند، می تواند کاربران را به سمت خود بکشاند.
شما یک طرح بندی برای صفحه اصلی خود ایجاد کرده اید، و همچنین دستورالعمل های اصلی مورد نیاز کاربران را در صفحه اصلی خود درک کرده اید. اکنون باید شروع به ایجاد نقشه سایت در محل کنیم. هر وب سایتی متفاوت است و اهداف مختلفی را دنبال می کند. اما به طور کلی صفحات اصلی وجود دارد که هر سایتی به آنها نیاز دارد. آن صفحات کلیدی عبارتند از:
صفحات دسته بندی (صفحات پر شده با پست هایی از یک دسته خاص ، به عنوان مثال "لباس مردانه" در یک سایت لباس آنلاین
هر یک از این صفحات را طوری طراحی کنید که عناصر مختلف را در خود جای دهد. صفحات دسته‌بندی حاوی پیش‌نمایش‌های پست‌های مختلف هستند، بنابراین باید بر اساس طرح‌بندی شبکه‌ای به سبک Pinterest با ستون‌ها و ردیف‌های زیاد باشد. صفحات تماس ممکن است نیاز به یک نقشه، شماره تلفن و آدرس دقیق داشته باشند. ممکن است نیاز باشد که صفحات مربوط به مشخصات شامل تصاویر نمایه و بیوگرافی اعضای تیم باشد.
طراحان وب از وایرفریم برای مطالعه نحوه چیدمان عناصر در صفحات مختلف یک سایت استفاده می کنند. Wireframe یک راهنمای بصری برای چارچوبی است که یک صفحه وب پشت آن ساخته شده است. مدل ها را می توان با استفاده از نرم افزار Wireframe مانند Adobe XD یا Moqups ایجاد کرد. به سادگی وایرفریم های خود را با استفاده از نرم افزارهای برداری مانند Adobe Illustrator بکشید. به هر حال، اگر یک Wireframe ایجاد کنید، به عنوان یک طرح اولیه برای طرح وب سایت شما عمل می کند. همچنین ذکر ابعاد عناصر، مانند تصاویر و ستون‌ها در نقشه‌ها، برای مرجع در حین ساخت سایت، ممکن است مفید باشد.
هنگام ساخت وایرفریم، مهم است که در مرحله اول به اهداف تجاری سایت در حال ساخت و در مرحله دوم به طرح صفحه اصلی اشاره کنید. هر دوی این فرآیندها به شما کمک می کند تا در مورد نحوه چیدمان و استایل صفحات دیگر تصمیم بگیرید. ویژگی هایی مانند تایپ فیس، سبک های تصویر و طرح های رنگی را در سراسر صفحات ثابت نگه دارید. به این ترتیب طراحی نهایی وب سایت می تواند سبکی یکپارچه و ثابت داشته باشد.
6 نکته برای ساخت وایرفریم وب سایت
وقتی صحبت از راهنمای تصویر می شود، تصاویر قهرمانی را که برای صفحه اصلی خود انتخاب کرده اید در نظر بگیرید. آیا تصویر قهرمان دارای ویژگی هایی است که همه تصاویر دیگر باید از آن پیروی کنند، مانند طرح رنگی سیاه و سفید یا سبک پرتره؟
هنگامی که تصویر خود را انتخاب و ویرایش کردید، باید اندازه آن را برای استفاده در وب تغییر دهید. در Adobe Photoshop ، به File > Export > Save for Web بروید تا تصویر را با فرمت JPEG، GIF یا PNG با اندازه پیکسل خاص ذخیره کنید . اگر نمی‌توانید از نرم‌افزار ویرایش عکس استفاده کنید، Bulk Resize Photos آنلاین ابزاری مفید برای تغییر اندازه و فشرده‌سازی تصاویر به صورت انبوه است.
