Be water, my front-end. Web Design and Development | Part 1: Design

Don’t get set into one form, adapt it and build your own, and let it grow, be like water. Empty your mind, be formless, shapeless — like water. Now you put water in a cup, it becomes the cup; You put water into a bottle it becomes the bottle; You put it in a teapot it becomes the teapot. Now water can flow or it can crash. Be water, my friend. -Bruce Lee

Since the Dao of Web Design web designers, developers, writers and businesses who create for digital media have been called to abandon the security of control and adopt the philosophy of adapting. For try as we might, the nature of the digital dimension will not be controlled by we who build within it, but build within it we shall. To do so we must be flexible and responsive in our design, code, process, and mind.

Preface

Today web design and development, apps and other digital mediums no longer boils down to a psd, carfully measured, colored, and typeset. Designers have to develop and/or execute a visual concept and structure that can curate a multitude of various forms of content as well as live and breath in any size and structure. Not only that but these designs must visually and interactively satisfy the ever refining expectation of  people who end up using and engaging this content. This new standard has pushed many designers, like myself, into learning and adopting front-end web design and development skills (HTML, CSS, jQuery, PHP) to understand and execute their user experiences more effectively. Like many others, my first steps towards understanding and adopting an adaptive design philosophy began when I understood Responsive Web Design(RWD). Massaging my brain for hours while pouring over those texts and examples I slowly but surely caught on. After a couple of attempts I had created a simple responsive website.

As a designer turned front-end developer I’ve been striving to open my mind to this new philosophy so I can harmoniously create within the digital nature.

Part 1: Design | Don’t get set into one form, adapt it and build your own, and let it grow…

If your planning on building a flexible layout, you ought to design flexibly.

bewater1_illo1

After understanding the foundation of what RWD is, we are left to build a design on top of it. Many web designers prefer to start this design process in Photoshop, however I prefer Illustrator. I find that Photoshop is majorly pixel focused application and Illustrator is vector based. Since RWD is all about fluid and flexible design, laying out in vector just makes sense to me. I can still import pictures for mock up purposes and even design pixel perfect logos and graphics by using Pixel Preview and Snap to Pixel and Save for Web. Also since most of the designs I make are going to eventually be created in html and sass/css, Illustrator’s ease of use to layout, duplicate, change colors, resize allows me to whip out a mobile, tablet, and desktop layout in a couple of hours.

Droplet to Splash & Mobile First Approach

If you’ve begun to learn about Responsive Web Design, you’ve probably heard of the Mobile First Approach and how beneficial it is to design first for the small, mobile device and then work your way out to the large, desktop devices. While doing this is important to offer your mobile users the same content you do to your desktop users. As wisely stated  before, “you never know better than your users what content they want”. As designers, we are responsible for giving the users what they want in the most pleasing manner possible. The Droplet to Splash is a concept for executing this philosophy and works hand in hand with the mobile first approach. The idea is that you serve the users the content in the most appealing way to them: mobile users like their content optimized for speed, legibility, and simplicity. Desktop users are thirsty to be impressed and engaged by their content.

Whether you serve all your content in droplet form for brevity or as a splash to dazzle and delight, serve them no less.

bewater1_illo2

Until next time, be water my front-end friends.

Part 2 : Development