design1 & design2 topics and problem set This will be the last couple of weeks of design for your website. And it’s a good time to create a “punch list” of issues remaining to be solved as well as adding some stretch goals if time allows. In a blog post, create a bulleted list of… Continue reading design1 & design2 – final designs and stretch goals

Topics / Problem set With a design chosen, it’s time to get your Sass tooling setup as well as your initial Sass files/variables: Create a 7-1 architecture for your template and have a least the following scss files with css defined: main.scss variables.scss reset.scss typography.scss flex-grid in your vendors folder home.scss OR elements.scss OR default_page.scss… Continue reading design 2 – final project site part 1 – Tooling, Grid, and first layout problem

Topics / Problem Set For the second week you will be tackling the next layout problem within your project. Hopefully your first week involved solving the main layout of your page, and now you can work on an interior layout issue. For the blog Describe which layout problem you’re working on and how you’re attempting… Continue reading design 1 – final project site part 2 – secondary layout problems

Topics Problem Set Build the first version of your project with a nice structure in a folder: Using the in-class tutorial for CSS variables, CSS reset, and default body fonts define them in your style.css. Create your index.html boilerplate and your initial HTML skeleton. Using these try to solve your first layout problem. For example… Continue reading design 1 – final project first steps

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