می خواهید خودتان سایتی که نیاز دارید را طراحی کنید؟ شاید دوست دارید از ابزارهای طراحی سایت در شغل تان استفاده کنید. خوب دلیل شما برای استفاده از این ابزارها هر چه که باشد، فرآیند ساده ای پیش رو ندارید. فرآیند یادگیری ابزارهای مرتبط با طراحی سایت زمانبر است، به صبوری و سخت کار کردن نیاز دارد.
با اینکه در یک مقاله نمی توان همه مهارت ها، ابزارها و فناوری های مورد نیاز برای استفاده از این ابزارها را بیان کرد اما در این مقاله سعی می کنیم شما را به سمت مسیر درستی هدایت کنیم.
بعد از اینکه مسیرتان را شناختید می توانید برای رسیدن به مقصد از مواردی که پیش رو دارید بهره ببرید و وارد فرآیند یادگیری شوید.
این راهنما برای افرادی نوشته شده است که پس زمینه رسمی یا مدرکی در دنیای ابزارهای طراحی سایت ندارند.
بعد از اینکه اصول کار با رایانه را درک کردید می توانید از این راهنما به خوبی استفاده کنید.
با این حال باید به خاطر داشته باشید که ابزارهای طراحی سایت جزو موارد فنی هستند و کار با آنها به دانش فنی زیادی نیاز دارد.
بعد از اینکه اصول کار با این ابزارها را آموختید باید از آموزش های دیگر برای بهبود مهارت هایتان استفاده کنید و مواردی همچون تعامل انسان ها با طراحی سایت، نظریه رنگ و زبان هایی مثل HTML و CSS و را یاد بگیرید. شاید در این مسیر مجبور شوید جاوا اسکریپت و سایر زبان های برنامه نویسی را هم بیاموزید.
بعد از همه این مراحل، به سراغ بهینه سازی سایت برای موتورهای جستجو خواهید رفت و کار با سیستم های مدیریت محتوا را یاد خواهید گرفت.
حالا اجازه دهید برخی از مفاهیم مرتبط با ابزارهای طراحی سایت را با هم مرور کنیم.
ابزارهای طراحی وب تجربه کاربری
تجربه کاربری یا رابط کاربری موضوع بسیار مهمی در دنیای طراحی سایت محسوب می شود.
طراحی تجربه کاربری به معنای درک نیازهای افراد، نحوه تعامل آنها با طراحی سایت و استفاده از آن و بهتر کردن فرآیند موجود است.
در این نوع طراحی موارد بسیار متعددی مورد استفاده قرار می گیرد و شما باید آزمون و خطا کنید.
روشی که شما با سایت تعامل دارید و آن را تجربه می کنید ممکن است با دیدگاه سایر افراد متفاوت باشد.
ابزارهای طراحی سایت شما ممکن است برای خودتان بسیار عالی باشند اما گاهی از اوقات دیگران را سردرگم می کنند. وقتی در حال یادگیری طراحی تجربه کاربری هستید، بهترین کار این است که وایر فریمینگ را بیاموزید.
وایر فریم کردن فرآیندی است که در آن موارد پایه ای را مدنظر قرار می دهید. ایجاد طرح ها و مفاهیم اولیه ممکن است کمی برایتان دشوار باشد پس می توانید از یک خودکار و یک کاغذ برای ایجاد این طرح ها استفاده کنید.
بعد از اینکه طرح تان را روی کاغذ پیاده کردید می توانید آن را به رایانه دسکتاپی یا تبلت تان منتقل کنید.
این فرایند به شما کمک می کند کارکرد طراحی تان را از همان ابتدا بسنجید.
یادگیری مهارت های مرتبط با زیبایی سایت
برخی از افراد هستند که ترجیح می دهند از همان ابتدا بر روی جنبه برنامه نویسی سایت تمرکز کنند و جنبه زیبایی آن را نادیده می گیرند اما قبل از اینکه بخواهید به سراغ برنامه نویسی بروید بهتر است درک اندکی از مواردی داشته باشید که به زیبایی سایت تان کمک می کند.
البته تسلط پیدا کردن بر روی جنبه های زیبایی شناسی سایت کار آسانی نیست و می تواند افراد را سردرگم کند.
چیزی که برای شما ظاهر خوبی دارد ممکن است برای دیگران جذاب نباشد. فونتی که برای شما عالی است می تواند برای دیگری جذابیتی نداشته باشد. همه چیز در دنیای زیبایی شناسی نسبی و البته فردی است اما باز هم می توان از علمی که وجود دارد کمک گرفت.
اگر بتوانید این علم را کاوش کنید و بر قوانین زیبایی شناسی تسلط یابید قادر خواهید بود بیشتر مشکلات مرتبط با این بخش از ابزارهای طراحی سایت را هم حل کنید.
تایپوگرافی
این روزها در دنیای آنلاین تصاویر و فایل های ویدئویی مختلفی به اشتراک گذاشته می شوند اما متن هنوز هم بخش بزرگ و مهمی از فرآیند طراحی سایت خواهد بود.
اینترنت درباره کلمه هاست و جذاب نشان دادن کلمه ها می تواند خواندن آن ها را برای کاربران ساده تر و راحت تر سازد.
نوشتن یک متن خوب به نویسنده ماهر و چیره دستی نیاز دارد اما این شما هستید که باید ظاهر متن نوشته شده را به کمک تایپوگرافی جذاب سازید.
تایپوگرافی تنها به معنای انتخاب فونت نیست. این موضوع به معنای انتخاب اندازه و نوع مناسب فونت و مرتب کردن آن به گونه ای است که برای بازدیدکننده صرف نظر از دستگاه یا مرورگری که مورد استفاده قرار می دهد، قابل خواندن باشد.
تایپوگرافی به معنای ایجاد سلسله مراتب بصری بین سرتیترها، عناوین و بدنه متن است.
بعد از اینکه قوانین تایپوگرافی را یاد گرفتید می توانید فونت مناسبی برای طراحی سایت تان انتخاب کنید.
فونت های رایگان زیادی در اینترنت وجود دارد و Google Web Fonts می تواند در این مسیر به شما کمک کند.
در فرآیند یادگیری ابزارهای طراحی سایت، بیشتر طراحان از فونت های گوگل استفاده می کنند زیرا به طور مستقیم قابل تعبیه شدن در طراحی سایت هستند.
حتی می توانید ترکیبی از فونت های گوگل را به صورت آنلاین بیابید یا از Web Font Combinator برای دیدن ترکیب های مختلف فونت ها استفاده نمایید.
در برخی از موارد ممکن است مجبور شوید فونت ها را خودتان تعبیه کنید. اینکار برای خیلی ها کار ساده ای نخواهد بود. اگر می خواهید خودتان این فرآیند را یاد بگیرید باید زبان های HTML و CSS را بلد باشید.
نظریه رنگ ها
نظریه رنگ ها چیزی بیشتر از یادگیری نام های فنی رنگ های مختلف است. واقعیت این است که در این نظریه، شما باید با ترکیب رنگ های مختلف آشنا شوید و بدانید هر رنگی چه تاثیری بر روی احساسات افراد دارد.
نظریه رنگ ها یک علم واقعی است و می تواند بر روی کاربردی بودن سایت و تجربه کاربری تاثیر بسزایی داشته باشد.
به عنوان مثال متنی که بر روی سایت نوشته می شود اگر با رنگ درستی نشان داده نشود و از پس زمینه متمایز نگردد ممکن است برای کاربر قابل خواندن هم نباشد.
افرادی که در بینایی شان مشکل دارند یا افرادی که صفحه نمایش شان به درستی پیکربندی نشده اند ممکن است در دیدن سایت شما با مشکل مواجه شوند. این هم جزو چالش های طراحی سایت است.
HTML
بعد از اینکه جنبه زیبایی شناسی سایت را یاد گرفتید و نظریه ای که پشت ابزارهای طراحی سایت وجود دارد را آموختید باید دست به کار شوید و استفاده از زبان های برنامه نویسی را بیاموزید.
بهترین کار این است که فرآیند یادگیری را با زبان HTML آغاز کنید. هر طراحی سایتی از HTML استفاده می کند. اینکار به مرورگر می گوید چگونه ویدئوها، متن ها، تصاویر و لینک ها را مورد بررسی قرار دهد.
زبان بعدی که باید به سراغ یادگیری اش بروید، CSS است که ظاهر سایت شما را زیباتر و بهتر می کند. این زبان به مرورگرها فونت متن و رنگ عناصر مختلف را نشان می دهد.
CSS طرح صفحه طراحی شده، ظاهر دکمه ها، اندازه عناصر مختلف و حتی انیمیشن های مختلف را تعریف می کند.
یادگیری HTML و CSS کار چندان سختی نیست اما این زبان ها بسیار گسترده هستند و به شیوه های مختلفی مورد استفاده قرار می گیرند. یادگیری این زبان های برنامه نویسی به صبر و زمان نیاز دارد.
زبان برنامه نویسی جاوا اسکریپت
یادگیری جاوا اسکریپت یک تصمیم اختیاری است اما اگر بتوانید این زبان برنامه نویسی را یاد بگیرید مزایای زیادی به دست خواهید آورد.
این زبان برنامه نویسی محتوای وب را به گونه ای تغییر می دهد که از طریق CSS و HTML قابل تغییر نیست.
به خاطر داشته باشید که یادگیری جاوا اسکریپت ضروری نیست و ممکن است کمی برایتان دشوار باشد.
با این حال استفاده از آن بسیار مفید است و در مهارت های طراحی مختلف مورد استفاده قرار می گیرد. شما می توانید از این زبان برنامه نویسی برای اضافه کردن عناصر فانتزی همچون اسلایدشوها یا ایجاد محتوای جدید استفاده کنید. اینکار کاربردی بودن سایت را بهبود می بخشد.
ابزارهای مورد نیاز را تهیه کنید!
مهارت های طراحی وب نیازمند ابزارها، فرآیندها و جریان های کاری خاصی است هرچند رسیدن به یک ترکیب خاص همیشه ممکن نیست.
هر فردی به یک سری ابزار علاقه دارد و افرادی هم هستند که به ابزارهای خاصی همیشه وفادار می مانند. اگر این وفاداری را کنار بگذاریم همیشه بهترین کار این است که مهارت های مرتبط با طراحی وب را تجربه کنید و ایده های جدیدی به دست آورید.
خودتان را محدود به یک سری ابزار خاص نکنید. اگر فکر می کنید مجبور هستید ابزار خاصی را امتحان کنید و فقط با این ابزارها احساس راحتی می کنید بهتر است در طرز فکرتان تجدید نظر کنید.
برای اینکه بتوانید فرآیند طراحی سایت را آغاز کنید باید یک سری ابزار رایگان را بشناسید. پس اجازه دهید این ابزارهای رایگان را با هم مرور کنیم.
مرورگرهای بزرگ
مرورگرهای بزرگی همچون فایرفاکس موزیلا، کروم گوگل و اینترنت اکسپلورر مایکروسافت هر کدام به شیوه منحصر به فرد خودشان کار می کنند و به روش های مختلف صفحه وب یکسانی را به نمایش می گذارند.
بهترین کار در طراحی سایت این است که ببینید سایت تان در مرورگرهای بزرگ چگونه دیده می شود. مطمئن شوید که سایت طراحی شده در مرورگرهای بزرگ مشکلی ندارد و به درستی لود می شود.
به طور کلی طرح سایت باید در مرورگرهای بزرگ به صورت یکپارچه نشان داده شود.
این موضوع به لطف بهبودهایی که در مرورگرها رخ داده به راحتی امکان پذیر است اما برای همه عناصر نمی توان چنین نتیجه ای گرفت.
نکته کلیدی برای به دست آوردن مهارت کافی در طراحی سایت تست در محیط های مختلف است.
از مرورگرهای موبایلی هم باید استفاده کنید هرچند ممکن است به دستگاه هایی که خودتان دارید محدود باشید.
بیشتر مرورگرهای موبایلی بزرگ قابلیت های مشابهی دارند. کروم محبوب ترین مرورگر موبایلی است اما موزیلا هم بر روی نسخه موبایلی فایرفاکس برای IOS به راحتی کار می کند. اپرا و اپرا مینی گزینه های دیگری هستند که در دسترس کاربران قرار دارند.
ابزارهای وایرفریم
برای وایر فریم کردن شما می توانید از یک خودکار و یک کاغذ یا اپلیکیشن نقاشی استفاده کنید.
نکته کلیدی داشتن پلتفرمی مناسب برای کشیدن ایده های اولیه و اصلاح آن هاست.
اپلیکیشن های نقاشی
بعد از اینکه برای پایه و اساس کدهایتان وایرفریم را ایجاد کردید باید برای خودتان یک اپلیکیشن وایرفریم انتخاب کنید.
Google Draw گزینه خوبی است زیرا همه شکل های ضروری را در خود دارد، قابلیت اشتراک گذاری و همکاری آنلاین در آن دیده می شود و شما می توانید به همراه فرد دیگری کار را ادامه دهید. این ابزار مبتنی بر وب است و حدود 15 گیگابایت فضای رایگان دارد.
اگر با تبلت کار می کنید می توانید گزینه های جایگزین دیگری بیابید.
ویرایشگر کد
زبان های HTML و CSS را می توان بر روی نرم افزار ساده ای همچون نوت پد نیز اجرا کرد. هر آنچه که شما نیاز دارید ویرایشگر متن است.
ویرایشگرهای کد اساسا ویرایشگرهای متنی با قابلیت های اضافی هستند و می توانند برنامه نویسی سایت را ساده تر سازند.
ابزارهای مختلفی برای اینکار وجود دارد. تنها کاری که باید انجام دهید تجربه کردن ابزارهای متعدد است.
خودتان را به ابزار خاصی محدود نکنید. اگر تازه کار هستید بهترین کار استفاده از Bracket است. این ابزار پایدار و رایگان است و بر روی سیستم عامل های مک، لینوکس و ویندوز به درستی کار می کند.
ویرایشگر تصویر
بیشترین قسمت محتوای سایت را متن تشکیل می دهد اما تصاویر نیز بخش بزرگی از تجربه گشت و گذار در دنیای اینترنت هستند.
شما باید آیکون ها، لوگوها، تصاویر و سایر فرمت های تصویری را برای سایت تان طراحی و ویرایش کنید.
باز هم نکته کلیدی تجربه کردن برنامه های مختلف است.
گاهی از اوقات مجبور خواهید شد از نسخه پولی این برنامه ها استفاده کنید اما نسخه های آزمایشی رایگان هم در دسترس تان خواهد بود. ابزارهای رایج برای ویرایش تصاویر در برگیرنده فتوشاپ، کورل دراو، GIMP ،Paint.Net است.
سرور لوکال
این گزینه کاملا اختیاری است اما بهتر است وب سرور را بر روی رایانه شخصی تان نصب کنید. وب سرور به افراد اجازه می دهد به همه یا بخشی از سایت شما دسترسی داشته باشند.
لوکال سرور به اینترنت دسترسی نخواهد داشت مگر اینکه اینترنت پرسرعت و رایانه قدرتمندی داشته باشید.
برای اینکه ببینید سایت تان در دنیای آنلاین چه ظاهری دارد و چه عملکرد از خود نشان می دهد می توانید یک سرور راه اندازی کنید.
یادگیری کار با سرور محلی در هزینه و زمان شما صرفه جویی می کند. برای افراد مبتدی XAMPP گزینه خوبی برای راه اندازی سرور محلی است. می توان این گزینه را روی لینوکس، مک و ویندوز نصب کرد.
مراحل طراحی سایت
خوب حالا که مهارت ها، ابزارها و دانش مورد نیاز را درک کردید می توانید به سراغ فرآیند طراحی سایت بروید.
نوشتن محتوا
ایجاد محتوای سایت متفاوت از فرآیند به دست آوردن مهارت های طراحی است.
شما باید خودتان محتوای سایت را بنویسید یا آن را برون سپاری کنید. همچنین می توانید یک عکاس یا کپی رایتر استخدام کنید و از تصاویر استوک بهره ببرید. در هر صورت به یک سری محتوای جذاب از جمله متن و تصویر برای سایت تان نیاز دارید.
بعد از اینکه همه محتوای مورد نیاز را آماده کردید می توانید به سراغ سازماندهی آنها بروید. در صفحات اصلی و سایر صفحات چه مواردی را می خواهید بگنجانید؟ این عناصر چگونه به هم مرتبط خواهند بود؟ این سوالات از اهمیت بسیار زیادی برخوردارند چون ناوبری سایت، سازماندهی فایل ها و سایر جوانب موجود را مشخص می کنند.
در این بخش بهترین کار این است که از وایرفریم کردن استفاده کنید. از وایرفریم های یکبار مصرف استفاده کنید. این فرآیند سریع است و نباید بیش از نیم ساعت وقتتان را بگیرد. نسخه جزئی تر را بعدا طراحی خواهید کرد.
محتوای واقعی را تا جایی که می توانید در سایت قرار دهید. مثلا از دکمه ها و فرم ها سر جای خودشان استفاده کنید. تعریف های بیشتری اضافه کنید. اگر صفحات زیادی از یک نوع دارید از هر کدام یک صفحه ایجاد کنید.
کدنویسی
خوب حالا زمان کدنویسی فرا رسیده است. نکته کلیدی این است که برنامه نویسی را تا جایی ادامه دهید که از خروجی نهایی راضی باشید.
ویرایشگر متن Brackets قابلیت های عالی همچون دکمه پیش نمایش زنده را در خود دارد. این قابلیت پنجره مرورگر کروم را برایتان باز می کند که با ایجاد تغییر در کدها به روز می شود. در طول این فرآیند، بارها مرورگر را تغییر خواهید داد تا ببینید سایت تان در اندازه های متفاوت چه ظاهری خواهد داشت. از فرآیند آزمون و خطا استفاده کنید.
تست کردن
بعد از نوشتن کدها، باید سایت را در مرورگرهای بزرگ موبایلی و دسکتاپی تست کنید و باگ ها را رفع کنید.
درباره مشکلات کوچک زیاد خودتان را نگران نکنید. تا جایی که می توانید تجربه کاربری مثبتی ایجاد کنید.
کاربر باید سایت را به راحتی گشت و گذار کند و به راحتی به call to action دسترسی یابد.
منابع:
- ۹۸/۰۸/۰۶