Intro to Bootstrap

Bootstrap is a free front-end framework for faster and easier web development
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs

HTML Template DEMO:

Coffee Blend HTML Template

Inspect elements
Edit source code
Find and replace in CSS

Extended learning on Bootstrap

https://getbootstrap.com/

https://www.w3schools.com/bootstrap4/default.asp

Small Business Site Project

Event Website Presentation

http://chalfantcreative.com/Event/

http://hunglp.com/event/

www.cassschmidt.com/event

http://www.raesblog.com/event

http://www.scruggsdesign.com/kusama/

http://hanwils.com/event/

http://cfischerdesign.com/event/

http://lizzieireland.com/event/

http://derekbdesigns.com/event/

http://malffdesigns.com/event/

http://mayagracek.com/event/

http://mirandashawsblog.com/event/

munozwright.com/event

http://www.rosehooverweb.com/event/

Final Project:

Small Business Site

Event Project New Schedule

T Oct 29——Work in class
Th Oct 31—User testing and critique (3 or 4 sections)
T Nov 5—Work in class
Th Nov 7—Event Website final presentation

You are expected to have their fully functioning website uploaded to their server and accessible via web browser. Reply to my group email with your URL. The website needs to be put on digital mock ups and submit on TCUOnline. Please include title, description, web fonts, colors and other graphic elements.

Please continue working on your Journal site.

Intro to Responsive Design and Jquery

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

Viewport

Viewport—When using Media Queries you need to include a viewport otherwise you will not get the anticipated result.

Insert the following in head section:

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

Media Queries

Media Queries can be used to ensure that your site will work correctly regardless of the user’s screen size, origination, color and aspect ratio. Media Queries allow you to specify criteria that match the viewing device, a desktop/laptop, iPad, cell phone etc.

See Media Queries sample here.

Sample Breakpoint

@media screen and (max-width:980px)

@media screen and (max-width:768px)

@media screen and (max-width:480px)

DEMO

Learn more about Responsive Web Design (reading assignment)


  1. Lecture on Java & Jquery
  2. http://responsiveslides.com/
  3. http://stackoverflow.com/

Reading Assignment

  • Reading Assignment: Chapter 16, 17, 18, 19; CSS Quiz next class
  • W3S CSS outline —CSS float

CSS continued

  • DEMO continued
  • Meet individually—be prepared to discuss your creative brief and inspirational sites if time allows.

A name Attribute


Assignments

  • Reading Assignment: Chapter10, 11, 12, 13, 15
    W3S CSS HOME —CSS box model
  • Start on your thumbnails and layout in Sketch, have them ready for next consultation
  • Behance web design

Additional Reading

Introducing HTML

  1. Html Lecture
  2. Demo: Root folder and file management/Dreamweaver interface/index.html/insert image, heading, paragraph and list
  3. Project Assignment: Event Website

DEMO footage

…………………………………………

Reading Assignment, HTML Quiz
  1. Reading assignments, Textbook chapter 1-3
  2. Assignment: HTML HOME—HTML PARAGRAPH  http://www.w3schools.com/html/default.asp

Additional Readings:

history of the web: http://www.w3.org/People/Raggett/book4/ch02.html

More about HTML5: Dive into HTML5: http://diveintohtml5.info/

Here’s the direct history link: http://diveintohtml5.org/past.html#timeline

App Website Presentation

Thursday 10/03—Digital Due on TCUOnline, App Website Presentation
  • Two-page pdf, titled “Your Name_app name.pdf”
  • Page one (landscape)— app icon & name, tagline, four app screens and short description for each screen
  • Page two(vertical)—app website, high res
Tuesday 10/08—Poster submission
  • Print and flush mount your app website, poster width 12-15 inch, high res
Thursday 10/09—Journal Website due for mid-term
  • minimum 25 entries total

It’s movie day today. Enjoy!

Design Disruptor

Thursday 09/12—@9:30am, Reflection Paper is Due on TCUonline, 500-800 words.

Thursday 09/12—Creative Brief and Content Meeting

Present a concept and brief for the website to your instructor. The brief should include:

__ Name of the app

__ The purpose of the app

__ A description of the target audience

__ The tone-of-voice of the app

__ A plan of the five sections for the promotional website

__ The preliminary work for the content should include: substantive exploration of multiple ideas demonstrated by thumbnails, roughs, samples used for inspiration, images, sketches of image ideas, and an initial draft of the written content.

Intro to Sketch

Monday 09/09—Meet Mike Fuller, Director at State Farm overseeing User Experience Design division. FAB 209, 5pm-6:30pm. Design focus meeting? Please prepare some questions on UX to ask.

Tuesday 09/10—Next class: Movie + Convocation

Thursday 09/12—@9:30am, Reflection Paper is Due on TCUonline, 500-800 words.


Intro to Sketch
  • Sketch vs Photoshop vs Illustrator
  • Sketch vs Adobe XD
  • Demo: Getting started and Interface overview
  • Sketch App Sources

Reading Assignment:

The Interface~Vector Editing


App Design & App Website Project

Sample Websites:

Upper App

Weathertron App

Acorns App


Thursday 09/12—Creative Brief and Content Meeting

Present a concept and brief for the website to your instructor. The brief should include:

__ Name of the app

__ The purpose of the app

__ A description of the target audience

__ The tone-of-voice of the app

__ A plan of the five sections for the promotional website

__ The preliminary work for the content should include: substantive exploration of multiple ideas demonstrated by thumbnails, roughs, samples used for inspiration, images, sketches of image ideas, and an initial draft of the written content.