eSites Network Website Design

WHAT'S NEW?
Loading...

So, Your're A Web Designer, Right?

What is the role of a web designer nowadays? An article about the changes that came with the awareness of responsive web design and the new workflow of designing in the browser.

THE WEB OF YESTERDAY

When I started doing this we were what you’d call a petit-comitè. I called myself a developer and worked with a great graphic designer, one of a kind. Our roles were crystal clear back then. Seasons came, seasons went and we started getting deeper and deeper into it. As our imagination kept moving forward, our websites grew more and more complicated. We soon found ourselves in a crossroads and we were forced to rethink our whole model.

My journey into design started with typography, perhaps the only field where my man was not stunningly fluid. I never called myself ‘designer’, though, until I cut off from Adobe’s Creative Suite cold-turkey. Slowly but steadily my role evolved on to designing for functionality and interactivity, copywriting, structuring content, making layouts responsive, building strange custom web applications… Then I was designing. The Graphic Designer’s role evolved too, as he started getting gradually into development, my former side of things. It was from working together that we both expanded our notions and eventually our process. We were naturally responding to a new kind of situation.

THE WEB, TODAY

‘A designer who does not write markup and css is not designing for the web, but drawing pictures’.
‘Most people make the mistake of thinking design is what it looks like. That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works’ – Steve Jobs
It’s been a few years now since the Mobile-First/Responsive meteorite shook the Web community. It has been an arduous but beautiful process. Hard in rethinking the way we work but beautiful in that it opened up a wild ground for madly intense collaboration between everyone involved. We’ve seen every field of the profession coming together and sharing their wonders: techies on Progressive Enhancement, typographers on lettering, grids and layout, designers on workflow, content strategists on sensible structure, top-notch freelancers on how to handle clients…
To remain on top of the situation, every kind of Web professional has had to cross enemy lines to create symbiotic partnerships, in some cases lifelong friendships. And of course, the up-and-coming generation finds itself full of strange creatures that don’t fall under any of the previous categories. They are something in and of themselves.
‘Web Design is Product Design’ – Andy Rutledge
Some time ago, thinking of a designer as just a ‘Graphic designer’ wouldn’t have made much sense. Designers were actively involved in obscure parts of the process. Carving wood, painting, modelling, sometimes building, gardening…

So who killed the product designer?

I haven’t been around long enough to have a clear view, but my guess would be compartmentalization. The sudden boom in demand might have driven companies to define enclosed cells of roles and responsibilities, or ‘silos’; then to hire disposable professionals that would fit, silently contributing to the creation of a thick, standardized, leaden model that would stand the test of time and ensure high-level productivity.

Some people are making public the interest of high-end companies in finding a new sort of profile. They call it the Unicorn. They even went as far as creating the Unicorn Institute to groom this sort of designer. He is defining a position, a new Experience designer or UX Generalist, whose skills make them ready for this entirely new scenario.

He makes a clear division between Specialists (experts in one field over others), Generalists (experts in more than one field) and Compartmentalists (having expertise in only one area). He argues that neglecting the possibility of expanding your boundaries and falling into the compartmentalist category is a career-limiting decision. Plus it’s no fun.

Today’s way of things calls for a new kind of Web designer. A Jack-of-All-Trades, master of none. Startups are looking for the kind of folk that can follow the process end to end. Big enterprises for a more flexible worker that can move swiftly between the many aspects of a project, without hiding behind the barriers of their specialty.

THE WEB OF TOMORROW

A designer today has to be able to dodge dangers of many kinds. Today’s Web is dynamic, fast, adaptive, mobile-optimized, ready for the modern consumer, which is pretty much everywhere and thus totally unpredictable, very intelligent and thus easily annoyed; and capable of showing an unbelievable capacity to dive blindfolded, headfirst into information overload and not only survive but make something of it.

We’ve been exposed to some groundbreaking design work recently:
  • The journalistic community has seen incredible new layout techniques that may get to redefine the way content will be presented.
  • More and more services are going online. We are seeing smarter, faster, stronger web applications that are way closer to software than what a blog ever was. Plus many either benefit from the advantage of being an online tool. Many are based upon collaboration, and what better place than the web?
  • Experiments with 3D graphics that resemble high-end videogames, straight in the browser. And so on.
  • We are not in a header-nav-content-sidebar-footer scenario anymore.
  • The skills needed to achieve the Web of tomorrow will mutate with the scenario. So changing the way we do websites starts by revising our process.

