Ruff Redesign

ruff.io

Client Ruff
Type Website
Design / Development Richor Wang
Time 2017-04

ruff.io is the official website of Ruff, an IoT startup company based in Shanghai. During internship, I redesigned it from prototype to front-end engineering, giving a new look to the visual system of Ruff.
ruff.ioはIoTスタートアップRuffのホームページ。インターンシップの期間で、ruff.ioをプロトタイプからフロントエンドまでデザインした。

Problems

The previous website had a visual image of cute and friendly, fitting the aim of the product to be used easily and fast. However, there seems to be no strong visual system as well as clear user flow.

元のサイトのイメージは可愛くて親切ですが、IoTのテック感とは合わない。もっと強いビジュアルと良い情報設計が必要と思われる。

Information Design

The aim of the site turns out to introduce the product and appeal customers to use. After analyzing users and resources, I improved the information flow of the landing page to make it smoother and more efficient.

このサイトはプロダクトの紹介のために作ったもの。ユーザーの習慣と情報を整理した上、情報の流れをリデザインし、より効率になる。

Visual Design

After Prototyping, I started to rearrange the visual system of Ruff.
I kept the cyan color which originated from the development board, but used gradients for a smarter visual appearance. I also made improvements in typography and illustration.

プロトタイプを完成した後、ビジュアルデザインを始めた。水色のメイン色を残りつつ、グラデーションを使って、よりスマートな感覚を実現した。また、タイポグラフィとイラストの調整もした。

Since the site also has a crucial part: documentations for developers, which needs professionality but also needs to be friendly to beginners. I used new font sets, typography settings and code palette for better reading experience.

Afterwards

I didn’t complete the site well enough as I expected, but for the first time I experienced the whole process of web design. It is hard to balance user’s needs with product ambition, to make a strong and impressive visual system, to copy my Sketch perfectly with CSS.
Still a long way to go, and special thanks to Bonnie and Gary for helping me in this project.

THANK YOU.

PREV NEXT

Daily Type