11

Ask DN: How can a developer design?

9 years ago from , Student, Developer

So I'm a dev, and not a designer. I have an interest in web dev and I already make some web apps. I like to think that I am about average in design (and frontend dev), but I want to improve.

How do I do that? Specifically:

  1. How do I start using Illustrator or Sketch to make logos?
  2. How do I make fast UI prototypes in either of the apps (I don't like to think a lot about what I make design-wise, but I kinda wanna change that).
  3. Any other tips?

13 comments

  • Darth BaneDarth Bane, 9 years ago

    Don't take this the wrong way, but your first question is structured as if there's a quick and easy answer to it, which isn't the case. There is no quick answer to how you start using Sketch to make logos, it would be like asking "how do I start using Rails to code a website?"...you're starting in the wrong end! ;)

    When it comes to prototyping, I suggest designing in-browser if you're already a developer (and making web apps). Come up with an idea, do some rough sketches on paper, then code it. Skip wireframing, skip Photoshop/Sketch.

    11 points
    • Jan Vu NamJan Vu Nam, 9 years ago

      I agree. I'd add that in the end product designing isn't painting in Sketch, but creating abstract functionality, defining experience and aesthetics, defining interactions with user. Can't forget incorporating business goals etc.

      Achieving all this by applying certain design principles and methods.

      Design for me is a way you think about the product. More specific than business manager, more abstract than developer. Therefore if you can share your ideas and propose design solutions without learning new tools, do that.

      0 points
  • brian andrichbrian andrich, 9 years ago

    By designing.

    4 points
  • Kyle PapkeKyle Papke, 9 years ago (edited 9 years ago )

    Http://designcode.io is good Treehouse has nice design courses.

    There's no substitute for practical experience. Design in browser as others said. Livereload helps with instant feedback on css changes.

    Just like cloning a git repo to learn someone's code, I've learned a lot by copying html/css of UIs I liked and tweaking it to figure out how it works.

    2 points
  • Jamie WilsonJamie Wilson, 9 years ago

    My two cents: focus on problem solving.

    Designing a good logo is all about communicating a brand in the quickest and most effective way possible. It's about first impressions. This is as much a strategic problem as it is an aesthetic one.

    One way to practice this skill would be to find a company/product that doesn't communicate as effectively as they could. First, define what the product/service does in the simplest terms possible. Define who the target market is, who will likely use it and why. Define what tone that brand needs to speak with to resonate with their audience. Fun? Serious? Etc. at that point, start thinking in terms of visual form. Then pick a tool like sketch or illustrator. Or a camera or a pencil.

    When designing UI, first define the language of the interface, the structure, hierarchy and the flow. Once you get that together, making it look pretty is bonus. First figure out how to make it useful and easy. Then make it fun or elegant or whatever the brand of the product calls for.

    1 point
  • Sasan HezarkhaniSasan Hezarkhani, 9 years ago

    I think learning to design consists of two things:

    1. Knowing what tools exist out there. Leaning how to use them, and most importantly becoming so good at them so that you can pick the right tool for the right job. For example, a logo designer would pick AI and not Sketch.

    2. Knowing what is a good design and what's a bad design. This partly comes with experience, so design and experiment as much as you can.

    However, the most important thing you need to do is to study. Study other people's work, try to understand why they did things the certain way they did.

    Follow some designers that you respect and try to pick up the little tricks they involve in their projects. Great works are great because of the thought that has been put into producing them. You need to learn how to think like a designer.

    Look at everything in your everyday life with *design( in mind. The bus stop sign: why that color, how would you improve it. etc.

    Hope this helps.

    1 point
  • Jake PetersonJake Peterson, 9 years ago (edited 9 years ago )
    1. It's easier to draw something in pencil then trace it in vector. with experience, some designers can draw directly in illustrator/sketch with bezier curves, some can't. It's easy to draw something that resembles a logo but it takes iteration and exploration to design a logo that truly represents a brand or idea.

    2. Traditionally, I draw 10-15 small thumbnails on paper, pick the best ones and then draw them in a wireframe style in photoshop. It's easy enough to prototype layouts with Bootstrap but layouts aren't the only thing to create.

    3. Moodboards. Instead of creating pixel perfect mockups, create loosely designed ideas that feature colors, typography and some elements in a composition that will save you time and show you what works & what doesn't.

    3a. Design and development are separate tasks, so don't do them at the same time. Focus on each one independently in the beginning and bring them together at the end.

    1 point
  • Thibault MichelThibault Michel, 9 years ago (edited 9 years ago )

    In addition to what others have said, these might be good starting points given your background:

    Reading can only get you so far though, so keep practicing by doing small fun projects. You may also carefully inspect other designs and try to replicate them to understand how they work.

    Hope this helps.

    1 point
  • Matt BaxterMatt Baxter, 9 years ago

    Know that being good at design is more than just knowing how to use the tools If you want to improve your design abilities, then you need to make sure you have the fundamentals of design down.

    Here are some great books that I would start with to understand interaction design and usability:

    Universal Principles of Design

    Design of Everyday Things

    I would also check out this post: How to become a designers without going to design school

    To learn the tools, I would check out Treehouse's web design track and Tuts+.

    1 point
  • Bud ParrBud Parr, 9 years ago

    The others are certainly right, but I would I add that the best way to learn is to do, so specifically I'd suggest finding sites that you think are designed well (use one of the numerous "inspiration" sites) and reverse engineer them. Look at what they're doing and how that works in code and try to build it.

    You can use tools like Hammer, or Mixture.io to prototype and build without worrying about infrastructure issues of a back-end.

    Also, I think you'll find Sketch easy and intuitive and worth every penny, while, in my view, AI, not so much. But same goes there: reverse engineer stuff you like.

    1 point
  • Yakim van ZuijlenYakim van Zuijlen, 9 years ago

    First, I totally agree with Ib. Since you are a developer, it's great if you could just design in the browser.

    But I would suggest reading some articles, or books about the basics of design. Things like making color combinations, defining a grid and typography.

    1 point
  • Iheanyi Ekechukwu, 9 years ago

    Hey there! I got into it by just literally jumping into the browser and starting to design. I'm both a developer (Computer Science degree) and designer (Design degree) by nature, but I got into the Design aspect by just creating layouts on paper and then moving to the browser and coding them up. This helped increase my productivity when it came to coding up websites, but then I noticed that I wasn't really completely thinking out everything through wireframes. From there, I started using Sketch to flesh out one page designs (normally the home page or something similar), to get a better idea of how the website and content will look like, and then I would go and code up the design, way faster since I have a reference of how I want it to look.

    My advice is just keep on practicing, you'll get better. Trust me. Good luck!

    0 points