Currently what are the functions of a web designer on a project?

I sat down and was going back from drawing a website to actually coding in a browser.

It seemed hard and maybe even impossible. I was scared. Could I do this? But how hard could it be? I’ve done this before …

Code

I got so used to designing (drawing) websites in Adobe Photoshop that I didn’t know where to start. Then I realized that I had already done it in the past with far worse tools then the ones we use now. Web design is not graphic design. It may consist of some of the elements of graphic design but it’s not the same. So why did we start drawing websites in Photoshop in the first place?

What Happened to Web Design?

To find an answer we have to go back to the definition and the core of web design.

According to Wikipedia, the term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing mark up.

When I started taking interest in web design all we had was Notepad to work with. We learned the basics of HTML and designed websites with just that. Later CSS came along, so we learned and started using it. What else do you need?

It’s not that simple. Websites started to evolve. More and more, we started using graphics to enhance websites and make them prettier. Higher bandwidth speeds made that possible. Soon, PHP, ASP, SQL, CMS, SEO, JavaScript and Flash animations all became a part of the web design we know today. It became too much for a web designer to have all the knowledge needed to build a website from scratch. So we divided the role like this:

Web designer

We killed the web designer. We replaced him with a graphic designer that had to draw the website design in Photoshop and send it to a web developer to start transforming the PSD to HTML and CSS. Consequently, the web designer forgot how to code and started drawing most of the time. He drew all the pages of the website and all the interactions and website elements in Photoshop. He drew lines, backgrounds, images text and other typographic elements. He drew everything. It’s easy to draw a pretty website in Photoshop once you master the tool. It was up to the web developers to actually build the website, based on those drawings. We ended up with an overcomplicated process that either didn’t bring the best results or took a very long time to do.

Responsive Web Design Comes Along

When the internet became mobile, we finally realized that drawing websites in Photoshop isn’t ideal. Mainly because there’s a lot of devices with different screen sizes, and drawing a website for each is really a waste of time. We wanted a solution that would speed up the web design process and produce an adaptive product that works regardless of device.

Bring back the web designer.

Web designer

We should never have replaced the web designer. We should have added other types of designers, developers and copywriters to the web design team, but keep the web designer. That’s what we’re doing with designing in browser concept. We’re bringing back the role a web designer used to have. And now, you’re not a web designer if you don’t know how to code. You may be a designer that knows how to use Photoshop to draw pretty interfaces and websites. But you’re not a web designer. To become one, learn HTML, CSS and at least basic JavaScript. Then, build a website with your text editing tool.

It doesn’t have to be perfect. The first website I ever built was utter crap — text, links and images (mostly animated gifs) on a dark background. But I learned how websites work.

You can’t design something if you don’t truly understand how it works.

Merely drawing a website in Photoshop is not designing. You don’t build anything with that. What you do is draw the instructions for developers to follow. You draw, you don’t build and most certainly you don’t design. It’s like if an architect drew plans for buildings, without knowing what materials would be used.

Wire-framing

Wireframing

When I was happy with the sketches I decided to make some high-fidelity wireframes. And I used Photoshop to do that —  I found out that it’s quicker than any other tool. But the goal is to simply quickly redraw sketches. In Photoshop it’s very easy to start focusing on details that don’t matter yet. That’s why this step should be done quickly (especially if you use Photoshop, Illustrator or any other graphic editing tool).

Prototype

The next step, which is important from the UX point of view, is to create a prototype. By now, I already had an idea of how the website will look. Now I had to find out how it would feel using it. And since I decided to go mobile first, I made a prototype for the iPhone. I used high-fidelity wireframes I made in Photoshop and uploaded them to Marvel. (Marvel is a great tool allowing you to quickly make prototypes from images or .psd files.)

Visual

After I tried out the prototype, I decided to make quite a few changes. The website didn’t as easy to navigate as I anticipated. (That’s why you build a prototype early in the process.) I could also make the prototype directly in the browser, but I think that Marvel app made it a lot quicker in this particular case.

Visual Design

Visual Design in Photoshop

In my plan for the website redesign, I initially had a task called “Visual Design.” It was planned to be executed after the creation of the prototype. The idea was to draw each page in Photoshop and take care of the details. But I changed my mind. I cancelled this task and went straight to coding. 

Coding

I started with a blank HTML document. I decided to focus on typography with some real content first. So I took an old article I wrote and put it in the HTML. I tried out various combinations of typefaces and sizes. There was no logo, no graphics and no navigation elements. I wanted to focus on how the content on the website will look on different screens, very much in the way Tim Brown explains it here.

When I was happy with the typography, I started adding other elements. Photo background in the top area, logo and navigation were the first additional elements. That’s when I realized that the basic layout of a page and an article should always be the same — unlike what I had done in the wireframes and prototype.

And that’s why going straight to coding really is productive. You can make the changes as soon as you realize that there’s a problem. And it’s more likely that you’ll find these problems sooner, because you’re working on the actual, working product.

Final Touches and CMS Integration

In the end, the decision to skip the drawing saved me a lot of time. Drawing each of the pages would be very time consuming (not to mention that my perfectionism doesn’t allow me to make something halfway). So instead on focusing on details in Photoshop, I was focusing on details straight in the browser. After I made the mobile first website as I wanted it, all I had to do is adjust it for bigger screens and integrate it with a CMS. I decided to try a flat-file CMS Kirby instead of WordPress. (I’ll share that experience with you later.)

Final Touches

I Skipped Photoshop & Saved Time

I planned to launch my website in the second half of March. But because I skipped the drawing of the website in Photoshop and went straight into the browser and coding, I launched it on March 2. The decision to skip drawing each page in Photoshop saved me at least two weeks.

I Improved My Coding Skills

But saving time is not the only good thing about going straight to coding in browser. The other cool thing about it is, that I improved my coding skills drastically. Moving an element or changing a color takes more time and effort. But I learned all the principles of web design technologies and the abilities they offer.

Before, I only knew the basics of JavaScript and jQuery. I used to take snippets of code, change them and use them over and over again. Now I can write my own scripts. It’s something I always wanted to learn, and I did — by actually using it.

What Tools Can We Use?

Making changes in the code and refreshing the website in the browser can become slow and annoying. There are some tools that can help optimize the process. I usedBrackets because it automatically refreshes the website every time a change is made to the code.

I’ve also seen developers coding in tools such as CodePen and JSFiddle, simply because these tools make it a lot easier for them to see the results to the changes in code. Brian Kall also wrote a post about designing in browser and mentions some tools that are available.

Should We Really Forget About Photoshop?

I don’t think so. The web design process includes user interface design, user experience design and graphic design. Complex user interfaces are easier to draw in Photoshop. Graphic elements can also be drawn in Photoshop. To be honest, I still draw most of the interfaces we need at Wondermags, simply because it’s way quicker.

Photoshop is a great tool. For drawing. So, should we think about websites and how they work from the Photoshop’s point of view? This is what we have been doing so far and what it got us is a very complicated and unnecessarily long process.

I think it’s time to go back to the core of web design and skip the Photoshop part where not really needed, by simply start coding our websites in the text editors again. We, web designers, should never have completely abandoned that.

via designmodo

Bam! OFFF 2014 Teaser!

Vídeo

In its fourteenth edition, OFFF Festival represents another pleasurable experience for its audience. But then again, what is OFFF? The perfect place to taste the inside scoop of talented people from all around the world? An awesome line up of speakers leaving you hungry for more? Or is it some kind of festival that makes you come every year? Find out about that in Barcelona on May 15-16-17, because it will just turn you on.
A Teaser by Lorem Ipsum / Atelier
Directed by: Alessandro Novelli
Produced by: Aimée Duchamp & Héctor Ayuso
DOP: Laura Sans
Music & Sound Design: Simon Smith BCN_Sound
First Assistant Camera: Alejandra Rodríguez & Ivan Obara Ulrich
Second Assistant Camera: Angela Bardakjian, Nandini Barnes, Tarini Dii & Karno Guhathakurta
Compositing & Animation: Rafael Mayani, Mar Gascón & Joao Brás Lucas
Art Direction: Nandini Barnes, Angela Bardakjian, Liliana Diaz & Rafael Mayani
Script: Tarini Dii, Karno Guhathakurta, Joao Brás Lucas & Ivan Obara Ulrich
Illustration & Story Board: Rafael Mayani & Liliana Diaz
Producer Assistant: Natalie Melville & Enric Isern
Voice Over: Zakir Maqsood
Characters: Alejandro and Juan aka Brosmind
Lorem Ipsum are students of Atelier 2013/2014: Alejandra Rodríguez, Angela Bardakjian, Ivan Obara Ulrich, Joao Bras Lucas, Karno Guhathakurta, Liliana Diaz, Mar Gascón, Nandini Barnes, Rafael Mayani, Tarini Dii.
Atelier’s Director: Aimée Duchamp
offf.ws
lawebdelatelier.com

via vimeo.com

Mobile Design Kit

Imagem

Mobile Design Kit

Free to use, real pixels screen sizes for 15 flat designed devices, in multiple colors, outlined and with grids.

danielchitu.com/mobiledesignkit.html

Are you thinking of doing something Responsive?

Imagem

Are you thinking of doing something responsive?

Here’s a great site with tips and tricks. I highly recommend.

Sia Aperitivos – Site of the Day

Imagem

E aqui temos nós mais um prémio para Portugal. A Bürocratik empresa sediada em Coimbra foi autora no novo site da SIA Aperitivos que recebeu o prémio de “Site of the Day” pela prestigiada AWWWARDS.

Parabéns à Bürocratik pelo trabalho desenvolvido e à SIA Aperitivos por acreditar na criatividade das empresas nacionais.

website premiado

Flat Design: An In-Depth Look

Flat Design or Flat UI has been one of the most talked about trends in web and user interface design this year. It has frequently been compared with skeuomorphic design, because of its completely opposite principles and style.

Designers have voiced questions over whether this is a lasting trend or just another passing fad. Regardless of the future and the voices against flat, most designers have been tempted to try implementing this trend in some of their work. Here we’ll delve a little deeper into the style, its historical roots and how to start designing in the flat style right away.

A warning before we begin: flat design can be used to create really beautiful, simple interfaces, but it’s not necessarily appropriate for every project. Be mindful of what you’re trying to achieve visually and what you want to communicate.

So, what is Flat Design?

As the name indicates, flat design is defined by flatness of style: simplifying an interface by removing extra elements such as shadows, bevels, textures and gradients that create a 3D look.

The idea is to create a finished design that lives in only two dimensions, without losing any of the functionality that a “regular” interface provides. This creates a new challenge for the designer, because by stripping an interface of its decorations and effects, it becomes harder to define the main actions and elements in a design.

Flat design comes from the wish to create more digital interfaces, and an open canvas for interface innovation in digital devices. A good example of flat design is this icon design collection for Mac OSX, where some of the most famous Mac icons are re-imagined as flat versions of themselves. You can easily see how the icons maintain their style and form even though they’re stripped of details, shadows and textures.

 

Evolution of Flat Design

Historically, in design as in fashion, trends tend to shift continually between the complex and the simple. This is becoming more obvious in the visual design field, especially in web and multimedia, where designs are more ephemeral and don’t last as long as in traditional print supports.

The term “Flat Design” was coined and popularised by Allan Grinshtein, from LayerVault,a Version Control for Designers. In his post “The Flat Design Era, Allan explains that “elegant interfaces are ones that have the most impact with the fewest elements”. The idea is that a minimalistic interface can be better suited to its function when compared to a more embellished, complex one. The community took this on board, having being bombarded with skeuomorphic interfaces over the past year.
Since then, flat design has come on in leaps and bounds. Most flat design schemes have five characteristics – no added effects, simple design and UI elements, a focus on typography, a focus on color and an overall minimalist approach. You can find out more about these characteristics in Designmodo’s post on the Principles of Flat Design. You might also want to check out the Flat UI Free Interface Kit.

Flat Design and Microsoft

The biggest player in Flat Design, and the first to bring this style to the forefront, was Microsoft. In 2006, Microsoft launched the Zune music player. It was expensive, applied DRM to your music files and was a commercial flop. But even though Zune wasn’t commercially successful, it was a first step in defining the rest of Microsoft’s design for years to come. Zune’s interface was minimalistic, with a focus on light and big typography, and an interface free of surplus details and elements.
From 2006 to today, Microsoft has used Zune as a foundation to develop its image and visual interface, becoming cleaner and flatter. Other products from Microsoft also influenced this style, such as the Xbox 360 dashboard, a square-based interface that used simple iconography and typography. Windows 8 “Metro UI” was probably one of the biggest interface overhauls at Microsoft. Its simple geometric interface was replicated shortly after on the Windows Phone 7, a smaller, mobile version of Windows 8 interface.

 

 

How to create a flat design?

Buttons

