چگونه Clearleft کد را برای آمریکا ساخت

نویسنده: Peter Berry
تاریخ ایجاد: 20 جولای 2021
تاریخ به روزرسانی: 11 ممکن است 2024
Anonim
چگونه Clearleft کد را برای آمریکا ساخت - خلاق
چگونه Clearleft کد را برای آمریکا ساخت - خلاق

محتوا

سازمان غیرانتفاعی Bay Area Code for America به زیبایی ، ساده و استفاده آسان از خدمات دیجیتالی دولت ایالات متحده کمک می کند. تعمیرات اساسی سایت اخیر آن ، با مشارکت آژانس Clearleft مستقر در انگلستان انجام شده و همین ارزش ها را برای حضور آنلاین خود به ارمغان آورده است. در آژانس Clearleft ، Jon Aizlewood طراحی بصری را انجام می داد ، آنا دبنهام ، مستقل کار ، از ساخت قسمت جلو مراقبت می کرد ، در حالی که جرمی کیت بر کار نظارت داشت و JavaScript را نوشت. در CfA ، بشارت دهنده UX ، سید هارل IA را مدیریت کرد ، CTO مایک میگورسکی تغییرات را اعمال کرد و مدیر ارشد بازاریابی دانا اوشیرو این پروژه را مدیریت کرد.

اهداف این پروژه چه بود؟

مایک میگورسکی: وظیفه اولیه ما این بود که وب سایت قدیمی و ناموزون Code for America را جایگزین چیزی کنیم که مدرن تر به نظر برسد. همانطور که در تابستان 2013 کار بر روی این پروژه را شروع کردیم ، سه هدف را شناسایی کردیم که به بهتر شدن پروژه کمک می کند. اول ، تحقیقات سید هارل در مورد انگیزه های دولت و جوامع گیکی ما پیشنهاد کرد که ما اصطلاحات اصطلاحات موجود در سایت را با چیزی که مستقیماً برای مخاطبان نوشته شده است ، جایگزین کنیم.


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

چه تحقیق UX انجام دادید؟

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

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


کار چگونه تقسیم شد؟

جرمی کیت: معمولاً وقتی Clearleft درگیر پروژه ای می شود ، ما جنبه های UX ، طراحی بصری و گاهی اوقات توسعه خطوط جلو را می پوشانیم (ما عمداً تصمیم می گیریم که توسعه باطن را انجام ندهیم). این پروژه کمی متفاوت بود: Code for America قبلاً از طریق بازبینی محتوای بزرگی انجام شده بود و با تجربه کاربری که می خواست کار کرده است. این امر ما را مجبور به انجام طراحی بصری و توسعه خط مقدم کرد. با پیشرفت کار ، هرگونه مسئله مربوط به UX یا معماری اطلاعات به صورت مشترک اداره می شد.

چگونه از پس ارتباطات برآیید؟

JK: ما هر روز یک کنفرانس سریع "استندآپ" داشتیم. برای ما ، تماس در پایان روز بود: 5.30 بعد از ظهر. ساعت 9.30 صبح در سانفرانسیسکو بود ، درست زمانی که مردم وارد دفتر Code for America می شدند. که به طرز شگفت انگیزی خوب کار کرد. اگر موردی از آنها نیاز داشتیم ، در پایان روز به آنها اطلاع می دهیم. سپس آنها باید تمام روز خود را برای جمع آوری این موضوع داشته باشند ، بنابراین روز دیگر در انتظار ما است که وارد کار شویم. این گفتگوهای فرا اقیانوس اطلس همیشه خوب و کوتاه بود. آنها بندرت بیش از 10 یا 15 دقیقه دوام آوردند. این مدت زمان کافی برای همه بود تا بتوانند سریع از آنچه اتفاق می افتد سرعت بگیرند. آن سطح از ارتباط مستمر درست بود: هیچ اتفاق غیرمنتظره ای غیر منتظره یا "بزرگ" در این راه وجود نداشت.


