This is meant to help you kick start your design for developers project. Fork this repo and get designing. Follow each weeks instructions after you have watched the corresponding videos.
Throughout the process make sure you are checking back to the design resources.
Edit design-brief.markdown in this projects main folder. Make sure to stick to those guidelines as much as possible. You can also check out the sample brief that Kyle wrote to get a better idea of what to write.
When you are done push up to github and paste a link to it in the forums. Make sure to notify Kyle by including @kylefiedler in your message.
Take a look at the design fundamental resources before you start. There are a ton of helpful websites and books there to help reinforce some of these core design concepts.
This weeks workshop involves a lot of work. You should do all of your sketches and start to build your projects layout in the browser.
As many as possible. You'd be surprised at how some of what you think are the worst ideas end up sparking something that makes the final design. What ever it is get it down on paper and record it and move on to something else.Sometimes it helps to time yourself. When doing these with clients I tend to keep them to 30s or a min each.
Take a look at the grid resources before you start. There are a ton of helpful grid websites, videos and books there to help you figure out how to best use a grid in your design.
Throw photos or scans of your sketches in the sketches folder and post a link to them in the Learn forum.
Start building your project with HTML & CSS. For now stick to gray scale and Helvetica. This way you can focus on creating a great layout. That doesn't mean that you can't use those tones in background colors, lines or other graphical elements. If fact I would encourage that. Use those grays to help you focus on your hierarchy.
If you'd like to use the index.html and style.css that I have set up feel free. If you want to use Haml and Scss, go for it. If you want to use your own grid framework, go ahead. As long as it is in this repo it works for me.
One note: don't do any real programming. Stick to static content for now. I want you focused on design problems not programming ones
Take a look at the HTML & CSS resources before you start. There are a ton of helpful grid websites, videos and books there to help you build out your wireframes.
Once done you can use Github pages to easily host or you can put it someone else your prefer and agian post to the forum for feedback
This week you should focus on your projects typography. Make sure that your type is sized and spaced constantly, that there is a rhythm as you read down and across the page. Make sure that you have a strong hierarchy in your type that works with the hierarchy of your entire design. Think about typefaces that will work well with your design and start placing them into your design. Start by incorporating them one at a time.
Take a look at the typography resources before you start. There are a ton of helpful websites, books and videos there to help you figure out which typefaces to choose and how to size and space them.
As you add in typefaces feel free to ask for help, advice, critique post to the forum
This week focus on adding in color to your project. Start slow and only add in one color at a time. Make sure that you are choosing colors for specific reasons and not just because of your taste.
Take a look at the color resources before you start. There are a ton of helpful websites there to help you figure out which colors to choose and pair.
As you add in colors feel free to ask for help, advice, critique post to the forum
This week is your chance to iterate and refine your design. Is there something that has been bothering you about the layout? Is that header just a little too big? What about adding slight shadow or softening your corners?
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent