How to get at least slightly better at web design / design work?
March 10, 2017 1:37 PM Subscribe
I am a software person getting asked to do a lot of design work in a temporary position, which I am HORRIBLE at. Please help me make things of which I'm at least slightly proud.
Basically, I am 100% NOT a front-end / UX person. Usability is super important and I care a lot about it in apps that I personally use, but if you sit me down with a blank white screen and tell me to make something that looks good / feels usable, I... will add Bootstrap, then stare back at you until someone lets me go home.
Not really, but my product is always super lame and vaguely off. The navigation doesn't feel quite right, the colors are bland (I'm afraid of color), I'm not at all proud of the final product. It usually stays pretty 2-dimensional. Apps that I admire are usually simple but bold, calming, feel modern and are fairly intuitive. Hard!
In the olden days, pre-Bootstrap and pre-app revolution, when web design was more idiosyncratic, I did do it for fun-- I felt like I was expressing myself. I regularly redesigned my personal blog and it was kind of cool. I'm actually kind of artistic in real life; I like fashion and sketch things to relax. But web design now seems a lot more scientific and user-tested and I'm not really familiar with the principles of the work.
I know women get tasked with design work even when it's not their job all the time, and I find that really frustrating (I am quite sure they wouldn't give any of this design work to one of the other male temps because they would assume they're "nerds" and therefore not artistic), but this is a short-term thing that is sort of an apprenticeship, so technically I should be excited about learning new things. I also feel that on the rare occasion when I get a bee in my bonnet about a web/app project, sometimes not being able to do any design work on it holds me back a bit-- I feel like the final product won't be the sleek usable thing I'm picturing in my mind. So I do want to improve for the sake of it.
Are there simple resources out there for someone like me who has no color/art training but wants to make good, strategic design choices, and make a solid visual product? Are there workflows?
Basically, I am 100% NOT a front-end / UX person. Usability is super important and I care a lot about it in apps that I personally use, but if you sit me down with a blank white screen and tell me to make something that looks good / feels usable, I... will add Bootstrap, then stare back at you until someone lets me go home.
Not really, but my product is always super lame and vaguely off. The navigation doesn't feel quite right, the colors are bland (I'm afraid of color), I'm not at all proud of the final product. It usually stays pretty 2-dimensional. Apps that I admire are usually simple but bold, calming, feel modern and are fairly intuitive. Hard!
In the olden days, pre-Bootstrap and pre-app revolution, when web design was more idiosyncratic, I did do it for fun-- I felt like I was expressing myself. I regularly redesigned my personal blog and it was kind of cool. I'm actually kind of artistic in real life; I like fashion and sketch things to relax. But web design now seems a lot more scientific and user-tested and I'm not really familiar with the principles of the work.
I know women get tasked with design work even when it's not their job all the time, and I find that really frustrating (I am quite sure they wouldn't give any of this design work to one of the other male temps because they would assume they're "nerds" and therefore not artistic), but this is a short-term thing that is sort of an apprenticeship, so technically I should be excited about learning new things. I also feel that on the rare occasion when I get a bee in my bonnet about a web/app project, sometimes not being able to do any design work on it holds me back a bit-- I feel like the final product won't be the sleek usable thing I'm picturing in my mind. So I do want to improve for the sake of it.
Are there simple resources out there for someone like me who has no color/art training but wants to make good, strategic design choices, and make a solid visual product? Are there workflows?
Best answer: I'm in a similar spot to you and I'm going to dust off my old copy of The Non-Designers' Design Book to get some ideas. I'll be following this thread with interest.
posted by matildaben at 2:11 PM on March 10, 2017
posted by matildaben at 2:11 PM on March 10, 2017
Best answer: I'm a software developer who's been stuck doing graphic design work as the best graphic designer of all the software developers (which isn't saying much).
I found the Non Designer's Design Book pretty useful.
Also, starting from someone else's Bootstrap theme can help. I found that with straight Bootstrap I make a bunch of css changes for things I want and then somehow it just looks terribly bitty. Picking a theme that's close to what I want makes it much easier to focus on interesting UX issues rather than why your home rolled design came out looking kinda weird somehow.
For the UX side of things you need to have a really strong vision of who the user is and what they want, and do your level best to validate that vision against reality and also to find at least one person approximately like that and get them to talk you through their attempts to use your site.
If the site has a search box then once it's live you can go look in the logs to see what people type there and you'll know what kind of things they can't find!
posted by emilyw at 2:11 PM on March 10, 2017 [1 favorite]
I found the Non Designer's Design Book pretty useful.
Also, starting from someone else's Bootstrap theme can help. I found that with straight Bootstrap I make a bunch of css changes for things I want and then somehow it just looks terribly bitty. Picking a theme that's close to what I want makes it much easier to focus on interesting UX issues rather than why your home rolled design came out looking kinda weird somehow.
For the UX side of things you need to have a really strong vision of who the user is and what they want, and do your level best to validate that vision against reality and also to find at least one person approximately like that and get them to talk you through their attempts to use your site.
If the site has a search box then once it's live you can go look in the logs to see what people type there and you'll know what kind of things they can't find!
posted by emilyw at 2:11 PM on March 10, 2017 [1 favorite]
Best answer: You might find Tracy Osborn's work helpful - she has spoken about design for non-designers. Here is one of her talks.
(She has also written a book, but I don't know if it has been published yet.)
posted by Lycaste at 2:26 PM on March 10, 2017
(She has also written a book, but I don't know if it has been published yet.)
posted by Lycaste at 2:26 PM on March 10, 2017
I'm sorry, I missed something: there is also the site Colourlovers, which has various color combinations you can apply to your design work.
posted by Lycaste at 2:45 PM on March 10, 2017 [1 favorite]
posted by Lycaste at 2:45 PM on March 10, 2017 [1 favorite]
Ask a favor, make a friend. Find someone either in the company or possibly someone you know who would _love_ the opportunity to just point and say "do that" or "make those colors stronger" or "for this project, you should start by looking at UIX's info on 'personas'". You know, your own personal Tim Gunn who loves those muffins or the mix-CDs you make. Learn from that person.
Being able to _just_ do the thinking/creative part and not have to spend the hours implementing it could be fun for the right person.
Ideally, you could find someone within the company (who's actually being paid) and set up a series of 20-minute sit down together meetings with them and learn.
posted by amtho at 2:45 PM on March 10, 2017
Being able to _just_ do the thinking/creative part and not have to spend the hours implementing it could be fun for the right person.
Ideally, you could find someone within the company (who's actually being paid) and set up a series of 20-minute sit down together meetings with them and learn.
posted by amtho at 2:45 PM on March 10, 2017
Best answer: I am a designer for a living, and I'm thirding the Non-Designer's Design Book. There's a lot of basic stuff in there about what makes a design work (or not work) that should start helping you develop a better sense of visual design. Also, yes, cheating- start every project with a design board of things you like and see what are the common threads... Look at typography, layout, composition, color, etc. and build your design ideas from that. Towards the end of the project, if you have a friend who has real design chops, see if you can get them to weigh in and give you their opinions.
posted by matcha action at 3:58 PM on March 10, 2017 [1 favorite]
posted by matcha action at 3:58 PM on March 10, 2017 [1 favorite]
Best answer: I'm in a similar boat. I'm a Web Development student who is taking a design course, because 1. I'm also horrid at design, 2. there was a gap in my schedule, and 3. in case I'm having to design something, I want it to be looking vaguely OK. This is our workflow:
My prof has us do the all design work *first*, before we start to code.
The first stage is to just do a wireframe, usually in Illustrator. This'll be black and white, but it'll get the layout of the page down - do you want the sidebar on the left or the right, for example.
The second stage is the adding color and fonts to it all, along with pictures, logos, etc., as a mockup. We did this, again, in Illustrator, though I did my initial sketches by hand, with colored pencils and a sketch pad at a coffeshop. I went through many, many color combos before I found a set that both my prof and I liked.
This is where we learned to really nail down the design elements, so by the time it got to the coding stage of things, you know that the nav bar text color is going to be #666, the background of the header will be salmon, all of the text will be in Helvetica, etc. It gives you a visual guide to go by, rather than worrying about, say, both where and how to fit an image into a footer at the same time. The coding part is still challenging for me, but not having to worry about the aesthetics part at the same time is a relief.
We did both wireframes and mockups for Desktop and Mobile layouts.
posted by spinifex23 at 5:46 PM on March 10, 2017
My prof has us do the all design work *first*, before we start to code.
The first stage is to just do a wireframe, usually in Illustrator. This'll be black and white, but it'll get the layout of the page down - do you want the sidebar on the left or the right, for example.
The second stage is the adding color and fonts to it all, along with pictures, logos, etc., as a mockup. We did this, again, in Illustrator, though I did my initial sketches by hand, with colored pencils and a sketch pad at a coffeshop. I went through many, many color combos before I found a set that both my prof and I liked.
This is where we learned to really nail down the design elements, so by the time it got to the coding stage of things, you know that the nav bar text color is going to be #666, the background of the header will be salmon, all of the text will be in Helvetica, etc. It gives you a visual guide to go by, rather than worrying about, say, both where and how to fit an image into a footer at the same time. The coding part is still challenging for me, but not having to worry about the aesthetics part at the same time is a relief.
We did both wireframes and mockups for Desktop and Mobile layouts.
posted by spinifex23 at 5:46 PM on March 10, 2017
Best answer: I agree that you should double-check a few basic rules of design from The Non-Designer's Design Book. To push yourself a little farther, see if you can get access to Lynda.com for free through your local public library. There are a huge number of design courses there. There's a bunch on colour alone -- some are centred on specific software, others aren't.
Yes, cheat. Yes, steal. Collect things you like using SnagIt or Evernote or just bookmarking. You already seem to have a feel for what looks good to you, but now you can use your new design vocabulary to analyze what makes those elements work.
posted by maudlin at 5:50 PM on March 10, 2017
Yes, cheat. Yes, steal. Collect things you like using SnagIt or Evernote or just bookmarking. You already seem to have a feel for what looks good to you, but now you can use your new design vocabulary to analyze what makes those elements work.
posted by maudlin at 5:50 PM on March 10, 2017
Hack Design to the rescue! This is an entire 52-week newsletter curriculum for people just like you! All of this is really current design curriculum training for technologists and developers, and written by people in industry.
posted by yueliang at 2:07 AM on March 16, 2017 [1 favorite]
posted by yueliang at 2:07 AM on March 16, 2017 [1 favorite]
This thread is closed to new comments.
Also: cheat. Find an application/website out there that does something similar to what you're trying to accomplish, and work through its UI flow, take notes, and use that as the basis for your UI design sketches. Feel no shame.
posted by dis_integration at 2:06 PM on March 10, 2017 [1 favorite]