IN SEARCH OF THE HOLY GRAIL

The First step is the hardest

There’s always a phase to devise how to build a product. It is critical that designers and their teams are aware of the technology at their disposal and show little fear in trying something new. Most of the time all this new tech is out there to make our lives easier, and yet you see so many people reject it every day.
Then there’s a time for envisioning the application.

‘Hanging on to older processes that include creating static wireframes and pixel-perfect mockups for design is counter-productive […]. Instead of spending time designing for […] device widths […], designers now have to focus on designing for content’.

The static mockup has seen its time in the spotlight. We are designing for dynamic scenarios now, so we need dynamic prototypes.

‘Designing in the browser’ said: ‘Print tools give you an illusion of control that doesn’t exist on the Web’. It goes on to point out a number of things a Photoshop mockup will never be able to account for:
  • Pixel perfection: never happened
  • Feature uncertainty: browsers differ when handling effects, even the syntax is different
  • Things never designed to interact together will end up interacting
  • No control over content: take Google+ as a modern dynamic application. Never will anyone be able to mockup something such as this on Photoshop without a million problems.
So what better way to achieve this than diving straight into HTML? Here are some of her reasons. Out of the box, it makes you able to:
  • Design around content and user interaction
  • Design for complexity and uncertainty
  • Find where design breaks the user experience
  • Find where data breaks design
  • The outcome is a template ready for any use
  • Use print tools later on to optimize prototypes
There are tools out there to prototype in HTML in a very visual and easy way.

DESIGNING IN THE BROWSER

I’ve seen way too many comments on blog posts saying something like ‘But that’s not designing in the browser, you’re using an editor!’. So let’s clear some assumptions first. Designing in the browser is not about using the browser as the one and only tool for designing.
‘Don’t design in the browser, decide in the browser.’ – Unknown
It is all about having direct communication between design, code AND the browser. Start designing, see it in the browser. Change stuff, see it in the browser. And if you get to do it in mobile at the same time, all the better.

There are a number of concerns in Web design that can be cleared straight away with this method. For instance, your site’s readability. It is a great way to gain time too: when you’re deep into designing for different states and screen sizes you tend to focus and lose that habit of moving stuff one pixel up or down. The perfectionist inside of you will be too busy checking relationships between elements, fine-tuning interaction details, etc. The big picture will benefit from this as well, as you are producing something that works, as opposed to a picture of it. It feels like moving from a flight simulator onto the real deal… kinda.
In the browser I learned the value of letting content drive my way of developing.

For example, I stopped using device media queries altogether. I started relying on visual cues when deciding where to insert a breakpoint. There was another time when suddenly it made no sense to make complex calculations anymore to account for margins, paddings, positioning… I started trusting my gut and experimenting with Developer Tools and learning to accept what was happening before my eyes. I grew so used to inspecting elements, rearranging them, playing with measurements, content and interactions that the habit ended up trickling down onto my everyday Internet activity. Now, whenever I stumble upon something that catches my eye – some layout detail, typography or anything interesting -, I find it very difficult to stop my urge to inspect it and play around with it. Questions start arising, like ‘What would happen to this thing if it had more text in it?’, ‘How does this guy float that there?’, ‘How in hell are the inline comments on Medium laid out?’. That last one I just had to include.

In the end, it’s all about learning how the browser handles the Web. It is not only possible but easy to learn to speak its language.

The first website I ever did I did in Chrome. I had no idea that by simply switching to Firefox it would look completely screwed. And my troubles got worse because I started testing it when I felt I’d finished it. It was a terrible week. But I’ll never stumble two times over that same stone. From that moment on I integrated visual testing in the development phase. And later on it became a crucial part of the design process. I ask myself how could I be OK with something if I never knew it would work?

