My story/Ted-talk on how I a dev learned design:<p>1. I downloaded photoshop<p>2. Opened it<p>3. It was white page<p>4. I drew a red box<p>5. Stared at it (was it good? was it bad?)<p>6. Looked at other sites and tried recreating them<p>7. Eventually I learned how to use photoshop but I still didn't get what made things look good, I just knew X looked better than Y???<p>8. I started to learn graphic design.<p>9. I learned lot of design principles, art functions, colors, reptition, texture, ... yet it still didn't click.<p>10. Gave up but got interested in digital painting timelapse videos, where authors would go over why they are doing what they are doing.<p>11. I had epiphany!! Everything in design should have purpose. Every thing that's visible or not should have a purpose, a feeling, a message. Everything should be intentional. Participated in lots of competitions and overtime honed visual skills.<p>12. Ok now I could design beautiful stuff but what to put again, I can make it pretty but what should be the content. Introducing UX research.<p>13. Turns out you should do some research and gather some details on what you want on the page. Who are you building for, what do they want to see or do, what do you want to show/sell/convey.<p>Summary of few rules:<p>- Elements of design: Line, Shape, Color, Texture, Pattern, Negative Space, Mass, Contrast, Proportion, Proximity, Spacing, Balance, Photography, Positioning, Variety/Richness, Consistency, Movement, Rhythm, Tone Of message, Theme, Typography.. you manipulate these to do rest of things.<p>- Things together are seen as one, things same color are seen as together, and vice versa.<p>- Contrast makes things stand out, contrast can be achieved by altering color, size, spacing, arrows.<p>- Colors give feeling (excited, calm, stability), there are color pairs that go together well. Blue/orange, white/red... There can be pairs of 2,3,4 or 5 colors. Some colors don't go well together ie. blue/red. Cue human biology.<p>- Fonts are either serif or non-serif. No point in memorizing all fonts, just browse good font pairs. Usually different fonts for heading and paragraph makes the contrast easy to achieve. Again different fonts for different purposes like colors: think happy birthday font vs lawyer office logo.<p>- Best navigation patterns are which are common, not new ones.<p>- Anything that is inconsistent should be intentional or it leads to confusion. ie. differing space between buttons, random font sizes, different shades of colors, etc.<p>- Use inspirations liberally and then pick what you feel will work for your project, I use dribbble.<p>- Colors next to each other look different then alone or other colors. Brain automatically fills up few things. Think about optical illusions where one side of box looks brighter or a dress looks like its different color but both are the same color, but due to their proximity to other colors make brain interpret them different.<p>- keep in mind how colors work in nature, there is blue ambient color everywhere even in shadows, sun is at top and that affects how we see shadows and see things with shadows having depth.<p>There is somewhat standardized method to do research, I tried documenting all artifacts that a UX designer working in corporate would produce:<p>-Define Target Segment<p>-User segment matrix (access, value)<p>-Observe/Talk/Analyze Figure out how things are<p>-Find out possible paint points<p>-Experience Map / Journey map<p>-Empathy map<p>-SWOT analysis<p>-Competitive Analysis Features<p>-Stakeholder Mapping<p>-Analyze and Pick Pain Point<p>-WHAT WHO WHERE WHEN<p>-FIVE WHYS<p>-Crazy 8<p>-Affinity Diagramming<p>-Group Critique<p>-Scenario Mapping<p>-Solution Generation<p>-HMW<p>-Storyboarding ideas picked from crazy 8<p>-Solo critique<p>-Group critique<p>-Business Model canvas<p>-Value proposition canvas<p>-Pick Solution<p>-Feasibility vs Impact Chart<p>-User Persona<p>-Solution Creation<p>-Use Cases / User story (as a user..)<p>-Feature Brainstorming<p>-Must/Could/Should/Wont have<p>-User Journey<p>-User Flow<p>-Card sorting<p>-Wireframes<p>-Moodboards<p>-Brief (goals, criteria, spec, etc)<p>-MVP<p>-A/B