چگونه فرآیند خود را برای مدیریت محدودیت های زمان و بودجه تطبیق دادید؟

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

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

جون آیزلوود: به اندازه کافی عجیب و غریب نه منطقه زمانی بین برایتون و سانفرانسیسکو یک مبدل بود. استندآپ های روزانه به ما اجازه می داد از طریق کارهایی که آن روز تمام کرده بودیم صحبت کنیم. اساساً ، هر روز یک دوی سرعت بود که در انتها پخش می شد ، بنابراین ما هر روز به موقع ساعت 5.30 عصر در حال طراحی ، توسعه و تکرار بودیم. این به معنای نداشتن تنیس از طریق ایمیل ، بدون رمان های Basecamp و مدیریت بسیار اندک پروژه بود زیرا همه کاملاً با آنچه همه روی آن کار می کردند به روز بودند. در کنار Google Docs برای به اشتراک گذاشتن محتوا ، نمودارهای توضیحات صفحه و موارد دیگر ، ما تصمیم گرفتیم که از Trello برای روش Kanban یعنی "انجام ، انجام و انجام" استفاده کنیم.

ارزش های اصلی طراحی پروژه را چگونه توصیف می کنید؟

JA: تیم CfA قبلاً یک مارک تجاری توسط یک آژانس ایالتی انجام داده بود ، که به تعیین زبان زبان بصری سایت کمک کرد. همانطور که این زبان را برای وب تکامل بخشیدیم ، اصولی را که CfA به عنوان سازمانی به کار می برد دنبال کردیم و آنها را از طریق پالت قوی ، پررنگ UI ، تایپوگرافی بزرگ و سادگی نمایندگی می کردیم. ما می خواستیم سایت قدرتمند و ارتباطی ، میهن پرستانه و نزدیک به همه و همه علاقه مند به جنبش CfA باشد.

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

به نظر می رسد که شما خیلی خوب زندگی کردید. چه تاثیری روی پروژه گذاشت؟

JK: در حالی که جون یک کارمند تمام وقت Clearleft است ، آنا یک فریلنسر است. اما برای این پروژه ، من اصرار کردم که او نه تنها به دفتر Clearleft بیاید بلکه باید کنار جون کنار هم بنشیند. آنها یکدیگر را نکشتند. در واقع ، من فکر می کنم آنها بسیار سرگرم بودند. در پایان پروژه ، آنا تقریباً ما را به شایستگی رویکرد بحث برانگیز خود در تهیه چای ، که در teamethod.co.uk مستند شده ، متقاعد کرده بود. همیشه پایان روز با کنفرانس فرا اقیانوس اطلس به همتایان ما در Code for America بسیار خوب بود. سه نفری که در آنجا با آنها سر و کار داشتیم یک کار کاملاً خوشحال کننده بودند.

آنا دبنهام: ما در یک سطح مساوی بودیم - افراد در Code for America واقعا چیزهای خود را می دانند ، بنابراین آنها قادر به بازخورد فوق العاده مفید و مشکلات پیش بینی شده بودند. ساخت سیستم فقط بخشی از فرآیند بود. آنچه واقعاً تعیین می کند تا چه میزان موفق به انجام این پروژه شود ، بر اساس سهولت نگهداری و استفاده از Code برای آمریکا در طول ماه ها و سالها خواهد بود.

از چه فناوری هایی استفاده کردید؟

آگهی: از ما خواسته شد که فایلهای CSS را به جای Sass تحویل دهیم ، اما ما هنوز در هنگام توسعه از Sass برای کمک به مواردی مانند تبدیل مقادیر px به یادگارها و ذخیره متغیرهای رنگ استفاده کردیم. الگوهای نمونه اولیه با Jekyll ساخته شده اند و این در نهایت در سایت زنده مورد استفاده قرار گرفت زیرا صفحات به جای فایل های پایگاه داده به صورت فایلهای ثابت HTML ذخیره می شوند و این امر باعث می شود افراد دیگر بتوانند در این زمینه همکاری کنند. برای مدیریت وظایف ، ما از Trello به جای چسباندن وسایل روی دیوار استفاده کردیم ، به طوری که هر لحظه هرکسی می تواند غوطه ور شود و ببیند چه چیزی در حال انجام است. جون برای طراحی ها از فتوشاپ استفاده کرده است. این باعث شد که من زیاد قسم بخورم ، بنابراین او دیگر از فتوشاپ استفاده نمی کند و به جای آن از Sketch استفاده می کند.

