This post originated from an RSS feed registered with Java Buzz
by Mathias Bogaert.
Original Post: Designer in the Code
Feed Title: Scuttlebutt
Feed URL: http://feeds.feedburner.com/AtlassianDeveloperBlog
Feed Description: tech gossip by mathias
Jerry is a user experience designer at Atlassian working with the Atlassian Marketplace team. This is his first post on our dev blog, about his experiences trying to enter the code base and, in doing so, learning a little about how our customers — engineers — think. “Final” Visuals For years designers have lived outside the code, relegated to the realm of Adobe Photoshop and Illustrator. Being satisfied with graphic design programs in this modern age, however, can be hazardous to your health. Problematic UIs and convoluted work-arounds must be used in Adobe for simple tasks such as a pixel-perfect circle. Modifying positioning or groups of elements can be painfully slow. It can be impossible to judge elements against each other in any fast or meaningful way. While Fireworks alleviates some of these problems, and other tools have and may still surface, many graphic artifacts remain in the legacy formats, and don’t lend themselves to easy transition. Many designers do not want to learn new, inscrutable interfaces. With advancements in CSS3, Javascript, and HTML5, the flat world afforded by graphic creation software also no longer matches the capabilities of the dynamic web. As browsers catch up and standards evolve, this problem can only accelerate. Photoshop cannot capture the spinning button of a CSS3 transform, the expand of an accordian, or the click of a tab. With the quirks and inconsistencies of browsers, flat images don’t convey how the legacy user will experience your perfect gradient. With a myriad of new devices, flat images simply cannot convey the evolving ways individuals experience the new web. Even if you have carefully considered theses facts, graphic artifacts still require additional translation: from designer to developer, from developer to code. What may be easy to mock-up in a design may take a good deal of back-end work or have limitations unknown to someone solely in a world of graphics. If something goes wrong in any part of the translation, as is often the case, the process of fixing a mistake can be arduous. Ironically, it is often the small fixes that are hardest to justify due to the disproportionate amount of time investment to reward: filing issues with your resident issue tracker, branching, pulling, pushing, reviewing, blitzing, etc ad infinitum. Teams move on… the designer cannot. S/he files issues sadly, watching them pile-up of in an intimidating, mountainous backlog, unable to effect change, growing sad and bitter. Enter the Code Perhaps the solution, uncomfortable as it may be, is to enter the code. As a user experience designer working with the small but dedicated Atlassian Marketplace team, I thought I might take my own stab at getting in the code. I had worked with html/css in a rote way in the past for some independent development, but had little idea of CSS3 advancements, the build set-up at Atlassian, or of useful development tools. The last time I coded I had been using an outdated copy of Adobe Dreamweaver, pushing code directly to the server. To [...]
Previous Topic
