We didn't record and share the conversations we've had with users. Nor is this the full design process where we discussed the overall interaction design and way the product should work.
This is a very specific flow, reviewing the visual and interaction design. In the process, other issues were brought up.
Having built a half dozen products that all have this stage, I'm really not sure what your nitpick is about. It's a 20 minute video not showing weeks worth of other discussions.
Yep—I deleted my comment because it seemed too nitpicky and critical of your process.
My worry was since your post says "This is what design looks like", and doesn't mention the rest of the design process, it could be misinterpreted by fledgling founders looking to you for inspiration.
Your parent comment did a great job of clarifying that. Maybe consider adding to the blog post that it's a "part" of design at a startup? Too many startups only do the founder/designer cycle, and never get designs or wireframes in front of users.
Also, not sure why you felt the need to link to my Twitter... but thanks, I guess?
More surprised to see someone using Sketch. Not that there's anything wrong with that. Just didn't expect it when I clicked the link.
Kind of curious what people are using these days for design.
I originally came from the Photoshop world, and would do all my mocks there initially, but over the last 3 years (mainly since CSS3) I've basically just built my designs in code and made them working prototypes first. I'm no engineer, but I can get a static site running / deployed through cactus / jekyll or whatever and add bits of jquery to get any inactivity done. I will admit it's been harder to keep up with frontends moving to ember / angular and needing more JS skills to fully build out my designs.
Again, not a criticism. Was cool to see a different approach, just curious what most designers are using these days. Thanks for sharing.
I'm generally really curious what people are using for prototyping. I've used Axure a lot, done a few things in Keynote, and recently have just been banging out a rough prototype with Python + Django + Bootstrap. Why do you choose sketch?
Personally, I can't design everything in code. The reason for this is that I catch myself making design decisions based on my knowledge of the technology. Which is always limited. I like to first design things, make a blue print and then figure out how to implement them. If I design based on bootstrap or any other framework, I find myself too "in the box". I think that the use of code in the ideation phase should be more of a proof of concept.
Depends where you work. At a large-ish digital creative agency you're probably stuck in PS creating 100 comps. At the small-ish digital creative agency I'm at the visual designers still use PS because that's where their comfortable but we talk about changing that all the time. I'm an interaction designer and use Axure for very detailed prototypes or some front-end framework (Foundation) for quick things.
I'm in the same boat. I used to use PS but found it slowed me down after my CSS got good enough and I love having the mockup be functional from the start.
When a site already has core styles, CSS and HTML seems sooo much easier because you can leverage existing classes etc. I will only use PS as a starting point for a completely new design where I have no existing styles to speed up the process. I never use PS for a new page on an existing site.
A lot of designers are starting to use Sketch. I've played around with it for a bit and I found it much more straightforward than Photoshop or Illustrator (given I'm not a designer). Plus it's cheaper and less resource intensive. I also like that there is a couple of sites where people share their projects, e.g.
Photoshop chugs really bad on my 2012 MBA. Works great on my 2013 MBP though. I would say for someone who isn't creating assets (it sounds like you are a developer rather than a designer), a lighter tool is definitely preferable. That is, unless you are front-end and needing to open PSDs. Though I suppose you could use Elements for that.
This is not a dig on you - use whatever process works best for you definitely - but I've found that designing in HTML/CSS can lead to problems. It's true that some changes are easier in HTML/CSS. For example, instead of having to copy/paste a layer style to several elements in your PSD, you can simply apply a new style rule to a class in your CSS. But overall I believe working in a design tool like Photoshop (or Fireworks, for example), allows the designer to focus more on the design itself. I've noticed that people who design in design tools like Creative Suite, as opposed to CSS, experiment more and on the whole produce better design. I don't mean to imply causation, it's just something I've noticed. And in particular, I think more graphically rich projects generally benefit even more from using design tools. Just a thought.
I am the designer in the video. I should say that I also used to work for Adobe. And that is not to say that I don't design in PS because I think it is crap. Quite the opposite, the PS team is an awe-inspiring team of PHD-level engineers. I would say that it is a huge tool that is still focused mainly on imaging and is decades old. They have to respond to a very large and diverse user base. I personally, don't like using big monolithic tools, like most web-oriented people I like the light-weight editors and focused tools.
I was a Fireworks user, but since Adobe decided to phase out support, I looked at what my workflow would be like. This transition came at the same time that I was moving away from detailed specs to a more lean design process, leaving the details to when I switch to code. Sketch, makes it very fast for me to create mocks and for the team to switch to code. Everything I design translates very well to web standards. I know that since Generator, Photoshop has a much better export flow to CSS but that is still not how I work.
Overall, my switch to Sketch has been very positive and I would recommend it to anyone that is doing any type of interactive design. Granted, Sketch is still pretty new and is missing a few things. Symbols or Smart Objects being the biggest thing for me.
Right now my workflow is: Omnigraffle for userflows, Sketch for wireframes and sketches, PS and AI for asset creation, Reflow for when I need to try some responsive layout, Edge Animate for motion prototypes, and I'll code with Brackets.
It is not as easy as Omnigraffle. My rudimentary way of doing this is to have a template file that I can copy/paste elements from. One function that I love from Sketch is that you can copy/paste styles, which makes the library use more flexible. You can copy CSS, but I wish that you could also past CSS into an object since we also have an ongoing UI library written in LESS
I feel like there ought to be a vector design tool that makes it easy to just drop UI elements into a predefined display space—preferably even dynamic elements. (And while I'm dreaming, one that makes documentation easy.)
Either I'm missing it, or there just isn't an ideal tool for UI designers right now.
Yeah - I agree - I think that PS is mainly a tool for the creation of assets rather than designing flows and information architecture. And even less so for interaction design.
I will however on occasion use PS to create wireframes when I need them to look presentation-quality.
As an interaction designer I really liked watching this. I don't work for a startup but this is often how quick internal reviews go with a project team member at my company, as well; discovering unique scenarios you need to design for while talking through other issues.
And you're totally right, this isn't limited to startups. I didn't want to title it generally "what design actually looks like" because while I'm pretty arrogant, I'm not that self aggrandizing :)
Thanks for the video, really nice. On one hand, I heard you guys talking about the difference between "subscribe", "pay" and "upgrade". Wouldn't it be more accurate to just fire an A/B Test for that button and see what converts better, instead of heresay?
A/B Testing on button title is pretty trivial and you can verify the result manually. No need for admin panel. Am I wrong?
You're definitely right, and testing calls to action is a potentially easy win. Internally, I've stressed how we should avoid optimizations to help speed development.
The specific issue here was that the call to action to get the payment modal was "upgrade" making it a bit weird for the call to action on the modal to be "upgrade".
31 comments
[ 3.4 ms ] story [ 66.1 ms ] threadThis is a very specific flow, reviewing the visual and interaction design. In the process, other issues were brought up.
Having built a half dozen products that all have this stage, I'm really not sure what your nitpick is about. It's a 20 minute video not showing weeks worth of other discussions.
I'm going to keep this thread though, because nitpicks on HN annoy me.
My worry was since your post says "This is what design looks like", and doesn't mention the rest of the design process, it could be misinterpreted by fledgling founders looking to you for inspiration.
Your parent comment did a great job of clarifying that. Maybe consider adding to the blog post that it's a "part" of design at a startup? Too many startups only do the founder/designer cycle, and never get designs or wireframes in front of users.
Also, not sure why you felt the need to link to my Twitter... but thanks, I guess?
You're totally right. People reading this should know that there is a lot more than what we're showing.
EDIT: Thank you, ivankirigan—much appreciate the switch to my handle.
Kind of curious what people are using these days for design.
I originally came from the Photoshop world, and would do all my mocks there initially, but over the last 3 years (mainly since CSS3) I've basically just built my designs in code and made them working prototypes first. I'm no engineer, but I can get a static site running / deployed through cactus / jekyll or whatever and add bits of jquery to get any inactivity done. I will admit it's been harder to keep up with frontends moving to ember / angular and needing more JS skills to fully build out my designs.
Again, not a criticism. Was cool to see a different approach, just curious what most designers are using these days. Thanks for sharing.
Another tool I've seen that is surprising is Keynote. You can do a lot with simple tools.
When a site already has core styles, CSS and HTML seems sooo much easier because you can leverage existing classes etc. I will only use PS as a starting point for a completely new design where I have no existing styles to speed up the process. I never use PS for a new page on an existing site.
http://pencil.evolus.vn/
http://sketchmine.co
or
http://sketchappsources.com.
That being said, it has a couple of bugs which if you run into are annoying but in no way a deal breaker.
I was a Fireworks user, but since Adobe decided to phase out support, I looked at what my workflow would be like. This transition came at the same time that I was moving away from detailed specs to a more lean design process, leaving the details to when I switch to code. Sketch, makes it very fast for me to create mocks and for the team to switch to code. Everything I design translates very well to web standards. I know that since Generator, Photoshop has a much better export flow to CSS but that is still not how I work.
Overall, my switch to Sketch has been very positive and I would recommend it to anyone that is doing any type of interactive design. Granted, Sketch is still pretty new and is missing a few things. Symbols or Smart Objects being the biggest thing for me.
Right now my workflow is: Omnigraffle for userflows, Sketch for wireframes and sketches, PS and AI for asset creation, Reflow for when I need to try some responsive layout, Edge Animate for motion prototypes, and I'll code with Brackets.
PS is not good for multiple resolutions, and I find Illustrator too complex for the task.
The thing I like about wireframing in Omnigraffle is the wide array of stencil libraries available.
Have you found it easy to find and/or create design libraries for Sketch?
I feel like there ought to be a vector design tool that makes it easy to just drop UI elements into a predefined display space—preferably even dynamic elements. (And while I'm dreaming, one that makes documentation easy.)
Either I'm missing it, or there just isn't an ideal tool for UI designers right now.
Yeah - I agree - I think that PS is mainly a tool for the creation of assets rather than designing flows and information architecture. And even less so for interaction design.
I will however on occasion use PS to create wireframes when I need them to look presentation-quality.
Nice to know someone at Adobe actually used it
And you're totally right, this isn't limited to startups. I didn't want to title it generally "what design actually looks like" because while I'm pretty arrogant, I'm not that self aggrandizing :)
A/B Testing on button title is pretty trivial and you can verify the result manually. No need for admin panel. Am I wrong?
The specific issue here was that the call to action to get the payment modal was "upgrade" making it a bit weird for the call to action on the modal to be "upgrade".