Class 3: Thursday, September 5, 2019
Today is a special meeting day on the class because the College is running on a Monday schedule even though today is Thursday
We are going to pick up where we left off on Wednesday with learning the basics of actually creating and writing the files needed for a web site. If you don’t have your files from last time You can download this zip file and expand it. It contains the folders and files we created in the last class: https://www.dropbox.com/s/e7g571w2nmdfrul/Test%20Project.zip?dl=0
Emmet and other Extensions
At the end of class we had just enough time for me to show you the promise of what the Emmet extension has to offer but not time for you to really try it out. We will start with that for a bit so you get the hang of it and then move to design.
Emmet Documentation: https://docs.emmet.io
Emmet Cheat Sheet: https://docs.emmet.io/cheat-sheet/
DESIGN
Today we will start talking about responsive design. We are not going to get too deep into graphic/web design concepts but look at it from a high level.
Boxes and Layout
We will look at how to break down the layout of these pages using boxes. Then we will look at translating those to HTML.
Grids
Most web sites (and most things that are designed by graphic designers, are designed to an underlying grid. Later in the class we will learn more about what grids are and how you can implement them in CSS. For today I will ask two things:
- Pay attention to the way in which the major elements are areas of the page are aligned to each other. See if you can start to see the underlying grid.
- Keep that when you’re drawing your sketches. and draw them with the same alignment on the site. We will have some grid paper to help.
If you want more information on grids now read this article https://visme.co/blog/layout-design/
Wireframes
Wireframes are a quick way to visualize a web site. They are not full designs. Generally they are black and white and are meant to show generally where content will go on the page (content and layout). Low Fidelity wireframes don’t have a lot of detail about the content and may not fully show the layout of the page. They generally just help block out the major sections of the page. High Fidelity wireframes have much more detail of the content and can sometimes include actual content, colors and fonts.
We will look at examples of both, but today we will focus on low fidelity (low-fi) wireframes. Another day we will revisit them in more detail.
Groups
We will pair up and each pair is responsible for finding an example responsive site that is NOT made by one of the large tech companies (apple/google/facebook/amazon/Microsoft/samsung/twitter/instagram).
Responsive checker
A quick way to see if a site is responsive is to put the URL into this page: http://ami.responsivedesign.is/
Wirify Bookmark Tool
This tool changes any web site into a wireframe version of itself. We’ll try it out on the sites you chose. https://www.wirify.com/
In your groups pick a site and then draw a sketch wireframe of that site on paper. This is a low-fi version. You only need to have boxes for the major sections of the page. You can use Wirify to help you see the boxes. Wirify will have more detail than you need.
I will have paper on hand for you. If you want to print more they can be found in this paper grid template folder. Thanks to the following web sites where the grids were downloaded:
Page Sections
The next step is to take your sketches and convert them to HTML. Today we are going to focus on the page section elements. We will cover them in class and you can also go to the periodic table to help you remember them: http://stein-bmcc.github.io/periodic-table/
Remember to use the proper basic website folder structure (everything today will go in index.html): https://openlab.bmcc.cuny.edu/mmp-240-fall-19-stein/2019/09/05/basic-website-folder-file-structure/
