اصول طراحی وب سایت

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

این ممکن است از منظر کسی که قبلاً با اصول اولیه راحت باشد صحیح باشد ، اما اگر عباراتی مانند "سیستم شبکه پاسخگو CSS" و "فونت های گوگل وب" برای شما بیگانه هستند ، پس از آن به دنیای ظاهرا "آه خیلی آسان" بروید. طراحی وب ممکن است هنوز هم یک پیشنهاد دلهره آور به نظر برسد.

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

1. سیستم های شبکه.

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

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

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

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

بعضی از محبوب ترین ها 960.gs ، Simple Grid و Golden Grid System هستند ، اما لیست گزینه های خوب واقعاً بسیار زیاد است و بعضی از آنها پیچیده تر از سایرین هستند. در اینجا مقاله خوبی از WebDesignerDepot برای شروع کار وجود دارد.

البته اگر احساس پرماجرائی دارید یا احساس می کنید پروژه شما یک راه حل واقعاً بی نظیر را طلب می کند ، به هر طریق ، خودتان را ایجاد کنید.

1.    سلسله مراتب بصری

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

با قرار دادن عناصر مهم ، مانند آرم ، فراخوانی برای اکشن یا تصویر کلیدی ، در محور محورهایی که انتظار می رود خواننده آن را اسکن کند ، صفحات وب خوبی در پاسخ به این الگوهای خواندن اندازه گیری شده ساخته می شوند. اینها معمولاً از "F" یا "Z" استفاده می کنند.

 طراحی فروشگاه اینترنتی در تبریز

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

2.    فونت های وب امن

در سال 2014 ، اصطلاح "فونت های وب ایمن" از قبل شبیه به آناکرون بودن است. در اوایل اینترنت ، مرورگرها تعداد بسیار محدودی از قلم ها را پشتیبانی می کردند - معمولاً فقط نسخه هایی که قبلاً در نرم افزار پردازش کلمه کاربران نصب شده بودند - و اگر از این موارد منحرف شوید ، برخی بازدید کنندگان فقط با دیدن نمادهای تصادفی از بین می روند.

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

خدمات فونت مبتنی بر هزینه شامل Typekit ، WebINK و Fontspring است. اگر کمی از طریق سرویس های رایگان مانند فونت های وب Google جستجو کنید ، می توانید قلم های زیبا را نیز پیدا کنید. در اینجا گردآوری اخیر قلمهای زیبا و وب رایگان توسط CreativeBloq آورده شده است.

اکنون که می دانید به کجا نگاه کنید ، فقط چند قانون کلی وجود دارد که باید در خاطر داشته باشید:

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

4. تصاویر و رنگ ها

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

     پالت رنگ خود را حداقل نگه دارید
     مانند قلم ها ، فقط به 2 یا 3 بچسبید. آنها باید از مارک میزبان همگام شوند ، در حالی که برای برجسته کردن مناطق مهم ، همانطور که در بخش "سلسله مراتب بصری" ذکر شد ، خدمت می کنند.
     کوری رنگ را در نظر بگیرید
     نکته مهم دیگری که باید در ذهن خود بخاطر داشته باشید این واقعیت است که چیزی مثل 5٪ از جمعیت (مذکر) رنگ آمیزی می کنند ، بنابراین با جفت شدن رنگ خود مراقب باشید. ما یک مقاله عمیق تر درباره این موضوع نوشتیم.

طراحی وب سایت در تبریز

طراحی وب مربع

برای تصاویر:

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

.

    تصاویر را با تفکر انتخاب کنید
    از تصاویر به عنوان راهی برای پر کردن فضا استفاده نکنید. بازدید کنندگان بلافاصله این موضوع را انتخاب می کنند و ممکن است علاقه مند به صفحه شما باشند. در عوض ، فقط از تصاویری استفاده کنید که اطلاعات مفیدی را به شما ارائه می دهند. این مقاله در مورد Designinstruct عمیق تر این موضوع را پوشش می دهد.     همیشه از تمام محدودیت های صدور مجوز برای تصویر سهام پیروی کنید
    از محدودیت مجوزهای مرتبط با تصاویر خود آگاه باشید. بیشتر تصاویر دارای حق چاپ هستند ، به این معنی که شما یا مشتری شما طبق نیازهای شما باید برای استفاده از آنها هزینه ای پرداخت کنید. شما می توانید با استفاده از مقالات گذشته ای که ما نوشتیم ، با این موضوع آشنا شوید.
    اندازه پرونده ها را کوچک نگه دارید
    اطمینان حاصل کنید که اندازه تصویر شما در حد ممکن کم باشد (وضوح وب 72 ppi). تصاویر اغلب 60٪ یا بیشتر از اندازه / زمان بارگیری صفحه وب را تشکیل می دهند.

منبع مطلب

اصـول طـراحی وب سایت برای مبتدیان

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

عناصر طراحی خوب

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

مهمترین عناصر در طراحی وب ، ناوبری خوب ، صفحات مختصر و مؤثر ، پیوندهای کاری و از همه مهمتر گرامر و هجی خوب هستند. با افزودن رنگ و گرافیک ، این موارد را در خاطر داشته باشید و وب سایت شما شروع خوبی نخواهد داشت

طراحی فروشگاه  اینترنتی در تبریز

نحوه چیدمان یک صفحه وب

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

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

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

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

فونت و تایپوگرافی

قلم ها روشی است که متن شما در صفحه وب به نظر می رسد. این یک عنصر اساسی است زیرا بیشتر صفحات وب شامل مقدار زیادی متن هستند.

هنگامی که به طراحی فکر می کنید ، باید به این فکر کنید که متن چگونه روی یک سطح خرد (فونت گلیف ، خانواده قلم و ...) و همچنین سطح کلان (بلوک های موقعیت یابی متن و تنظیم اندازه و شکل متن). مطمئناً انتخاب ساده یک فونت ساده نیست و چند نکته برای شروع کار به شما کمک می کند.

شرکت طراحی وب سایت در تبریز

طرح رنگ وب سایت شما

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

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

اضافه کردن گرافیک و تصاویر

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

موتورهای جستجو بر خلاف متن ، زمان دشواری را برای بیان اینکه تصویری از چیست ، دارند مگر اینکه آنها آن اطلاعات را به آنها بدهید. به همین دلیل ، طراحان می توانند از ویژگی های برچسب IMG مانند برچسب ALT استفاده کنند تا این جزئیات مهم را در بر گیرند.

ناوبری تخفیف نکنید

پیمایش به این صورت است که بازدید کنندگان شما از یک صفحه به صفحه دیگر دور می شوند. این حرکت را فراهم می کند و به بازدید کنندگان این فرصت را می دهد تا عناصر دیگر سایت خود را پیدا کنند.

شما باید مطمئن باشید که ساختار وب سایت شما (معماری اطلاعات) معنی دارد. همچنین پیدا کردن و خواندن آن بسیار آسان است بنابراین بازدید کنندگان نیازی به تکیه بر عملکرد جستجو ندارند . 

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

نرم افزار طراحی وب

اکثر طراحان وب ترجیح می دهند در ویرایشگرهای WYSIWYG یا "آنچه می بینید آنچه شما دریافت می کنید" کار کنند. اینها یک رابط بصری به طراحی ارائه می دهند و به شما امکان می دهند کمتر روی کد نویسی HTML تمرکز کنید .

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

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