پروژه های طراحی گرافیک و وب
تنـظیمـاتفهرست پروژه های طراحی و توسعه و برنامه نویسی وب و گرافیک استدیو طراحی پژمان طیبی واقع در رشت، گیلان، ایران
at-arc.com
1399، طراحی و برنامه نویسی وبسایت تبریزی
طراحی این وبسایت بر اساس ایجاد ارتباط تعاملی کاربر با لوگوی سابق دفتر معماری امیرحسین تبریزی انجام شد، لوگویی که ترکیبی از یک خانه، یک مکعب و یک درب بود. کاربر می‌توانست درب را باز و بسته کند و تجربه کند که تمامی بخش‌های وبسایت (شامل درباره ما، تماس، اخبار، جوایز و غیره) گویی از دل همین لوگو ظاهر می‌شوند. این ایده‌ی اصلی با استفاده از سیستم اسکرول افقی و افکت‌های پارالکس (که در آن المان‌های مختلف صفحه هنگام اسکرول با سرعت‌های متفاوت حرکت می‌کنند و حس عمق ایجاد می‌کنند) توسعه یافت و به تدریج شکل گرفت. به دلیل تغییر برند و نام دفتر، وبسایت اصلی دیگر آنلاین نیست. با این حال، نسخه‌ای ساده‌تر با محتوای محدود روی همین سرور قرار دارد و شما می‌توانید این نسخه را مشاهده و در آن گشت‌وگذار کنید.
morph-architects
1402، طراحی و برنامه نویسی وبسایت دفتر مورف
در شورع روند طراحی وبسایت دفتر معماری مورف به مدیریت بهزاد آدینه، نیم نگاهی به معنی لغوی «مورف» کردیم.«مورف» به معنای تغییر شکل تدریجی از یک فرم به فرم دیگر است. در طراحی این وبسایت، از همین مفهوم (تبدیل تدریجی فرم ها به یکدیگر) الهام گرفته‌ایم. در اولین تجربه‌ی کاربر، حروف انگلیسی لوگو به‌تدریج به یکدیگر تبدیل می‌شوند و در نهایت به‌صورت نرم و پیوسته به لوگوی اصلی می‌رسند؛ لوگویی که تصاویر پروژه‌های شاخص در آن قرار دارد. همچنین یکی از ویژگی‌های خاص این وبسایت در حرکت اسکرول آن است: زمانی که کاربر به انتهای صفحه می‌رسد، دوباره به ابتدای مسیر بازمی‌گردد، حرکتی که یادآور همان فرآیند مورف و تغییر پیوسته است
poolad-sazeh.com.com
1400، طراحی و برنامه نویسی وبسایت پولاد سازه
شرکت پولاد سازه لاهیج یکی از شرکت‌های مطرح در زمینه ساخت سازه‌های اسکلت فولادی جوشی و پیچ‌مهره‌ای است. ویژگی بارز این شرکت همکاری با معماران آوانگارد است. در طراحی وبسایت این مجموعه صنعتی، هدف اصلی تأکید بر «همکاری میان این مجموعه صنعتی و معماران» بود و دیزان این وبسایت، بیش از آنکه متن محور باشد، حالتی گرافیکی و مینیمال دارد. روند طراحی از لوگوی این شرکت آغاز شد و با برنامه‌نویسی یک موشن گرافیک ادامه پیدا کرد، سپس با اسکرول افقی تکمیل شد. این وبسایت دوزبانه است و یکی از چالش‌های اصلی آن، هماهنگی متن فارسی راست‌به‌چپ با اسکرول افقی چپ‌به‌راست بود تا تجربه کاربری در هر دو زبان روان و یکپارچه باشد.
bakhtiaristudio.com
1403، طراحی و برنامه نویسی وبسایت بختیاری
طراحی وبسایت دفتر معماری سحر و شبنم بختیاری بر اساس لوگویی آغاز شد که آنها در اختیار ما گذاشتند. لوگویی که با استفاده از خطاطی و کالیتوگرافی طراحی شده و حالت عمودی داشت، و ما باید طراحی وبسایت را به‌گونه‌ای پیش می‌بردیم که با این لوگوی غیرمتعارف و عمودی هماهنگ باشد. در ابتدا، برای این لوگو دو موشن گرافیک مجزا طراحی و برنامه‌نویسی کردیم. اگر کاربر برای اولین بار از سایت در این مرورگر بازدید کند، انیمیشن طولانیتر برای او نمایش داده میشود، اما هنگام جابجایی بین صفحات، انیمیشن کوتاهتر را مشاهده خواهد کرد. صفحه آغازین وبسایت به گونه‌ای طراحی شد که لوگو در پیش‌زمینه قرار گیرد و در پس‌زمینه، تصاویر پروژه‌های انجام‌شده توسط این دفتر معماری نمایش داده شود. جانمایی و برنامه‌نویسی منوی اصلی سایت، که چیدمانی غیرمتعارف دارد، بر اساس هماهنگی با همان لوگوی عمودی انجام شد. این وبسایت دوزبانه است و یکی از چالش‌های اصلی آن، هماهنگی فونت‌های فارسی و انگلیسی با لوگو بود.
azhand-amood
1400، طراحی و برنامه نویسی وبسایت آزند و آمود
طراحی وبسایت دفتر معماری آژند و آمود به مدیریت دکتر سروش رجبی بر اساس لوگویی آغاز شد که آنها در اختیار ما گذاشتند. این لوگو شامل فرم‌های لوزی شکل بود و از خطوط مورب تشکیل شده بود، بنابراین طراحی وبسایت باید با این ساختار هماهنگ می‌شد. در ابتدا، برای لوگوی وبسایت یک موشن گرافی طراحی و برنامه‌نویسی شد تا تجربه ورود کاربر جذاب‌تر شود. هنگام بازدید اولیه و قبل از بارگذاری کامل وبسایت، کاربر ابتدا لوگو را به صورت خطوط مشاهده می‌کند. پس از مدتی، این خطوط به تدریج پر شده و لوگو به شکل کامل و توپر نمایش داده میشود. در مرحله بعد، تصاویر پروژه‌هایی که این دفتر طراحی کرده است، به آرامی در داخل شکل لوگو ظاهر می‌شوند و جلوه‌ای پویا و جذاب ایجاد می‌کنند. جانمایی و برنامه‌نویسی منوی اصلی سایت نیز بر اساس هماهنگی با لوگو، با چیدمانی لوزی شکل انجام شد تا تجربه بصری یکپارچه و منسجم ایجاد شود. در ادامه، بخش‌های مختلف وبسایت ( درباره ما، تماس با ما و پروژه‌ها ) نیز با توجه به ساختار کلی سایت طراحی و برنامه‌نویسی شدند تا تمامی عناصر در هماهنگی کامل با یکدیگر قرار داشته باشند. این وبسایت دارای دو حالت رنگی مجزا است: حالت روشن و حالت تاریک. بر اساس تم رنگی سیستم عامل کاربر، رنگ مناسب به او نمایش داده میشود و علاوه بر آن، کاربر میتواند با کلیک روی لوگو، تم رنگی سایت را به دلخواه تغییر دهد.
shaaroffice.com
1401، طراحی و برنامه نویسی وبسایت دفتر شار
طراحی وبسایت دفتر معماری شار به مدیریت احمد قدسی منش و همکاران بر اساس لوگویی آغاز شد که آنها در اختیار ما گذاشتند. این لوگو برگرفته از یک بافت شهری بود و در آن، بخشی از شهر شیراز قاب گرفته شده بود. هدف ما این بود که ایده پشت لوگو را در وبسایت نیز به نمایش بگذاریم. ابتدا، تصویری از خطوط بافت شهری به عنوان پس‌زمینه به کاربر نمایش داده میشود. سپس بخشی از این خطوط قاب‌بندی شده و برجسته میشود؛ همین بخش شاخص، لوگو است که به تدریج از دل خطوط پدیدار میشود. بخش‌های مختلف وبسایت به جای قرار گرفتن در صفحات جداگانه، در کنار هم طراحی شده‌اند، به طوری که حرکت میان آنها مانند رفتن از یک نقطه شهر به نقطه دیگر است. وقتی این جابجایی با تصویر پس‌زمینه خطوط شهری ترکیب میشود، حس میشود که کاربر در حال قدم زدن و گشت‌وگذار در یک شهر و حرکت روی نقشهای واقعی است. حرکت به چپ و راست، بخش‌های درباره ما و پروژه‌ها را نمایش می‌دهد و در این دو بخش، جابجایی با اسکرول افقی انجام میشود. حرکت به سمت پایین، بخش تماس با ما را نشان می‌دهد . این وبسایت دارای دو حالت رنگی مجزا است: روشن و حالت تاریک.
mrkoffice.ir
1399، طراحی و برنامه نویسی وبسایت محمد رضا کهزادی
طراحی وبسایت دفتر معماری mrk به مدیریت محمدرضا کهزادی بر اساس لوگویی آغاز شد که آنها در اختیار ما گذاشتند. و آن لوگو، یک علامت هشتگ (#) !بود لوگویی که به خودی خود بار معنایی خاصی را نداشت. اما هدف ما این بود که به این لوگو یک شخصیت بدهیم و کاری کنیم که این لوگو، صرفا یک عنصر گرافیکی منفعل نباشد . برای این منضور، سعی کردیم با نگاهی دیگر به این هشتگ (#) بنگریم. آن را به صورت تعدادی مربع دیدیدم که کنار هم قرار گرفته اند. ما این مربع ها را در بعد سوم جابجا کردیم. از طرف دیگر، این علامت (#) را به شکل چهار خط دیدیدم که به نوعی تشکیل یک کادر، یک قاب را میدهند. پس برای این لوگو دو انیمشن طراحی و برنامه نویسی کردیم. یکی هنگاهی که کاربر وارد سایت میشود و میتواند لوگو را در فضای سه بعدی بچرخاند تا آن مربع ها را مشاهده کند . انیمشن دیگر، تبدیل این لوگو به کادری ست که دور محتوای وبسایت را در بر میگیرد. وقتی کاربر روی نام دفتر و یا منوی اصلی سایت کلیک میکنید، این انیمشن اجرا میشود و لوگو به کادر و کادر به لوگو تبدیل میشود. یکی دیگر از قسمت های این وبسایت، صفه «درباره ما» بود. در ابتدای این صفحه میخواستیم یک تصویر اصلی از اعضای این دفتر قرار دهیم. اما نمیخواستیم یک تصویر ساده و ثابت داشته باشیم. پس لایه های مختلف این تصویر را جا به جا کردیم و با آن لایه ها افکت پارالکس دادیم. (که در آن المان‌های مختلف صفحه هنگام اسکرول با سرعت‌های متفاوت حرکت می‌کنند و حس عمق ایجاد می‌کنند). همچنین برای هر کدام از اعضای پرسنل شرکت از دو تصویر استفاده کردیم که یکی با چهره جدی و دیگری با لبنخد میبود و کاربر با بردن ماوس میتواند چهره خندان را مشاهده کند.
takbiristudio.ir
1398، طراحی و برنامه نویسی وبسایت ایمان تکبیری
وبسایت استودیو معماری ایمان تکبیری ، طراحی مینیمالیستی و مدرن دارد که در آن، سادگی و عملکرد به‌طور یکپارچه با هم ترکیب شده‌اند. این وبسایت با پس‌زمینه‌ای سفید و بدون هیچ‌گونه تزئین اضافی، تجربه‌ای خالص و متمرکز را برای کاربر فراهم می‌کند. این وبسایت از انیمیشن‌ها و موشن‌های متعدد بهره می‌برد تا تجربه کاربری غنی و جذابی ایجاد شود. صفحه آغازین وبسایت به گونه‌ای طراحی شده است که لوگو در پیش‌زمینه قرار گیرد و پس‌زمینه سفید، تجربه‌ای خالص و مینیمال برای کاربر فراهم کند. در داخل لوگو، تصاویر پروژه‌های طراحی شده توسط استودیو معماری تکبیری به نمایش درمی‌آیند. در بخش پروژه‌ها، نمونه‌های مختلف طراحی‌های استودیو به صورت گالری ارائه می‌شوند. هر پروژه شامل دو تصویر روز و شب است و وقتی کاربر ماوس خود را روی تصاویر قرار می‌دهد، تصویر روز به شب و تصویر شب به روز تبدیل میشود، تا تجربه‌ای تعاملی و جذاب ایجاد شود.
Mashhadimirza.ir
1397، طراحی لوگو، گرافیک و وبسایت مشهدی میرزا
پروژه‌ی استودیو معماری علیرضا مشهدی میرزا تنها به ساخت یک وبسایت محدود نبود، بلکه شامل طراحی لوگو، هویت بصری و ست اداری (از جمله پاکت، سربرگ، کارت ویزیت، جلد CD و موارد دیگر) نیز می‌شد. به همین دلیل، در نخستین گام نیاز بود مجموعه‌ای از عناصر بصری تعریف کنیم که بتوانند نقش عنصر وحدت‌بخش در تمام بخش‌های برند را ایفا کنند. علیرضا مشهدی میرزا بیشتر با پروژه‌هایی شناخته میشود که بر پایه‌ی کار با آجر شکل گرفته‌اند. او همچنین کارگاه‌های آموزشی برای معماران برگزار می‌کند و در آنها به آموزش طراحی با آجر می‌پردازد. بر همین اساس، ما مفهوم «آجر» را به عنوان هسته‌ی مرکزی هویت بصری برند تعریف کردیم. لوگو بر مبنای همین ایده طراحی شد تا حروف M و A به گونه‌ای ترسیم شوند که گویی از آجر ساخته شده‌اند. برای این لوگو یک موشن‌گرافیک اختصاصی نیز طراحی و برنامه‌نویسی شد و رنگ اصلی برند را به‌گونه‌ای انتخاب کردیم که یادآور رنگ آجر باشد. صفحه‌ی نخست وبسایت نیز بر پایه‌ی همین ایده شکل گرفت؛ جایی که کاربر میتواند بافت‌ها و چیدمان‌های مختلف آجر را مشاهده و با آنها تعامل کند. در بخش‌هایی، آجرها یک‌درمیان چیده می‌شوند و در بخش‌هایی دیگر دو‌درمیان، و این تغییر چیدمان‌ها با انیمیشن‌های نرم و زنده همراه است تا تجربه‌ای پویا و معمارانه ایجاد کند.
utopia designcon struction.com
1402، طراحی و برنامه نویسی وبسایت یوتوپیا
این وبسایت برای یک شرکت آمریکایی طراحی شد. پیش از سفارش طراحی و برنامه‌نویسی، شرکت ماستدیو مماری اوتوپیا یک وبسایت قدیمی داشت و هدف ما این بود که نسخه‌ی جدید نسبت به آن وبسایت تفاوت زیادی نداشته باشد تا کاربران قدیمی پس از ورود دچار سردرگمی نشوند. لوگوی این شرکت شامل نوشته‌ی «Utopia» بود که حرف U به شکل یک متر طراحی شده بود. ما این ایده‌ی «متر» را گرفتیم و در بخش‌های مختلف وبسایت به شیوه‌ای یکپارچه و خلاقانه استفاده کردیم تا هویت بصری برند حفظ شود و در عین حال طراحی وبسایت به شکلی مینیمال و کاربردی ارائه شود. این وبسایت همچنین بخشی برای ثبت نظرات کاربران داشت، جایی که بازدیدکنندگان می‌توانستند وارد شده و نظر خود را درباره‌ی شرکت اتوپیا ثبت کنند و با پنج ستاره به آن امتیاز بدهند. طراحی و برنامه‌نویسی این بخش چالش‌های خاص خود را داشت، زیرا نیازمند توسعه یک سیستم بک‌اند بود. (به زبان ساده، «بک‌اند» بخشی از وبسایت است که عملکردها و پردازش‌های داخلی سایت را مدیریت می‌کند، مثل ذخیره‌سازی نظرات کاربران و مدیریت داده‌ها، و معمولاً برای کاربر قابل مشاهده نیست.)
shirivisual.com
1401، طراحی و برنامه نویسی وبسایت حسام شیری
حسام شیری، متخصص در زمینه‌ی رندرینگ و پرزنتیشن معماری است و خروجی اصلی کار او شامل ویدیوها و رندرهای باکیفیت از پروژه‌های معماری می‌باشد. در طراحی و برنامه‌نویسی وبسایت این مجموعه، هدف اصلی آن بود که بستر دیجیتال، جلوه‌ی محتوای تصویری را به بهترین شکل ممکن نمایش دهد. از همین رو، طراحی وبسایت بر پایه‌ی سادگی و خلوتی بصری شکل گرفت؛ متن‌ها به حداقل کاهش یافتند تا تمرکز کامل بر روی تصاویر باقی بماند. وبسایت به صورت تمام‌صفحه طراحی شد تا بیننده کاملاً در فضای بصری غوطه‌ور شود. حتی لوگوی «حسام شیری» تنها در لحظه‌ی آغازین بارگذاری سایت نمایش داده میشود تا پس از آن، تمرکز کاربر بی‌واسطه به تصاویر منتقل گردد. برای نمایش نام پروژه‌ها، سیستمی اختصاصی توسعه داده شد که عناوین را متناسب با موقعیت نشانگر ماوس نمایش می‌دهد. این ویژگی باعث شد تعامل کاربر با تصاویر زنده‌تر و پویا‌تر شود. از دیگر امکانات ویژه‌ی این وبسایت، قابلیت نمایش تصاویر پانورامای ۳۶۰ درجه بود. برای این منظور، علاوه بر یک ویدیو پلیر اختصاصی، سیستمی مخصوص نمایش پانوراما نیز طراحی و برنامه‌نویسی شد که همگی در قالب یک طراحی مینیمال و یکپارچه با ساختار گرافیکی سایت اجرا گردیدند.
house13th.com
1404، طراحی و برنامه نویسی وبسایت خانه سیزدهم
پروژه‌ی استودیو طراحی معماری خانه سیزدهم با طراحی لوگو و هویت بصری آغاز شد. در ابتدا قصد داشتیم لوگو به‌صورت فرمی از یک خانه با سقف شیبدار طراحی شود، اما در ادامه و با نظر کارفرما، تصمیم گرفتیم از رویکردی استعاری‌تر استفاده کنیم. نتیجه، لوگویی بود که به شکل یک قفل طراحی شد. ایده‌ی آن ساده و مفهومی بود: وقتی به خانه می‌رسیم، نخستین کاری که انجام می‌دهیم، باز کردن قفل در است. این لوگو نیز به همین لحظه‌ی ورود اشاره دارد. از آنجا که طراحی و برنامه‌نویسی وبسایت نیز توسط ما انجام می‌شد، برای لوگو یک موشن‌گرافیک اختصاصی طراحی کردیم. به این ترتیب، وقتی کاربر وارد سایت میشود، ابتدا لوگوی قفل را می‌بیند که با انیمیشنی کوتاه باز میشود و به‌تدریج به عبارت House 13th تبدیل می‌گردد؛ فرایندی که به‌زیبایی مفهومی میان «خانه»، «ورود» و «عدد سیزده» برقرار می‌کند. طراحی و توسعه‌ی وبسایت بر پایه‌ی اصول مینیمالیستی انجام شد. تمرکز اصلی بر سادگی و انتقال مفهوم از طریق گرافیک بود. در صفحه‌ی اصلی، به‌جای تصاویر واقعی، از خطوط گرافیکی استفاده کردیم که با یک افکت موشن اختصاصی، حس ترسیم زنده را القا می‌کنند. در صفحه‌ی فهرست پروژه‌ها نیز به‌جای تصاویر بزرگ، مجموعه‌ای از آیکون‌های ساده طراحی شد تا هویت گرافیکی و مینیمال پروژه حفظ شود.
naghsh-bahar.com
1396، طراحی لوگو، گرافیک و وبسایت نقش بهار
پروژه‌ی طراحی و برنامه‌نویسی وبسایت مؤسسه‌ی آموزشی نقش بهار از همان ابتدا ویژگی مشخصی داشت که مسیر طراحی را تعیین می‌کرد: این وبسایت قرار نبود انگلیسی یا دوزبانه باشد، بلکه صرفاً به زبان فارسی طراحی می‌شد. همین ویژگی، مبنای تصمیم‌گیری در طراحی هویت بصری و ساختار گرافیکی سایت شد. بر همین اساس، لوگو بر پایه‌ی خط فارسی شکل گرفت و طراحی صفحات بر اساس پتانسیل‌های تایپوگرافی و چینش متون فارسی انجام شد. ساختار کلی وبسایت از چهار بخش اصلی تشکیل می‌شد: بخش نخست شامل صفحه‌های «درباره ما»، «آموزشگاه علمی و فنی‌حرفه‌ای»، «سؤالات متداول» و «تماس با ما» بود. بخش دوم یعنی «اخبار» ساختاری وبلاگی داشت و همچنون دو بخش دیگر، یعنی «تقویم آموزشی» و «گالری آثار هنری»، به گونه‌ای طراحی شده بودند که تا حدی با بخش‌های اصلی درهم‌تنیده و هماهنگ باشند. در تجربه‌ی کاربری سایت، کاربر هنگام ورود می‌توانست آثار هنری را در پس‌زمینه، پشت لوگو مشاهده کند. با جابه‌جایی میان صفحات مختلف، رنگ‌بندی لوگو تغییر می‌کرد تا حس پویایی و تنوع بصری در عین سادگی حفظ شود. هنگامی که کاربر وارد بخش «گالری آثار هنری» می‌شد، لوگو به‌نرمی کنار می‌رفت و آثار هنری از پس‌زمینه به پیش‌زمینه منتقل میشدند تا تجربه‌ای زنده و تعاملی ایجاد شود.
dotgroupstudio.com
1398، طراحی و برنامه نویسی وبسایت گروه نقطه
گروه نقطه یک استودیو طراحی محیطی، طراحی گرافیک و طراحی محصول است. لوگوی این گروه شامل یک دایره زرد بود به همراه چهار شکل که در چهار گوشه این دایره زرد نمادی از همان «نقطه» بود قرار گرفته داشتند. پروژه طراحی و برنامه‌نویسی وبسایت این گروه بر اساس هم‌راستایی با لوگو، هویت بصری و برند این مجموعه انجام شد. صفحه اول وبسایت فضایی ساده و خلوت بود که تنها یک دایره زرد در آن دیده می‌شد. دایره‌ای که مثل نور یک چراغ‌قوه عمل می‌کرد و حس می‌داد با کمک آن می‌توانیم مسیر و مقصد خود را پیدا کنیم. این سایت بر این مبنا طراحی و برنامه‌نویسی شده است تا دو زبانه باشد و تجربه‌ای پویا و جذاب برای کاربر فراهم شود. برای جابجایی میان بخش‌ها از تکنولوژی AJAX استفاده شده است. به زبان ساده، AJAX به وبسایت اجازه می‌دهد بدون بارگذاری کامل صفحه، محتوا را به صورت سریع و پویا نمایش دهد، بنابراین کاربر میتواند به‌راحتی و بدون وقفه میان بخش‌های مختلف جابجا شود.
Habibehmadjdabadi.com
1396، در همکاری با گروه دکمه
پروژه‌ی وبسایت استودیوی معماری حبیبه مجدآبادی در واقع یک پروژه‌ی «طراحی از صفر» نبود، بلکه توسعه و به‌روزرسانی وب‌سایتی بود که پیش‌تر توسط گروه «دکمه» طراحی و برنامه‌نویسی شده بود و ساختار کلی آن از قبل شکل گرفته بود. در این روند، ساختار و چیدمان کلی صفحه‌ی اصلی و همچنین بخش پروژه‌ها حفظ شد. در این دو بخش، تمرکز ما بیشتر بر بهبود تجربه‌ی کاربری در نسخه‌ی موبایل و افزایش سرعت بارگذاری صفجه الو وبسایت بود. صفحات «درباره ما»، «تماس با ما» و بخش مربوط به «انتشارات و جوایز» به‌طور کامل بازطراحی و برنامه‌نویسی شدند. برای صفحه‌ی جوایز، امکان ورق‌زدن، مرور و دسترسی مستقیم به لینک هر جایزه اضافه شد. در صفحه‌ی انتشارات نیز، یک سیستم فهرست‌بندی طراحی و برنامه‌نویسی شد تا ویدیوها، مجلات و سایر بخش‌ها به‌صورت دسته‌بندی‌شده در اختیار کاربر قرار گیرند. در نهایت، بخش مدیریت (Back-End) وبسایت نیز بازنویسی شد تا تیم استودیو بتواند به‌سادگی پروژه‌های جدید را اضافه، حذف و به‌روزرسانی کند.
Payband.co
1396، طراحی لوگو، گرافیک و وبسایت بتن پی بند
پروژه‌ی مجموعه صنعتی بتن پی بند تنها به ساخت یک وبسایت محدود نبود، بلکه شامل طراحی لوگو، هویت بصری و طراحی معماری نیز می‌شد. در طراحی لوگوی این مجموعه، هدف ما ایجاد ترکیبی میان نوشتار فارسی و انگلیسی بود؛ به‌گونه‌ای که هر دو در کنار هم قرار گیرند و با فرم دستگاه بتن‌ساز تلفیق شوند. رنگ اصلی برند، زرد انتخاب شد و رنگ دوم، سبز کله‌غازی. این ترکیب رنگی به‌گونه‌ای برگزیده شد که هم حس صنعتی و قدرتمند تولید بتن را منتقل کند و هم فضایی گرم و صمیمی ایجاد نماید. در طراحی و برنامه‌نویسی وبسایت، با یک چالش ویژه روبه‌رو بودیم: محصول اصلی، بتن بود! و امکان نمایش بصری جذابی ندارد . بنابراین تصمیم گرفتیم به‌جای استفاده از تصاویر واقعی، از گرافیک‌های کارتونی بهره ببریم و میکسرها، سیلوها و ماشین‌آلات تولید بتن را در قالب تصاویری گرافیکی و دوست‌داشتنی به مخاطب معرفی کنیم. این ایده‌ی اصلی با استفاده از سیستم اسکرول الفبایی و افکت‌های پارالکس (که در آن المان‌های مختلف صفحه هنگام اسکرول با سرعت‌های متفاوت حرکت می‌کنند و حس عمق ایجاد می‌کنند) توسعه یافت و به تدریج شکل گرفت.
symptomarchitects.com
1399، طراحی و برنامه نویسی وبسایت دکتر گوهری
دکتر کامبیز گوهری تمایل داشتند وب‌سایتی داشته باشند که دو محور اصلی ارزش را به‌خوبی نمایش دهد: نخست، بخشی برای معرفی و نمایش پروژه‌های معماری انجام شده و دوم، بخشی برای ارائه و دسترسی به مقالات و تالیفات علمی ایشان. در طراحی و برنامه‌نویسی وبسایت، تجربه‌ی کاربری به گونه‌ای تعریف شد که بازدیدکننده بتواند آزادانه در محیط سایت حرکت کند. با حرکت افقی به سمت چپ و راست، کاربر وارد بخش پروژه‌ها و مقالات میشود، و با حرکت عمودی به بالا و پایین، به بخش‌های «درباره ما» و «تماس با ما» دسترسی پیدا می‌کند. این ساختار باعث شد که کاربران حس تعامل و کنجکاوی بیشتری داشته باشند و تجربه‌ی پیمایش در سایت، شبیه گشت‌وگذار در یک فضای فیزیکی باشد. این ساختار انعطاف‌پذیر و آزادانه حرکت، هم‌زمان حس کشف و کنترل را به کاربر می‌دهد و تجربه‌ای منحصر به فرد از مشاهده پروژه‌ها و مقالات فراهم می‌کند، در حالی که تمامی بخش‌ها با هویت بصری یکپارچه وبسایت هماهنگ شده‌اند. .در بخش پروژه‌ها، تصاویر و رندرها با جلوه‌های حرکتی ملایم و انیمیشن‌های کوچک همراه شدند تا بازدیدکننده بتواند به صورت زنده و پویا با پروژه‌ها تعامل کند. بخش پروژه‌ها نیز با اسکرول افقی طراحی و برنامه‌نویسی شده است تا تجربه‌ای پویا و جذاب برای کاربر فراهم شود. برای جابجایی میان بخش‌ها از تکنولوژی AJAX استفاده شده است. به زبان ساده، AJAX به وبسایت اجازه می‌دهد بدون بارگذاری کامل صفحه، محتوا را به صورت سریع و پویا نمایش دهد، بنابراین کاربر میتواند به‌راحتی و بدون وقفه میان بخش‌های مختلف جابجا شود.
Nanonirvana.com
1396، طراحی لوگو، گرافیک و وبسایت نانو نیروانا
شرکت نیروانا در زمینه‌ی عایق‌سازی سطوح با استفاده از فناوری نانو فعالیت می‌کرد. هدف اصلی این مجموعه، جلوگیری از ماندن قطرات آب روی سطوح مختلف بود. پروژه‌ی طراحی برای نیروانا شامل سه بخش اصلی می‌شد: طراحی لوگو، هویت بصری، و وبسایت. در تمام این مراحل، تلاش ما بر این بود که ماهیت نامرئی اما تأثیرگذار خدمات نیروانا، به زبانی دیداری و ملموس ترجمه شود. از آنجا که نیروانا محصول فیزیکی تولید نمی‌کرد، تصمیم گرفتیم مفهوم «آب» را به محور اصلی هویت برند تبدیل کنیم. ایده‌ی اصلی طراحی لوگو، از حرکت و لغزش قطرات آب الهام گرفت و در طراحی وبسایت نیز همین حس تداوم یافت. رنگ‌ها، ترکیب‌بندی‌ها و حتی انیمیشن‌های وبسایت، همگی برای القای حس روانی، شفافیت و پاکی انتخاب شدند. درست مانند سطحی که آب روی آن نمی‌ماند. در صفحه‌ی نخست وبسایت، کاربر با تصویری شاعرانه روبه‌رو میشود: پنجره‌ای که قطرات باران آرام بر آن می‌لغزند، رو‌به‌روی منظره‌ای آرام و روشن. این تصویر استعاره‌ای از ماهیت برند است.. محافظت در برابر نفوذ آب، بی‌آن‌که از زیبایی و لطافت باران بکاهد. فضای بصری سایت با حس و حال یک جمله‌ی شاعرانه کامل میشود: «می‌زند باران به شیشه، مثل انگشت فرشته... قطره‌قطره، رشته‌رشته... خاطراتم همچو باران، در گذار از کوهساران...» در نهایت، تجربه‌ی کاربر در وبسایت نیروانا، ترکیبی از فناوری، ظرافت و شاعرانه‌گی است. برای شبیه‌سازی رفتار قطرات آب و حرکت طبیعی آنها بر سطح شیشه، از فناوری WebGL استفاده کردیم تا جلوه‌ای زنده و واقعی در مرورگر ایجاد شود. WebGL یا Web Graphics Library یک فناوری گرافیکی تحت وب است که به برنامه‌نویسان اجازه می‌دهد صحنه‌های سه‌بعدی، انیمیشن‌ها و جلوه‌های بصری پیچیده را مستقیماً در مرورگر نمایش دهند، بدون نیاز به افزونه یا نرم‌افزار جانبی. استفاده از این فناوری باعث شد حرکت قطرات آب در وبسایت نیروانا، طبیعی، پویا و کاملاً تعاملی به نظر برسد.
Kouroshsamani.com
1397، طراحی لوگو، گرافیک و وبسایت کوروش سامانی
پروژه‌ی وبسایت کوروش سامانی در ابتدا صرفاً به‌عنوان یک پروژه‌ی طراحی و برنامه‌نویسی وب تعریف شده بود. اما در جریان کار، متوجه شدیم که ایشان هیچ لوگو یا سیستم هویت بصری مشخصی ندارند. به همین دلیل، تصمیم گرفتیم طراحی لوگو و هویت بصری را به‌صورت رایگان و به‌عنوان بخشی تکمیلی به پروژه اضافه کنیم. لوگو در واقع از نام خود ایشان تشکیل شد که با یک فونت اختصاصی و ترکیبی از سادگی و ظرافت طراحی شد. هویت بصری وبسایت با رنگ‌های تیره و ترکیب‌بندی سنگین و رسمی شکل گرفت تا حس وقار، دقت و حرفه‌ای بودن را منتقل کند. در واقع، تمام جزئیات طراحی ( از انتخاب رنگ‌ها گرفته تا تایپوگرافی) با هدف ایجاد چنین حس و حالی هماهنگ شدند. در طراحی و برنامه‌نویسی وبسایت، هدف اصلی ما خلق تجربه‌ای تمام‌صفحه و غوطه‌ورکننده بود. میخواستیم کاربر به‌محض ورود، مستقیماً با محتوا روبه‌رو شود، نه با قاب‌ها و حاشیه‌های معمول صفحات وب. برای همین، بخش‌هایی مانند «هدر» و «فوتر» (که معمولاً در بالا و پایین صفحه قرار دارند) در کوچک‌ترین و مینیمال‌ترین شکل ممکن طراحی شدند تا مزاحم تجربه‌ی کاربر نباشند. به این ترتیب، فضای وبسایت حالتی ساده، یک‌دست و بی‌مرز پیدا کرد؛ تجربه‌ای که کاربر را از همان لحظه‌ی ورود، در محتوا و فضای برند غرق می‌کند. از آنجا که در صفحه‌ی نخست تعداد زیادی تصویر با ابعاد بزرگ وجود داشت، لازم بود حجم تصاویر کاهش یابد تا سرعت بارگذاری مناسب بماند. اما کاهش حجم معمولاً باعث افت کیفیت میشود. برای حل این مسئله، تصاویر را در پس‌زمینه قرار دادیم و در پیش‌زمینه، یک پترن نقطه‌نقطه‌ی ظریف اضافه کردیم تا افت کیفیت تصاویر محسوس نباشد و بافتی دل‌نشین ایجاد شود.
Alimarefat.com
1398، طراحی لوگو، گرافیک و وبسایت علی معرفت
این پروژه برای مهندس معمار علی معرفت اجرا شد و با طراحی لوگو و هویت بصری آغاز گردید. ایشان تمایل داشتند «گونیا» (یکی از ابزارهای سنتی و دقیق در ترسیم نقشه‌های معماری با قلم و کاغذ) به عنوان المان اصلی در طراحی لوگو و هویت بصری حضور داشته باشد. از آنجا که هر دو مقوله طراحی لوگو و برنامه‌نویسی وبسایت را عهده دار بودیم، تصمیم گرفتیم میان این دو ارتباطی زنده و مفهومی ایجاد کنیم. در صفحه‌ی نخست وبسایت، لوگو به‌صورت پویا جان میگیرد: ابتدا یک فرم مثلثی دیده میشود که یادآور همان «گونیا» است، سپس از دل همین فرم، حروف A و M پدیدار می‌شوند و مشخص می‌گردد که آن مثلث، در واقع همان ساختار حروف ابتدای نام Ali Marefat است. طراحی وبسایت نیز در امتداد همین رویکرد شکل گرفت. در صفحه‌ی اصلی، اسلایدری طراحی شد که در یکی از گوشه‌های آن، بخشی به شکل مثلث خالی شده است. در سراسر وبسایت نیز از خطوط مورب و المان‌های گرافیکی مایل (/) استفاده کردیم تا میان ساختار بصری وبسایت، لوگو و هویت کلی برند، هماهنگی و یکپارچگی برقرار شود. از آنجا که در صفحه‌ی نخست تعداد زیادی تصویر با ابعاد بزرگ وجود داشت، لازم بود حجم تصاویر کاهش یابد تا سرعت بارگذاری مناسب بماند. اما کاهش حجم معمولاً باعث افت کیفیت میشود. برای حل این مسئله، تصاویر را در پس‌زمینه قرار دادیم و در پیش‌زمینه، یک پترن نقطه‌نقطه‌ی ظریف اضافه کردیم تا افت کیفیت تصاویر محسوس نباشد و بافتی دل‌نشین ایجاد شود.
nojan stone
1400، طراحی لوگو، گرافیک و وبسایت سنگ نوژان
طراحی هویت بصری و برنامه‌نویسی وبسایت شرکت سنگ نوژن پرگاس بر اساس درخواستی انجام شد که در آن، با وجود شباهت لوگوی کارفرما به اَرّه و دستگاه برش سنگ، آنها تمایل داشتند که اشاره‌ای غیرمستقیم به درخت کاج در طراحی وجود داشته باشد. طراحی صفحه‌ی اصلی و فهرست سنگ‌ها نیز با الهام از فرم و الگوی درخت کاج انجام شد . سنگ ها طی الگویی کاج گونه همراه با یک انیمشن چیده میشدند تا هویت بصری سایت با خواسته کارفرما انطباق پیدا کند. در بخش «سنگ‌ها»، بازدیدکنندگان عادی تنها قیمت‌هایی حدودی را مشاهده می‌کردند. اما کاربران می‌توانستند در وبسایت عضو شوند و اعضای سایت به جزئیات و قیمت‌های دقیق‌تر دسترسی داشتند. این وبسایت همچنین بخشی به نام «دانستنی‌ها» داشت که برای آن، یک سیستم اختصاصی مدیریت وبلاگ طراحی و برنامه‌نویسی شده بود. به‌دلیل تعطیلی شرکت در دوران همه‌گیری کرونا و تغییر مسیر کاری مجموعه، وبسایت اصلی دیگر فعال نیست. با این حال، نسخه‌ای ساده‌تر و آرشیوی از آن با محتوای محدود روی همین سرور در دسترس است و شما می‌توانید این نسخه را مشاهده و در آن گشت‌وگذار کنید.
alireza hoobakht
1396، طراحی لوگو، گرافیک و وبسایت علیرضا هوبخت
اگر بخواهیم پروژه‌ی طراحی و برنامه نویسی وبسایت مهندس معمار علیرضا هوبخت را توصیف کنیم، می‌توان گفت با یک وبسایت پورتفولیوی ساده و بی‌دردسر روبه‌رو هستیم؛ بدون زرق‌وبرق اضافه و با تمرکز بر سادگی و خوانایی. برای طراحی، دو فونت اصلی انتخاب کردیم و کل ساختار گرافیکی وبسایت بر اساس همین دو فونت شکل گرفت. از آنجا که در صفحه‌ی نخست تعداد زیادی تصویر با ابعاد بزرگ وجود داشت، لازم بود حجم تصاویر کاهش یابد تا سرعت بارگذاری مناسب بماند. اما کاهش حجم معمولاً باعث افت کیفیت میشود. برای حل این مسئله، تصاویر را در پس‌زمینه قرار دادیم و در پیش‌زمینه، یک پترن نقطه‌نقطه‌ی ظریف اضافه کردیم تا افت کیفیت تصاویر محسوس نباشد و بافتی دل‌نشین ایجاد شود. در حال حاضر، علیرضا هوبخت در ایران حضور ندارند و در شرکت‌های خارجی مشغول به کار هستند. وبسایت اصلی دیگر فعال نیست، با این حال نسخه‌ای ساده‌تر و آرشیوی از آن با محتوای محدود روی همین سرور در دسترس است و شما می‌توانید آن را مشاهده و مرور کنید.
farahmand clinic
1395، طراحی لوگو، گرافیک و وبسایت کلینیک فرهمند
وقتی کلینیک پوست و کاشت مو فرهمند به ما مراجعه کرد، یک وبسایت آنلاین داشتند. هدف ما این بود که نسخه‌ی جدید، حس آشنایی برای کاربران قدیمی حفظ کند و در عین حال تجربه‌ای تازه و به‌روز ارائه دهد، بدون اینکه کسی هنگام ورود به سایت جدید گیج شود. باید ساختار کلی تا حد زیادی شبیه به وبسایت قدیمی باقی میماند. اگرچه قرار نبود برای آنها لوگو طراحی کنیم، اما نمی‌توانستیم بی‌تفاوت بمانیم. لوگوی آنها جذابیت بصری نداشت، اما از آنجا که سال‌ها با همین لوگو فعالیت کرده بودند و برندشان با آن شناخته شده بود، نمی‌شد آن را به‌طور کامل تغییر داد و امکان تعویض کامل آن فراهم نبود. ما ساختار کلی لوگو را حفظ کردیم اما هندسه و گرافیک آن را بهبود دادیم، خطوط منحنی‌ای اضافه کردیم که تداعی‌کننده مو باشد و هویت بصری برند را کمی مدرن‌تر و جذاب‌تر کند. در طراحی و برنامه‌نویسی وبسایت، تلاش شد تا تا جایی که امکان دارد، از قالب‌های روتین فاصله بگیریم و تجربه‌ای متفاوت و تعاملی ارائه دهیم. به‌عنوان مثال، بخش «قبل و بعد از کاشت مو» به گونه‌ای طراحی شد که کاربر بتواند با حرکت ماوس یا لمس صفحه، تغییرات را به‌صورت تعاملی مشاهده کند و تجربه‌ای زنده و ملموس از نتیجه درمان داشته باشد. به‌دلیل تعطیلی شرکت در دوران همه‌گیری کرونا و تغییر مسیر کاری مجموعه، وبسایت اصلی دیگر فعال نیست. با این حال، نسخه‌ای ساده‌تر و آرشیوی از آن با محتوای محدود روی همین سرور در دسترس است و شما می‌توانید این نسخه را مشاهده و در آن گشت‌وگذار کنید.
risingedgemusic.com
1395، طراحی لوگو، گرافیک و وبسایت گروه رایزینگ اج
از آنجا که من، پژمان طیبی، زمانی عضوی از گروه موسیقی Rising Edge بودم، طبیعی بود که طراحی لوگو و طراحی و برنامه‌نویسی وبسایت این گروه نیز بر عهده من باشد. شاید بتوان مفهموم «rising edge» را اینگونه بیان کرد: شروع یک روند یا حرکت صعودی؛ شروع تحرک یا تغییر مهم؛ نقطه‌ی شروع تحول یا فرصت در روند طراحی لوگو تلاش کردیم همین مفاهیم را به زبان گرافیکی منتقل کنیم. و در هنگام پیاده سازی لوگو، برای آن یک موشن گرافیک برنامه نویسی کردیم که کاربر بتواند با حرکت دادن ماوس خود، حول آن «نقطه» بچرخد و با لوگو تعامل کند.. برای وبسایت، همچنین یک پلیر موسیقی و یک ویدیوپلیر طراحی و برنامه‌نویسی شد تا کاربران بتوانند آهنگ‌ها و ویدیوهای گروه را به راحتی مشاهده و گوش دهند.
passargad door
1394، طراحی و برنامه نویسی وبسایت درب پاسارگاد
طراحی و برنامه‌نویسی وبسایت درب پاسارگاد با هدف بازتاب حس و مفهوم «درب» انجام شد. در همان لحظه‌ی ورود به سایت، کاربر با تصویری از یک درب روبه‌رو میشود. هنگام بارگذاری صفحه، این درب بسته است و پس از تکمیل بارگذاری، به‌آرامی باز میشود تا حس ورود به یک فضا را القا کند. در ادامه، مجموعه‌ای از درب‌ها (محصولات) نمایش داده میشود. با حرکت نشانگر ماوس روی هر درب، آن درب با انیمیشنی روان و سرگرم‌کننده باز میشود و اطلاعات مربوط به آن به نمایش درمی‌آید، تا تجربه‌ای تعاملی و لذت‌بخش برای کاربر ایجاد شود. به‌دلیل تعطیلی شرکت در دوران همه‌گیری کرونا و تغییر مسیر کاری مجموعه، وبسایت اصلی دیگر فعال نیست. با این حال، نسخه‌ای ساده‌تر و آرشیوی از آن با محتوای محدود همچنان روی همین سرور در دسترس است و شما می‌توانید این نسخه را مشاهده و در آن گشت‌وگذار کنید.
Romisa Wedding Dresses
1394، طراحی لوگو، گرافیک و وبسایت لباس عروس
این پروژه شامل طراحی لوگو، هویت بصری، کارت ویزیت و برنامه‌نویسی وب‌سایتی برای مزون لباس عروس رومیصا بود. پروژه با طراحی لوگو آغاز شد؛ اما از همان ابتدا، چون هر دو بخش طراحی لوگو و وبسایت بر عهده‌ی ما بود، تصمیم گرفتیم لوگو را به‌گونه‌ای طراحی کنیم که بتوان آن را در قالب موشن و انیمیشن زنده کرد و در طراحی وبسایت به‌صورت پویا به کار گرفت. طراحی لوگو بر دو ایده استوار بود: نخست، نمایش نماد «تاج عروس» در ساختار لوگو تا بیننده در نگاه اول تشخیص دهد اینجا مزون لباس عروس است؛ و دوم، الهام از ظرافت و جزئیات لباس عروس، که با استفاده از نقشهای ستاره‌ای (یادآور درخشش شب عروسی) به تصویر کشیده شد. در ادامه، هنگام طراحی و برنامه‌نویسی وبسایت، ایده‌ی ستاره‌ها را گسترش دادیم و آن را به بخشی تعاملی از تجربه‌ی کاربر تبدیل کردیم. برای این منظور از یک سیستم particle (ذرات) استفاده شد؛ پارتیکل‌ها در واقع نقاط یا عناصر گرافیکی کوچکی هستند که می‌توانند مانند ذرات غبار در فضا حرکت کنند و رفتاری پویا داشته باشند. در این وبسایت، این ذرات به شکل ستاره طراحی شدند و طوری برنامه‌نویسی شدند که با حرکت ماوس در صفحه پخش شوند و هنگام کلیک، انیمیشنی چشم‌نواز و زنده ایجاد کنند.
mehnoosh haghighi
1396، طراحی لوگو، گرافیک و وبسایت مهرنوش حقیقی
این پروژه شامل طراحی لوگو و برنامه‌نویسی وب‌سایتی برای خانم مهرنوش حقیقی، معمار ، بود. پروژه با طراحی لوگو آغاز شد؛ اما از همان ابتدا، چون هم طراحی لوگو و هم وبسایت بر عهده‌ی ما بود، لوگو را طوری دیدیم و طراحی کردیم که بعداً بتوانیم آن را در قالب موشن و انیمیشن زنده کنیم و با طراحی وبسایت ترکیب کنیم. لوگوی طراحی‌شده بر پایه‌ی حروف M و H (سرآغاز نام Mehrnoosh Haghighi) شکل گرفت و در عین حال تلاش داشت مفهومی از معماری را نیز منتقل کند. می‌توان گفت که «معماری، هنر بازی با حجم و فرم است»؛ این لوگو نیز با بیانی گرافیکی، همین تعریف را بازتاب می‌دهد. ترکیب حروف M و H در کنار هم، فرمی مکعب‌گونه ایجاد کرده است. در نسخه‌ی وب، کاربر با بردن نشانگر ماوس بر هر یک از این دو حرف، میتواند آنها را حرکت دهد و به نوعی با فرم‌ها تعامل داشته باشد. این وبسایت از نخستین پروژه‌هایی بود که در سال ۱۳۹۶ انجام شد. طبیعی است که امروز طراحی آن ساده‌تر به نظر برسد، اما در زمان خود با رویکردی برنامه‌نویسی شد که بتواند بدون مشکل در مرورگر قدیمی Internet Explorer 8 اجرا شود؛ موضوعی که در آن زمان چالشی قابل توجه بود.
