The more clear your idea of what you want to do the more likely and the more quickly you will be able to do it. Also it will be easier to ask people for help because you will have specific issues about which you’re asking for help.
If you don’t have a perfectly clear vision it’s OK. Don’t let that stop you moving forward. Make a plan, try it out and if you need to change it, you can change it.
It’s OK if you need to make adjustments as you create your layout. The wireframes are a starting point.
Wireframes:
I suggest that you draw out your wireframes with pencil and paper or use a product like Adobe XD that can is designed to do this. However you can also use products like PowerPoint or Excel or Illustrator or InDesign if you are able to work quickly with them.
It’s important to draw out wireframes for each of the different layouts you will use in your responsive design. For the final I’m requiring you have three layouts for each page type (Home, About, and the six study skills should share the same layout).
Paper Wireframes
If you are doing paper wireframes here are some tools that can help.
- Printable templates print these out to use as outlines for your hand drawn wireframes.
- paper grid template folder. Thanks to the following web sites where the grids were downloaded: https://konigi.com/tools/graph-paper/, https://1440px.com/, https://sneakpeekit.com/
- Scanning apps. These allow you to take pictures of your drawings and convert them to PDF files. Two I recommend are:
- Dropbox: their app has a scan document feature that works well and saves the file to Dropbox. You can get a free dropbox account through your CUNYfirst login now which gives you more space and features than the normal free account
- Scannable: this app is made by the people who make Evernote. If you have an Evernote account it can save it there and it can also allow you to email the PDF file to yourself.
- Acrobat: if you aren’t able to use one of the apps but do have pictures you can use Acrobat to convert these to PDF. Acrobat is available on the computers at school.
Color:
Choose a color palette you will use on your site. You will need colors for at leas
- background-color: [CSS property: background-color] every site has at least one. Some use different background colors to represent different areas of the page.
- text color: [CSS property: color] this is the color of your text. There should be a base color and then you can optionally make different types of text
Sites to find color palettes
Contrast
It’s very important for readability and accessibility reasons to make sure that there is proper contrast between your foreground and background colors. Put your colors into this site to check that out: https://contrast-ratio.com
Typography
It’s good to have a plan for which font’s and type treatments you will use. More on typography on this page.
Layout:
Inspiration:
