4 ms·
I held up the belief that you should design right in the browser and skip the design phase. But I came to the same conclusion as the author: thinking in code is
by mcbetz 11y ago
I held up the belief that you should design right in the browser and skip the design phase. But I came to the same conclusion as the author: thinking in code is a completely different process than drawing things and trying out how your site might look like. My best advice is: draw on paper first, using just a pencil and an eraser. This forces you to focus on structure and relationship rather than pixel-perfection. Hence, by going analog, you focus on function rather than on design as the critics say.
What you do next is up to your preferences. I think it is worth it to transform your sketches to wireframes. In most of my cases that was still a more open process than fitting the sketches into CSS directly - especially if you have designers, business people and coders involved.
One possible solution for wireframing that was already available in 2012 is Illustrator or InDesign. Both have global colors, symbols for reusable content and are vector-based so you can scale it for your responsive designs.
There are less good ressources on wireframing with Illustrator, but I found these two most helpful:
- http://www.designsprint.net/ http://www.designsprint.net/
- http://design.tutsplus.com/articles/10-tips-for-building-wireframes-with-illustrator--cms-19984 http://design.tutsplus.com/articles/10-tips-for-building-wir...
- SunShiranui 11y agoIn my opinion pen and paper are fundamental. Not just in design, but also in programming. There's a lot to be gained by just thinking over and sketching ideas for something rather than just diving into action.
- mcbetz 11y agoI could not agree more about the role of paper for coding. I used to jump right into action and got lost very quickly in details and gave up soon after. Now I try to slow myself down and do sketches about quite everything. Database design seems to be of a special importance, as it hurts so much the find out later that you did not think hard enough and forgot too many cases that you need to incorporate in your database schema. Slowing down with all screens off and mind on certainly makes a huge difference in my workflow.
- interfacesketch 11y agoI hope this isn't considered spamming, but for anyone wanting to sketch a site or app on paper, I created some simple, free templates for web sites or apps. The templates are CC licenced and you can create your own sketch sheets too. http://www.interfacesketch.com http://www.interfacesketch.com
- tracker1 11y agoI admittedly don't think as much in terms of finer points of design so much as usability, and often how structure plays with that... I think about how will this be used. I'll usually only go so far as to create mockups in something like balsamiq, and code as a followup. I find that delving too far into specific aspects of look/feel tend to block the purpose of what's being built. The exception to that being something that is mostly serving as a static content/advertisement/landing page etc... A lot of the time people will try to go too far outside the box. That said, I also spend a lot of time dealing with software that anyone should be able to use... this has lead me to the firm belief that if you try to make something idiot proof, they will only build a better idiot. It doesn't mean that one shouldn't try.. but it does mean that sometimes you shouldn't stray too far from convention... Also, most programmers make lousy interfaces left to their own devices...