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.

Intro to Internet, Intro to WordPress

Reading Discussion:

How Does the Internet Work?

How Does a website Work?


Introducing WordPress

WordPress is a free and open-source content management system (CMS) based on PHP and MySQL. WordPress is installed on a web server that is either part of an Internet hosting service or a network host in its own right.

content management system (CMS) manages the creation and modification of digital content. These systems typically support multiple users in a collaborative environment, allowing to perform document management with different styles of governance and workflows. Usually the content is a website (or part of it) and the term commonly refers to web content management systems. Web content may include text and embedded graphics, photos, video, audio, maps, and program code (such as for applications) that displays content or interacts with the user.

WordPress.com vs WordPress.org

  • WordPress.com, takes care of all of the hosting for you. You don’t have to download software, pay for hosting, or manage a web server.
WordPress.com
  • With WordPress.org, YOU host your own blog or website. WordPress.org is where you’ll find the free WordPress software that you can download and install on your own web server.
WordPress.org
Let’s purchase Web Hosting and a Domain name! It should not be more than $15.

Coupon Code: GDD1HOS

WordPress Demo

sample here

header video

Color:

Color code I use in my demo: Hex #00ffff

Dummy text

Journal Project


Help for your weekend

WELCOME TO COMPUTER APPLICATION TO GRAPHIC DESIGN!

Welcome to Comp App I— Web Design Class! A class with the purpose of introducing the design concepts and skills required to develop interactive content for the screen-based media. This class will focus primarily on the merging of aesthetics and usability in interface design, designing information architecture, and designing for satisfactory user experience.

I will be encouraging you to work both individually and in groups during the semester on various projects, across various digital media. However, the course remains focused upon understanding and the application of basic conceptual and design skills. I intend to provide these required skills to you, in informative, fun, and creative ways!

Please check out and use the links on the right column☞ for help and inspiration!

Day 1 Q&A

1. What is graphic designer’s role in web design world?
  • Graphic designer (1-3 years): $39,750–$56,750
  • Graphic designer (5+ years): $67,500–$93,000
  • Package designer: $59,500–$91,000
  • Visual designer: $66,000–$99,250
  • Front-end web developer (3+ years): $80,000–$119,500
  • Web designer (5+ years): $83,250–$118,000
  • Interaction designer (5+ years): $88,250–$124,500
  • UX designer (1–3 years): $52,000–$79,500
  • UX designer (5+ years): $92,750–$138,000

The Creative Group 2017 Designer Salary Guide  

2019_salary_guide_thecreativegroup (Reading assignment#1)

Hot hybrids

It takes a wide range of design and technical skills to keep up with industry trends in today’s fast-moving climate. In response, creative agencies and in-house departments increasingly seek well-rounded professionals who have knowledge outside their specialty area. As an example, skilled UX designers are in demand; if they also understand the business strategy behind branding, their resumes could well rise to the top of the heap.

Employers will pay a top designer salary, but they expect value, which comes in the form of worker versatility. Expect greater cross-departmental collaboration, especially with IT, as management breaks down silos and encourages staff members to partner on projects and key business initiatives.

2.What are we going to learn in this class? Is it hard?
3.What is Dreamweaver? Do we need to learn code?
4. Dreamweaver vs WordPress/Wix/Squarespace?
5. What do you (instructor) expect from us (students)?

What is Internet?

A global computer network providing a variety of information and communication facilities, consisting of interconnected networks using standardized communication protocols.

How does the internet work? Servers, hosting and domain names explained (Reading assignment#2)

Prepare two things: Hold on! COUPON AVAILABLE!

  1. figure out a domain name (prepare for your course web site, short/easy to remember/relevant/.com) (free)
  2. Bring payment next class, a hosting account (GoDaddy, hostgator, a small orange or Bluehost ), find coupon code if applicable.

Bring your notebook and flash drive to every class.

The Art of Web Design