بررسی اصول و گام های طراحی وب سایت

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

گام های اولیه طراحی سایت

برای ایجاد یک وب سایت مانند هر نرم افزار دیگری باید مراحلی را طی نمود تا ضمن تعیین اهداف مورد نظر از ایجاد صفحات وب، مسیر رسیدن به این اهداف تا حدی روشن شود. در یک جمع بندی کلی می توان موارد زیر را به عنوان مراحل طراحی یک وب سایت برشمرد:
الف) نیازسنجی: در این مرحله باید مشخص کنید هدف از ایجاد وب سایت چیست. برای رسیدن به این شناخت، اغلب اوقات لازم است با سفارش دهنده وب سایت یا افراد مطلعی که توسط وی معرفی میشود مصاحبه صورت گیرد تا پاسخ روشنی برای پرسشهای زیر به دست آید
وب سایت جزو کدام دسته از پایگاه های اینترنتی قرار می گیرد؟ آیا بیشتر بر جنبه اطلاع رسانی تأکید دارد یا جنبههای دیگری مانند فروش کالا و خدمات، سرگرمی، به اشتراک گذاری نظرات کاربران و … موردنظر است.

 

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

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

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

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

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

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

 

مالتی مدیا: مجموعهای از تصاویر یا فایلهای صوتی – تصویری مرتبط با مطالب، عکسهایی از محصولات، تبلیغات و…

فایلهای اجرایی شامل فایل برنامه های قابل دانلود، افزونه های موردنیاز مرورگر و…

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

با توجه به طرح وب سایت، پیاده سازی آن با استفاده از چه ابزارها و فن آوری هایی ممکن است؟

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

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

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

 

 

معرفی ابزار های طراحی وب سایت

استفاده درست از ابزار های طراحی وب سایت سبب می شود تا شما کارآمد تر و سریع تر کار کنید. در ادامه به بررسی درخشان ترین ابزار های طراحی وب سایت در سال 2018 می پردازیم.

Sketch

Sketch به سرعت ابزار فتوشاپ را به عنوان ابزار طراحی UI جایگزین می کند. اجازه دهید کمی واضح تر بگویم: بله، ما می دانیم که همه ابزار طراحی Vector UI Sketch را شنیده اید، اما به نظر می رسد هنوز بسیاری از طراحان وب سایت از فتوشاپ برای طراحی UI استفاده می کنند.

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

 

Adobe XD

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

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

 

Figma

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

Figma دارای یک USP مشابه با Sketch است و روند استفاده از آن بسیار ساده و روان می باشد. همچنین با استفاده از این ابزار می توانید گرافیک را با دیگران به اشتراک بگذارید. 

 

Affinity Designer

دان ادواردز، مدیر No Divide، می گوید: "اولین برداشت من این است که برنامه فوق العاده خوب طراحی شده و احساس می کنم که این برنامه شامل ابزار های طراحی وب سایت و گرافیکی اختصاص یافته است." از جمله ویژگی های مهم Affinity Designer این است که شما می توانید تصاویر و یا بردارها را بدون وارد شدن صدمه ای به آن ها تنظیم کنید. زوم 1،000،000،000 درصد نیز از جمله مزایای فوق العاده این ابزار طراحی سایت می باشد. به نظر می رسد Affinity یکی از رقبای جدی فتوشاپ خواهد بود.

 

Anime

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

var myAnimation = anime({
targets: ['.box1', '.box2'],
translateX: '5rem',
rotate: 180,
duration: 3000,
loop: true
});

این API به شما اجازه می دهد که عناصر را با استفاده از انتخابگرهای CSS، عناصر DOM یا حتی اشیاء جاوا اسکریپت استفاده کنید.

 

Avocode

Avocode باعث می شود توسعه دهندگان رابط کاربری برای کد کردن وب سایت ها یا برنامه ها راحت تر باشند. Avocode به سرعت و به طور خودکار فایل PSD یا Sketch را تجزیه و تحلیل می کند و یک UI زیبا به شما تحویل می دهد. شما همچنین می توانید بر روی عناصر در طراحی کلیک کنید و کد آن را به یک ویرایش گر متنی دلخواه ارسال نمایید. وو هوانگ آنه، یکی از بنیانگذاران Avocode، می گوید:"بهترین چیزی که این برنامه ارائه می دهد این است که توسعه دهندگان هرگز به Photoshop یا Sketch نیاز نخواهند داشت."

 

Vivaldi

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

 

CodePen

CodePen در سال 2012 توسط Alex Vazquez تاسیس گردید از بزرگترین و شایسته ترین جوامع وب برای تست و نمایش کد های HTML، CSS و jаvascript می باشد. طی پنج سال گذشته، این برنامه دارای دو ویرایشگر کد آنلاین و یک محیط آموزشی مجازی با قابلیت اجرا بوده است که توسعه دهندگان می توانند از طریق آن بازخورد های مهمی را دریافت کنند. به تازگی CodePen یک جهش بزرگ دیگر را با راه اندازی IDE خود انجام داده است، که به شما اجازه می دهد وب سایت های خود را در مرورگر خود، ایجاد کنید. با استفاده از این ابزار شما می توانید سایت خود را قبل از ساختن آن پیش نمایش دهید.

 

بوت استرپ 

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

• کاهش پشتیبانی از IE8 و iOS6
• حرکت فایل های CSS از Less به Sass
• واحد های اندازه گیری اصلی از px به rem تغییر کرده است.
• پشتیبانی از Flexbox در گرید ها
• استفاده از یک کامپوننت جدید برای جایگزینی اجزای قدیمی تر

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

 

کویل

کویل به عنوان یک ویرایشگر WYSIWYG متن باز برای طراحی سایت های مدرن به حساب می آید. این ویرایشگر بسیاری از زمینه های مختلف برنامه های کاربردی را شامل می شود، بنابراین جای تعجب نیست Quill از زمان عرضه نسخه 1.0 بتا در اواسط سال 2016 محبوبیت زیادی نداشته است.

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

 

SVGito 

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

 برگرفته از creativebloq