Topics Problem Set You have already created a simple prototype of a html template, creating the elements page and the default page. Now it’s time to create a more complete template built from your starter, or from scratch. It will need to have a clear homepage design which considers it’s proscribed purpose: a small business,… Continue reading design2 – project template site proposal

Topics Sarah Drasner presents color theory – additive vs. subtractive color – as well as a number of tools and strategies for picking website palettes. Below are a number of sites described in the lectures: Coolors: palette generator, trending palettes, palette from image, gradient maker, and trending gradients. Paletton Adobe Color Colorable Contrast Checker Palettab… Continue reading Designing with Color

Topics For either web design 1 or 2, if you created a final project site OR if you did code-a-longs, you need to create a presentation of your work. Presentations will follow a common pattern for both classes with minor differences in the technical presentation. Presentation Requirements Create a Google slide presentation which is accessible… Continue reading design1 & design2 – Final Site Presentation

Topics Using a CSS library (gridlex) to manage break points for responsive design; Adding media queries to our CSS to adapt all cards to uniform layouts in a single column; Tutorials/Problem Set Last two tutorials for making the card system responsive: Responsive Design with Gridlex Responsive Design with attribute selectors For the blog Describe how… Continue reading design1 – card project grid becomes responsive

Topics Tools for drawing layouts – Photoshop, Illustrator, Pen & Paper; Abstracting layouts with primitive shapes – rectangles, triangles, circles, and lines. Lectures Layout Tools Photoshop Keyboard Shortcuts Layout and Composition Demo Primitive Shapes Exercise Primitive Shapes Review Exercise Create three webpage layouts using primitive shapes. You can use whichever tools you like – Photoshop,… Continue reading design 1 & design 2 – drawing layouts with primitive shapes

Topics Making and Breaking the Grid Anchoring lines – using grids anchor elements in a layout Finding the alignment lines in a design.  Lecture Design for Developers – Grids Exercise Find three examples of web design and using a drawing tool, find the alignment lines in the design. For the blog Choose one of the… Continue reading design1 & design2 – the grid

Topics Tutorials Problem Set Find a card model or a piece of 2D design (it must include, image, and typography) from designspiration, then draw over the design a ‘box model’ for the main layout of the design. Take a screenshot/photo of the drawing. From there, come up with a HTML skeleton strategy. Below is a… Continue reading design1 – pricing panel code-a-long

Topics Tutorials Problem Set SIMPLE RETWEET CARDS WITH TWO MODES: HORIZONTAL AND VERTICAL. Using flexbox create two cards modeled after the images above. Using the same HTML, create classes that allow you to switch between horizontal and vertical just by adding or removing a class. Your HTML boilerplate should look something like this: You should… Continue reading design1 – Responsive CSS & Flexbox

Topics Using scale, rotation, and cropping to find focal points in an image for design Lecture Design for Developers – Scale and Cropping Exercise Find three images, one from among each of the following categories: portrait, landscape, still life, and icons. For each each pick portion of the image to focus on. Using crop, scale,… Continue reading design1 & design2 – scale and cropping

Topics Box Model Assorted CSS Properties Tutorials Problem Set The final set of tutorials, videos 100 & 01 are a code-a-long to build a basic, nice looking photo blog. You should build this project using photos of your own or from a source like Unsplash.com. Have the images follow some sort of theme: content choice,… Continue reading design1 – The Box Model & Assorted CSS Properties