پذیرش رویکرد طراحی در مرورگر


طراحی سایت



به نظر می رسید سخت و شاید حتی غیر ممکن است باشد. آیا می توانم این کار را انجام دهم؟ اما چقدر سخت است؟ من قبلا اینها را تجربه کرده ام ...






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


چرا ما شروع به طراحی وب سایت ها در فتوشاپ کردیم؟


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


طبق ویکیپدیا اصطلاح طراحی وب به طور معمول برای توصیف فرایند طراحی مرتبط با طراحی سمت کاربر (سمت کلاینت) وب سایت از جمله استفاده از علامت نشانه گذاری است.


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





وب سایت ها شروع به تکامل کردند. بیشتر و بیشتر، ما شروع به استفاده از گرافیک برای بهبود وب سایت و زیبایی آن شدیم. سرعت پهنای باند بالا باعث می شود که این مهم امکان پذیر باشد. PHP، ASP، SQL، CMS، SEO، JavaScript و انیمیشن های فلش همه بخشی از طراحی وب است که امروز می دانیم. برای طراح وب زیاد است که تمام دانش لازم برای ساخت یک وب سایت را از ابتدا داشته باشد. بنابراین ما نقش را اینگونه تقسیم کردیم:





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

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










هرگز نباید طراح وب را جایگزین کرد.ممکن است طراحان کپی رایتندرهای دیگر را به تیم طراحی وب اضافه کرد، اما طراح وب را باید نگه دارید. طراحی در چارچوب مرورگر باید انجام شود.، اگر طراح کد نباشید، شما یک طراح وب نیستید. شما ممکن است یک طراح باشید که می داند چگونه از فتوشاپ برای کشیدن رابط های زیبا برای وب سایت ها استفاده کنید. اما شما یک طراح وب نیستید. برای تبدیل شدن به طراح وب، یادگیری HTML، CSS و JavaScript پایه الزامی است.



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




Wireframing

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


نسخه اولیه
گام بعدی، که از دیدگاه UX مهم است، ایجاد یک نمونه اولیه است. و از آنجایی که تصمیم گرفتم برای اولین بار به تلفن همراه بروم، یک نمونه اولیه برای آیفون ساختم. من از wireframes با کیفیت بالا استفاده کردم که در فتوشاپ ساخته شده و آنها را به Marvel یک ابزار عالی است که به شما امکان می دهد تا به سرعت نمونه های اولیه را از تصاویر یا فایل های PSD ایجاد کنید.)



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


در طرح من برای طراحی مجدد وب سایت، ابتدا یک وظیفه به نام "Visual Design" داشتم. بعد از ایجاد نمونه اولیه، برنامه ریزی شد. ایده این بود که هر صفحه را در فتوشاپ بکشیم. اما نظرم تغییر کرد من این کار را لغو کردم و به برنامه نویسی رفتم.
Coding
من با یک سند HTML خالی شروع کردم. من تصمیم گرفتم در ابتدا با تایپوگرافی با محتوای واقعی تمرکز کنم. بنابراین یک مقاله نوشتم و آن را در HTML قرار دادم. سعی کردم از ترکیبات مختلف از نوع و اندازه ستفاده کنم. آرم، گرافیکی و عنصر ناوبری وجود نداشت.


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

CMS یکپارچه سازی

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



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

مهارت های کد نویسی را بهبود بخشم

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


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

ایجاد تغییر در کد و وب سایت در مرورگر می تواند کند و آزار دهنده باشد. برخی از ابزارهایی که می توانند بهینه سازی روند را برای شما داشته باشند. من از Brackets استفاده کردم زیرا هر بار که یک تغییر در کد ایجاد می شود، وبسایت را به طور خودکار بازخوانی می کند.


من همچنین توسعه دهندگان را دیده ام که در ابزارهایی مانند CodePen و JSFiddle برنامه نویسی کرده اند، به سادگی به این دلیل که این ابزار باعث می شود که آنها نتایج را برای تغییرات مشاهده کنند در کد براون کال همچنین یک پست در مورد طراحی در مرورگر و برخی از ابزارهایی را که در دسترس هستند ذکر می کند.


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