طراحی وب سایت
طراحی وب سایت فرایند برنامه ریزی، مفهوم سازی و تنظیم محتوای مورد نظر برای اینترنت است. طراحی وب مدرن فراتر از ظاهر (زیبایی شناسی) است و شامل نحوه کار (عملکرد) آن می باشد. همچنین طراحی وب تنها محدود به وب سایت ها نمی باشد زیرا شامل موارد دیگری مانند اپلیکیشن های وب، اپلیکیشن های تلفن همراه و طراحی رابط کاربری است.
عناصر طراحی وب
هنگام طراحی وب سایت، لازم است ظاهر و عملکرد سایت را با هم در نظر بگیرید. ادغام این عناصر در طراحی، صرف نظر از اندازه گیری عملکرد، به به حداکثر رساندن عملکرد سایت کمک خواهد کرد. به عنوان مثال، آیا می دانید که به دلیل بهینه سازی موتور جستجو، طراحی وب می تواند تأثیر زیادی در عملکرد شما در موتورهای جستجوگر مانند گوگل داشته باشد؟
عناصر بصری
در ادامه یک مرور اجمالی از عناصری که باید برای اطمینان از ظاهر خوب وب سایت در طراحی خود در نظر بگیرید، آورده شده است.
متن
اصولاً ظاهر یک وب سایت و متن های موجود در آن به هم وابسته می باشند. این دو هرگز نباید جدا از هم تلقی شوند. قرار دادن طراحان و نویسندگان محتوا در کنار یکدیگر، به جای سری کار کردن آنها، می تواند ضامن یک طراحی قدرتمند و حرفه ای باشد.
فونت
هنگام طراحی وب سایت، ضروری است فونت هایی را که به راحتی خوانا هستند انتخاب کنید. این امر مکمل طراحی وب سایت است. ابزاری مانند Font Combinator Canva می تواند به شما کمک کند که فونت مناسبی را برای سایت خود پیدا کنید. همچنین ابزارهای طراحی وب مانند PageCloud حتی چندین فونت را نیز در برنامه خود دارند.
رنگ ها
رنگ ها یکی از مهمترین عناصری هستند که باید هنگام طراحی وب سایت در نظر بگیرید. به خاطر داشته باشید که در اینجا تصورات غلط زیادی درباره روانشناسی رنگ وجود دارد. هنگام انتخاب رنگ برای سایت خود، مهم است که بر یکسان سازی رنگ های وب سایت با برند خود و پیامی که می خواهید منتقل کنید، تمرکز کنید.
چیدمان (Layout)
نحوه تصمیم گیری برای تنظیم و چیدمان محتوای شما، تأثیر چشمگیری در ظاهر و عملکرد سایت شما خواهد داشت. اگرچه در مورد چیدمان وب سایت هیچ قانون خاصی وجود ندارد، اما قطعاً اصولی وجود دارد که باید از آنها پیروی کنید. اگر نمی دانید چگونه کد بنویسید، درک محدودیت های ابزارهای مختلف طراحی وب سایت ضروری است، بنابراین هنگام طراحی خود دچار مشکل نمی شوید.
شکل ها
استفاده از عناصر گرافیکی در طراحی وب واقعاً طی چند سال گذشته رونق پیدا کرده است. ترکیب رنگ ها و اشکال زیبا می تواند برای دستیابی به موارد زیادی از جمله جلب توجه بازدید کنندگان سایت شما به کار رود. بزرگترین چالش با این روند، مشکلاتی است که هنگام جستجو برای پیاده سازی طرح بدون استفاده از کد ایجاد می شود.
فاصله (Spacing)
در بین هر عنصر در طراحی شما فضایی وجود دارد، از جمله: تصاویر، پاراگراف ها، خطوط و…
حتی حروف نیز فاصله دارند!
به عنوان یک قاعده کلی، داشتن فضای زیاد بهتر از جمع شدن متن در یک ناحیه می باشد. مفهوم فضای خالی قطعاً مورد توجه طراحان وب مدرن است.
تصاویر و نماد ها
طرح های شگفت انگیز می توانند فقط در چند ثانیه اطلاعات زیادی را به شما انتقال دهند. یکی از راه های تحقق این امر استفاده از تصاویر و نمادهای قدرتمند است. جستجوی سریع گوگل برای تصاویر یا نمادها، هزاران گزینه را در اختیار شما قرار می دهد. برای کمک به ساده کردن جستجوی خود، در ادامه چند گزینه مورد علاقه خود را بیان کرده ایم:
تصاویر و نمادهای رایگان:
- Pexal
- Unspalsh
- IconMonstr
تصاویر و نمادهای حرفه ای
- Shutterstock
فیلم ها
فیلم ها روند مجبوب در بین طراحان وب هستند. در صورت استفاده صحیح، آنها به بازدید کنندگان وب سایت شما کمک می کنند تا چیزی را تجربه کنند که به راحتی با کلمات یا تصاویر قابل توصیف نیست. نکته ای که باید در نظر داشته باشید این است که فیلم های چشم نواز می توانند ممکن است تمرکز افراد را به هم بزنند و هرگز نباید با محتوای شما رقابت کنند.
عناصر عملکردی
جستجو
جستجوی داخلی وب سایت شما یکی از مؤلفه های اصلی است که تعیین می کند وب سایت شما در واقع به خوبی کار می کند یا خیر. بسته به مخاطب، جستجوی وب سایت شما می تواند چندین هدف را ارائه دهد. همچنین این امر کمک می کند که بازدید کنندگانی که برای اولین بار به وب سایت شما مراجعه می کنند، هنگام بازدید از بخش های متفاوت سایت، متوجه خدمات و سرویس های شما بشوند.
سرعت
هیچ کس وب سایت های کند را دوست ندارد.
صرف نظر از اینکه طراحی وب سایت شما چقدر زیباست، اگر در مدت زمان معقول بارگیری نشود، اهداف شما را تحقق نمی بخشد. اگرچه سازندگان برتر سایت به طور معمول محتوای شما را فشرده می کنند تا زمان بارگیری سایت را کاهش دهند، اما هیچ تضمینی برای این امر وجود ندارد. اطمینان حاصل کنید که ابزاری که انتخاب می کنید عملکرد بهینه داشته باشد.
تصاوير متحرك (انیمیشن)
چندین تکنیک انیمیشن برای وب وجود دارد که می تواند به شما در طراحی طیف گسترده ای از کارها کمک کند، از جلب توجه کاربر تا دادن بازخورد در مورد تعامل های خاص با محتوا.
- اگر در طراحی وب تازه کار هستید، توصیه می کنیم ابتدا از انیمیشن های ساده استفاده کنید.
- انیمیشن های پیچیده به طور معمول نیاز به مداخلات توسعه دهنده دارند.
تعامل کاربر (User interaction)
بازدید کنندگان سایت شما بسته به نوع دستگاه خود چندین روش مختلف برای تعامل با وب سایت شما دارند.
- بهترین طرح ها همیشه این تعامل ها را ساده تر می کنند
- و این احساس را به کاربر می دهند که یک کنترل کامل در اختیار دارند.
در اینجا فقط چند مثال آورده شده است:
- هرگز صدا را به صورت خودکار پخش نکنید
- هرگز زیر متن خط نکشید مگر اینکه قابل کلیک باشد
- فرم های سازگار با موبایل ایجاد کنید
- از پاپ آپ خودداری کنید
ساختار سایت
ساختار وب سایت نقش مهمی در دو مورد زیر ایفا می کند:
- تجربه کاربر
- و سئو بازی
اگر افراد هنگام جستجو در سایت شما گمراه شوند، احتمالاً خزنده های وب (web crawlers) نیز با همین مشکل مواجه می شوند. اگرچه تعدادی سازندگان نقشه سایت (sitemap builders) رایگان به صورت آنلاین در دسترس هستند، اما در سایت های کوچک گاهی اوقات بهترین روش این است که صفحات خود را روی تخته سفید یا روی یک کاغذ طراحی کنید.
سازگاری با چند مرورگری (cross-browser) و چند دستگاه (cross-device)
یک طراحی عالی در همه دستگاه ها و مرورگرها (از جمله Internet Explorer) خوب به نظر می رسد. اگر سایت خود را از ابتدا طراحی می کنید، توصیه می کنیم
- از یک ابزار تست چند مرورگری استفاده کنید
- تا این روند خسته کننده سریع تر و کارآمدتر شود. از طرف دیگر،
اگر از یک پلتفرم ساخت وب سایت استفاده می کنید، تست چند مرورگری معمولاً توسط تیم توسعه شرکت پشتیبانی می شود و به شما امکان می دهد تا روی طراحی متمرکز شوید.
انواع طراحی وب سایت
اگرچه ممکن است مقالاتی را در محیط آنلاین مشاهده کرده باشید که در مورد سبک های طراحی وب سایت
- ثابت،
- استاتیک،
- دینامیک
- و غیره صحبت می کنند،
در جهان وابسته به موبایل امروز، تنها دو راه برای طراحی صحیح یک وب سایت وجود دارد:
- وب سایت های سازگار
- و واکنشگرا.
بهترین بخش این است که با ابزارهای طراحی مدرن، نیازی به دانستن نحوه کدگذاری برای ساختن وب سایت های خیره کننده که در همه دستگاه ها عالی به نظر برسد، نیست.
دانستن جوانب مثبت و منفی وب سایت های سازگار و واکنشگرا به شما کمک می کند تا تعیین کنید چه طراحی برای شما مناسب است.
وب سایت های سازگار (Adaptive)
طراحی وب سایت سازگار از دو یا چند نسخه از وب سایت استفاده می کند که برای اندازه های مختلف صفحه نمایش سفارش سازی شده اند.
وب سایت های سازگار می توانند براساس چگونگی تشخیص سایت برای نمایش نسخه، به دو دسته اصلی تقسیم شوند.
- سازگاری بر اساس نوع دستگاه
هنگامی که کاربر شما (با نام مستعار مشتری) به یک وب سایت وصل می شود، درخواست HTTP، زمینه ای به نام “کاربر عامل” را شامل می شود که سرور را از نوع دستگاه مورد نظر برای مشاهده صفحه مطلع می کند.
در اصل، این بدان معنی است که سایت می داند چه نسخه ای را برای نمایش (مثلاً دسک تاپ یا موبایل) نشان دهد. تنها مشكل این نوع طراحی این است كه اگر پنجره مرورگر را روی یك دسک تاپ کوچک کنید، صفحه سازگار نمی شود زیرا همچنان به نمایش کامل “نسخه دسک تاپ” می پردازد.
- سازگاری بر اساس عرض مرورگر (browser width)
به جای استفاده از “عامل کاربر”، وب سایت از سؤالات رسانه ها و نقاط توقف رسانه برای جابجایی بین نسخه ها استفاده می کند. بنابراین به جای داشتن نسخه های دسک تاپ، تبلت و موبایل، نسخه های 1080px ، 768 px و 480 px را دارید. علاوه بر ارائه انعطاف پذیری بیشتر هنگام طراحی، این رویکرد هنگام تغییر اندازه مرورگر شما در صفحه نمایش، ظاهری “واکنش گرا تر” ارائه می دهد.
نقاط قوت
با ویرایش آنچه می بینید چیزی است که دریافت می کنید (WYSIWYG) طراحی های سفارشی سریع تر و آسان تر ساخته می شوند؛ بدون ایجاد رمز عبور مرورگر و سازگاری متقابل دستگاه
نقاط ضعف
هنگام مشاهده در یک پنجره کوچک مرورگر بر روی دسک تاپ، این نوع وب سایت ها به صورت شکسته و نا مرتب دیده می شوند. این نوع محدودیت ها در نمایش فقط توسط سایت های واکنشگرا برطرف می شود.
وب سایت های واکنشگرا (Responsive)
وب سایت های واکنشگرا ترکیبی از شبکه های انعطاف پذیر (بر اساس درصد) با نقاط شکست (استفاده از سوالات رسانه ای) برای ایجاد ظاهر سفارشی در هر اندازه صفحه استفاده می کنند. برخلاف سایت های سازگار که فقط هنگام برخورد با نقطه شکست، سازگار می شوند، وب سایت های واکنشگرا به طور مداوم با توجه به اندازه صفحه تغییر می کنند.
نقاط قوت
- تجربه فوق العاده در هر اندازه صفحه، صرف نظر از نوع دستگاه
- سازندگان وب سایت پاسخگو به طور معمول حرفه ای هستند که باعث می شود شکستن طرح سخت شود.
- قالب های زیادی برای شروع در این نوع طراحی وجود دارد.
نقاط ضعف
برای اطمینان از کیفیت نیاز به طراحی و آزمایش گسترده ای دارد. همچنین بدون دستیابی به کد، طرح های سفارشی می توانند چالش برانگیز باشند.
توجه: وب سایت های سازگار می توانند حاوی عناصر واکنشگرا باشند. به عنوان مثال، گالری تصاویر می توانند کاملاً واکنشگرا ساخته شوند در حالی که بقیه سایت سازگار است.
گردآورنده: مهندس زهرا ترابی – تیم محتوا بلوباکس
بدون دیدگاه