When creating a button, using a border, gradient and drop-shadow will make the element stand out against the background and content. This makes it easily identifiable as a clickable element.
When creating a flat button, you can’t use these details, so the focus should be put on grid organization and color contrast. You can use bevel and shadow as long as you keep the flat look of the button, but you’ll want to make these controls as simple as possible.

 

Forms

Forms are a crucial element to get right in a flat design. Text areas, inputs and dropdowns shouldn’t use inset shadows as they usually do by default. You can change this by styling the form elements with CSS yourself: see this post on how to create a simple login form and style. Or, if you want to have full control over your elements, try using a plugin that supports themes such as uniformjs and style these themes the way you want, or even create new ones.

Typography

Typography is a very important element in flat design. Since the interface is more minimalistic, you can use typography to help you create the style and mood you’re looking for. You can set a mood just by using a custom and specific font with a flat design outline. Since the background is simple, the font will pop out and set the style for itself. See these uses of typography in flat design to inspire you and learn how others are using it to achieve a particular look.

Colors

A fundamental part of designing an interface is defining a color palette. The color schemes used in flat design interfaces tend to be bolder and brighter than some other color palettes. Flat UI Colors was developed with this in mind and is a great place to check out some of the best (and most popular) colors being used in flat design today.

 

When picking a color palette, remember to think about how colors will help users navigate a site. Be sure to specify a color for the main actions on your website: buttons such as “Submit,” “Send,” “See More,” etc. should all be the same color, ideally a vivid one which will provide a strong contrast with the background. If your logo or brand has a main color, that should be the one used for the main controls. Don’t overuse it though, or you risk make it less important in the user’s eyes.
You should also choose a secondary button color, usually a light gray. That way you can line up two buttons, for example “Submit” and “Cancel”, with “Submit” as the main action and “Cancel” a secondary one. Color choice is especially important in flat design, because when you’re using flat buttons, these colors will be one of the main identifiers that help the user recognize them.

 

Shapes

Usually, you’ll want to make buttons square or square with rounded corners, depending on the style of the site. You can be more creative and use other shapes such as circles, triangles or even custom shapes, but keep in mind the latter might be a bit more risky. Be sure to maintain consistency throughout your interface controls, and to organize content in such a way that the user will be able to identify and recognize your titles, content and controls.
Below you can see the difference between a regular Twitter Bootstrap button and the same button in a flat style on Flatstrap, a flat version of Twitter Bootstrap. The regular button has rounded corners and a really subtle gradient and drop-shadow, while the flat version is completely stripped of these effects, merely changing to a darker shade on mouse-over.

 

 

Where should flat design be used?

Flat design should be used moderately. Even though it’s a simple way to create a light and minimalistic interface, it isn’t right for every website. For example, flat can be great if you’re designing a portfolio, or web tech startup site, but it can be a limitation if you’re trying to create something more complex. If you’re designing a website for children, you’ll probably want to make it flashy and colorful, full of fun elements and animated characters. In the same way, if you’re creating a gaming website it should be all about graphics and effects, and the design should be connected to the game.
These types of website can be done in flat, but the flat style may end up harming your website. Always keep in mind your target audience and the message you’re looking to convey. If flat design can be used while keeping your message clear, use it, but don’t make a trend or a visual style more important than your website’s content.

Usability is (always) more important than looks

If you’ve made the decision to create a flat design for your website or product, be sure to test your mockups or prototypes with real people to ensure that your work achieves its objective. You can also try A/B Testing to test two different designs and see which converts more. The main purpose of a web app, mobile app or website should always be to clearly communicate a message and provide a usable and intuitive interface for the user. It’s the designer’s job tomake sure a certain design aesthetic doesn’t hurt usability.
If you create a beautiful design that users can’t understand, then you are hurting the product. Trends and styles should always be used in harmony with the objectives of the project. It’s easy to lose yourself when creating visual work that’s clear in your mind, but at the end of the day, numbers and tests with users are always the best way to know what’s really working and what’s not. Sometimes a simple change can make a great difference to the user.

So, should I use Flat Design?

Always keep in mind that a trend is only a trend. Try to create a great design, but one that is right for your target user. The priority is to create a functional and usable website, not a good-looking and trendy website. As Wells Riley said in his post Less Aesthetic, More Design, “Design is a form of problem solving. Never forget that.”

via awwwards.com