برای آزمایش دستگاه و رفع اشکال ، Ghostlab کمک بزرگی کرد. من می توانم به صورت محلی نمونه اولیه را تغییر دهم ، مرورگر را در دسک تاپ تازه کنم ، و به طور خودکار مرورگرها را در همه دستگاه ها تازه می کند. ما از GitHub از روز اول برای نمونه اولیه استفاده کردیم و در اواخر پروژه ، اشکالاتی در آنجا ثبت شد. اکنون محل زندگی همه پرونده های سایت است ، بنابراین ایجاد تغییرات آسان است.

جون این را "نزدیکترین چیز به یک پروژه رویایی" توصیف کرد. چطور؟

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

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

چگونه کتابخانه الگو را تدوین کردید؟

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

خوب بود زیرا داشتن کد در کنار الگو به این معنی بود که گاهی Code for America به ما بازخورد فنی درباره HTML و همچنین طرح ها می داد. در نیمه راه ، من یک نمای "patchwork" برای کتابخانه الگو اضافه کردم تا به آزمایش دستگاه کمک کند تا بتوانیم الگوها را به جای عرض بسته در ظرف ، در عرض کامل بررسی کنیم.

چرا کتابخانه را به اشتراک گذاشتید؟

آگهی: غیر از اینکه کاری پسندیده است ، چرا که نه؟ پس از همه ، اگر وب سایت شما عمومی است ، CSS و HTML از قبل با مشاهده منبع در دسترس هستند. نه تنها این کتابخانه یک ابزار یادگیری عالی برای دیگران است ، قرار دادن آن در GitHub به معنای وجود مکانی برای افراد است که می توانند رفع اشکال یا بهبودها را پیشنهاد دهند. همچنین ، دانستن اینکه این کد به زودی در دسترس شما قرار خواهد گرفت انگیزه خوبی برای نوشتن نشانه گذاری بهتر و متفکرانه است.

چرا انتشار آلفا انجام دادید؟

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

چگونه مهاجرت محتوا از سایت قدیمی را مدیریت کردید؟

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

وقتی کار Clearleft انجام شد ، ماه ژانویه یک فشار تهاجمی برای انتقال صفحات باقیمانده بود. دانا با تلاش کپی / چسباندن زیاد Cyd و خودم ، سهم شیر این کار را انجام داد. این یک کار پر زرق و برق نبود: ما باید نشانه گذاری بهینه شده برای شیوه نامه های سایت قدیمی را کم کنیم ، از مسیرهای هدایت استفاده کنیم تا پیوندهای موجود خراب نشوند ، تصاویر و پیوندها را جابجا کنیم و پیوندهای بین دو سایت را به طور مداوم آزمایش کنیم. کمی از کد پایتون به آزمایش کمک می کند ، یک صفحه گسترده مشترک به ما کمک می کند تا هماهنگ شویم ، و تعداد زیادی از هدایت های HTTP 404s غافلگیرانه را به حداقل می رساند. پس از انتشار آلفا ، انجمن ما به ما کمک کرد تا محتوای صفحه را از طریق مشکلات و درخواست های کشیدن کامل کنیم.

آیا این پروژه آهنگ مضمونی داشت؟

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

جالب هست
بهترین موش در سال 2021: موش های باشکوه برای تمام نیازهای شما
به علاوه

بهترین موش در سال 2021: موش های باشکوه برای تمام نیازهای شما

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

یک کتاب کباب پز می توانید آن را ببرید ، برش دهید و بپزید

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

20 کتاب از طراحان برجسته که باید بخوانید

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