Today I design and develop with my devices connected to the computer and I kind of catch problems before they even appear, this way. It’s become essential to me. I don’t trust my beautiful Apple stuff to fully represent the Wild, Wild Web, though. I never do 480, 768 or 1024px media queries anymore. And it feels liberating. It chooses random values each time (Small-ish. Medium-ish. Large-ish). Your site should look great in all of those. For the mad ones, it includes a ‘Disco’ mode, like those old Casio keyboards, ‘to watch the viewport bounce around like a maniac’. Is your site up to this?

THE LEAP OF FAITH

In Spain, a lot of us speak English. Most of us don’t, really. It’s more like this: we think of something in Spanish, in our heads we translate it into English and then we verbalize it, with an accent. And we look like morons. That’s not really speaking languages. It’s more like half-assed interpreting. The day you start thinking in English you start speaking in English. The more confident you grow, the better you speak.
But the key lies in the method. What makes the fluent speakers different from those who plainly interpret languages? It’s the lack of fear when challenged with a conversation. You learn to speak by speaking.
As I see it, this is very related to a designer learning to code. After all, it’s language we’re talking about. It’s not until you make that leap of faith that you’re starting to truly learn how an application works. It might look scary but there’s many people that have already done it and loved it.

The time you spend in learning to design for the Web comes back full circle.

Back in the day it was an odd feeling for us. On one hand we felt like we were somehow breaking out a proven way of working. On the other hand it felt like we were gradually let in on a big secret. We were making up our own rules as we went along. We were making our journey more interesting and as we grew more confident, the result was becoming stronger.

We were redefining ourselves as designers.

Copywriting Tips to Boost Your Online Marketing

When it comes to online marketing – good copywriting is essential. Flashy websites are great, but copy is what ultimately sells. But, good copy isn’t as easy as slapping a few words on a page. It takes fineness. These 10 copywriting tips will help you take your copywriting to the next level.

copywriting Copywriting Tips That’ll Make Your Online Copy Shine

1 – Write your copy first

Often the hardest step is the first one. This can be especially true for copywriting. Get your thoughts down on paper. Don’t worry about making them perfect. Just say what you want to say.

2 – Let it sit for five (or more)

Nothing will kill your credibility like typos. While it’s best to have a fresh set of eyes review your work, even the best of the best have editors, sometimes that’s just not possible. But, there is rarely a time your copy can’t sit for at least five minutes.

2 – Edit. Edit. EDIT

Similar to letting your piece sit, editing is critical. From the simple typo and punctuation mistake to the misspelled and misused word – it can be easy to publish copy littered with mistakes. The end results not only make you and your business look bad, but also can deliver a message you didn’t intend.

3 – Optimise your text

While spending the time to optimise your text with search engine optimisation (SEO) rich keywords may not seem like actual copywriting, in the online marketing world it is. And, it is essential to your success. Why? Because it doesn’t matter how good your copywriting is if no one reads it.

4 – Address the reader

“You” addresses the reader. It brings the reader inside the story and engages them on a personal level. In short – “you” is one of the most powerful words you have as a copywriter.

5 – Tell your reader a story

Nothing bridges the gap from sleazy car salesmen to personal relationship like stories. By telling your reader a story, you speak to their wants and needs. You can address their problems and eventually present your product and/or service as the solution.

6 – Make your headlines catchy

Most people scan web pages. It’s the unfortunate truth. And, if they aren’t engaged they click away. Engage them immediately with a catchy headline.

7 – Use Calls-to-Action

The reason you’re writing copy is to get your readers to act. Adding calls-to-action in your copy shows them and tells them what that next step is. It makes it easy for them. And if there’s anything we all know about readers, they will not work hard.

8 – Call attention to your important facts and figures

Like headlines, calling attention to the most important parts of your copy helps readers navigate the page. You can do this by:
  • Putting important facts in bold
  • Breaking up long paragraphs
  • Adding bulleted lists
  • Using reader friendly text size, font and colour

9 – Enhance your copy with images

The old saying, “A picture’s worth a thousand words,” couldn’t be truer when it comes to online copywriting. Utilise pictures to help tell your story.

10 – Get social

Social Media may seem like a big can of worms you want to keep shut. It’s open. Ignoring it leaves you behind. Share your writing on social media platforms. Add share buttons to your copy to make it easy for readers to also share.

Have you used any of these copywriting tips? Have you used other copywriting tips? What works best for you?