shit for making websites

  1. Screensiz.es

    A screen size chart for common devices. Sortable by Device name, OS, screen size, resolution, PPI, density and popularity.
    http://screensiz.es/

  2. Log – Console.log with Style

    easier writes to console.log that provides colors and formatting. I am deeply in love with this one.
    http://adamschwartz.co/log/

  3. Live editing proof of concept in Firefox and Sublime

    Should be released soon.

  4. Backbone.js

    Backbone’s been around awhile, but it hit 1.0 today. Definitely worth looking at as a framework for larger JS apps.
    http://backbonejs.org/

  5. Superhero.js

    a treasure trove of articles surrounding JavaScript application development.
    http://superherojs.com/

  6. CSS Front-end Frameworks with comparison – By usabli.ca

    A comparison of more CSS Frameworks than you’ll ever care to use in practice. Compares more than 30 front-end frameworks by browser support, the use of less/sass, mobile and tablet support and finally, license.
    http://usablica.github.com/front-end-frameworks/compare.html?v=2.0

  7. PouchDB, the JavaScript Database that Syncs

    PouchDB is a JavaScript library that allows you to store and query data for web applications that need to work offline, and sync with an online database when you are online.
    http://pouchdb.com/

  8. LESS- The Dynamic Stylesheet language

    LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. Everything gets compiled back to CSS on the server side (typically using Node) or client-side JavaScript.
    http://lesscss.org/

  9. bower – a package manager for web

    A simple command-line tool to download components (and their dependencies) for web projects (there are over 1,000 in their registry). Requires Node.
    http://twitter.github.com/bower/

  10. Screenhero – Collaborative Screen Sharing

    2 cursors, 2 keyboards, one remote session. And it’s free.
    http://screenhero.com/

  11. Gather Content

    Help organize and collaborate on content needs for your project and then send it on it’s way via their API.
    https://www.gathercontent.com/

  12. Redacted

    A strange little typeface meant for use during the wireframing/prototyping phase of a project. Redacted is essentially a Lorem Ipsum replacement that renders solid blocks of grey or illegible scribbles instead of legible text.
    https://github.com/christiannaths/Redacted-Font

  13. Handlebars.js: Minimal Templating on Steroids

    A JavaScript implementation of the mustache templating language.
    http://handlebarsjs.com/

  14. Swiftype: Modern full-text search for websites and applications

    An embedded search app for websites that provides great analytics and allows you to easily customize search results for specific queries.
    https://swiftype.com/

  15. Firebase – A scalable real-time backend for your website

    A real-time SaaS backend for apps, accessible entirely from front-end JavaScript
    https://www.firebase.com/

  16. Moment.js – A lightweight javascript date library

    A 5.5kb javascript date library for parsing, validating, manipulating, and formatting dates.
    http://momentjs.com/

  17. lenticular.js – tilt-controlled images

    sort of like tilt (or mouse) controlled animated gifs. fantastic for product demos, etc.
    http://lenticular.attasi.com/#

  18. Online JSON Editor

    A fantastic little JSON editor. Has a left pane for JSON and a right pane for a human-readable view of the data. You can edit either side and push changes back and forth, open from a url, or click save and download the edited file.
    http://jsoneditoronline.org/

  19. Parsley.js – Forms Validation

    A client-side form validator (i.e. for users, not for servers) that let’s you use html data-attributes to trigger form validation, which is to say you don’t have to write any additional JavaScript to make it work.
    http://parsleyjs.org/

  20. Bountify – Crowdsource Small Coding Tasks

    Post a problem and a cash bounty, get back code.
    https://bountify.co/

Design Responsive Websites Visually

Imagem

With Webflow you build using our powerful and intuitive UI. Export production-ready HTML & CSS.

How it works?
Responsive design that’s faster & easier.
Webflow enables you to create responsive layouts and pixel-perfect designs directly in your browser, without writing a single line of code.

Design
Drag & drop elements on the page, and style them any way you want. If you’re familiar with Photoshop, you’ll love Webflow.

Export
Webflow generates beautiful, production-ready HTML and CSS. It’s the same code that a developer would write.

Launch
Your website works across all modern browsers and devices. Push the code to your own server or let us handle the hosting for you.

Try Webflow

SCREENGRAB

Vídeo

This amazing experimental video by documentary filmmaker Willie Witte has to be seen to be believed – although it may make your eyes go funny if you stare at it too long. Showing seamless-looking transitions between his hands and printed photos of his hands, you won’t believe no video editing software was used in its making – but Witte insists “all trickery took place literally in front of the camera”.