Chapter 1 - Where Do I Start?

Question 1

Your starting point in web design will depend on…?

Answer 1

Background: I.E. A graphic designer might need to tack-on html skills
Goals: Depends on what you’re trying to build

Question 2

Do you have to be a web designer to start publishing your words on the internet?

Answer 2

No - You can take advantage of one of the free or inexpensive blog hosting services i.e. WordPress, Blogger, Tumblr, SquareSpace.com (drag & drop)

Question 3

What does a web designer do?

Answer 3

The term has come to encompass a number of disciplines

1. Visual (Graphic) Design
2. User Interface & Experience Design
3. Web Document & Style Sheet Production
4. Scripting & Programming
5. Content Strategy
6. Multimedia

Question 4

What does Design mean in web design?

Answer 4

It’s more than just how it looks, in web - the first matter of business is designing how the site works

Question 5

What jobs fall under Design and What do they do?

Answer 5

1. Interaction Design (IxD): Job is to make the site as easy, efficient, and delightful to use as possible
2. Interface Design (UI): Tends to be more narrowly focused on the functional org of the page as well as the specific tools (buttons, links, menus, etc.) that users use to navigate content or accomplish tasks
3. User Experience (UX): Takes a more holistic view. This persons job is to make sure the entire experience with the site is favorable - this persons job is based on a solid understanding of users & their needs (observations, interviews, etc.). It’s his/her job to manage how the site is perceived, learned & used. Including the visual design, the user interface, the quality & msg of the content.
4. Visual (Graphic Design): Creates the look & feel of the site (logos, graphics, type, colors, layouts, etc.) - to ensure the site makes a good first impression and is consistent with the brand & msg of the org it presents
5. Development (Production): Creation, trouble-shooting of the docs, style sheets, scripts and images that make up a site

Question 6

What are some of the documents a web designer might produce?

Answer 6

1. User research & testing reports - understanding needs, desires & limitations
2. Shows the structure of a web page using only outlines for each content type & widget - to indicate how the screen real estate is divided and indicate where functionality and content will be placed
3. Site Diagram: Indicates how structure of the site as a whole and how individual pages relate to one another.
4. Storyboards & user flow charts: Story boards trace a users path through a site or application from the point of view of a typical user. A flow chart is another method for showing how the parts of a site or app are connected - tends to focus on tech details rather than a story

Question 7

What are Style Tiles

Answer 7

Another approach to capturing the look & feel of a site which gives examples of color schemes, branding elements, content and UI treatments, and mood boards w/o applying them to a specific page layout - the idea is to agree upon a consistent visual language for the site.

Question 8

What are the broad disciplines that fall under development?

Answer 8

1. ) Authoring/Markup: the process of preparing content for delivery on the web, or specifically - marking up the content w/ html tags that describe its content & function.
2. Styling: the appearance of the page in the browser is handled by CSS
3. Scripting & Programming: As the web has evolved into an application for getting things done - Java is the language that makes elements on a web page do things - it adds behaviors and functionality to elements in the page. There’re others web-related programming languages as well including php, ruby, python & asp.net

Question 9

Describe front-end vs back-end website creation

Answer 9

Front-End refers to any aspect of the design process that appears in or relates directly to the browser; while Back-End refers to the programs & scripts that work on the server behind the scenes to make web pages dynamic & interactive

Question 10

List front-end programming activities

Answer 10

1. Graphic design & image production
2. Interface design
3. Information design as it pertains to the user’s experience of the site
4. HTML document & style sheet development
5. Javascript

Question 11

List back-end programming activities

Answer 11

1. Information design as it pertains to how the info is organized on the server
2. Forms processing
3. Database Programming
4. Content Mgmt Systems
5. Other server-side web applications using php, jsp, ruby, asp.net, java and other programming languages

Question 12

What is development?

Answer 12

Development (Production): Creation, trouble-shooting of the docs, style sheets, scripts and images that make up a site

Question 13

What is content strategy?

Answer 13

Everything we do supports the process of getting the content, msg, or functionality to our users

Question 14

What jobs exist in content strategy?

Answer 14

Content Strategist: Makes sure that every bit of text on a site, from long explanatory text down to the labels on buttons, supports the brand identity & marketing goals

Information Architect (Info Designer): Organizes the content logically and for ease of findability

Question 15

Discuss Multimedia

Answer 15

You can add multimedia elements to a site, including sound, video, animation, and even interactive games

Question 16

Discuss Flash

Answer 16

Previously Macromedia, Previously Futuresplash, Used to create full-screen animation, interactive graphics, integrated audio, video clips, scriptable games, applications, all at remarkably small file sizes

Question 17

Why has Flash use declined over the years?

Answer 17

Apples decision not to support it on iphones & ipads in favor of non-proprietary html5 methods

Adobe’s decision to stop supporting flash for mobile browsers

the new programmable canvas element in html5 that offers some of the same functionality as flash

Criticism that flash sometimes gets in the way of user goals i.e. who wants to sit through a movie b/c they wanna view a menu

The fact that a plug-in is required to play flash media makes some developers squeamish

Question 18

What are some advantages of flash that keep it in the game?

Answer 18

It uses vector graphics - flash files are small and can be resized without loss of detail

It is streaming format, so movies start playing quickly and continue to play as they download

You can use actionscript to add behaviors and advanced interactivity, allowing flash to be used as the frontend for dynamically generated content or ecommerce

the flash plug-in is well distributed on pc’s, so support on desktop browsers is reliable

Although html5 is promising & rapidly evolving, as of this writing, it can’t match the features and performance of flash

Question 19

What languages should a web programmer learn?

Answer 19

hypertext markup language (html): Used to create web page docs. There’re several versions HTML 4.01 - the most firmly established & the newer, more robust HTML5 is gaining steam and browser support

cascading style sheets (css): Describes how the content should look (known as presentation)

javascript & dom scripting: used to add interactivity & behaviors to web pages i.e. checking form entries for valid entries, swapping out styles for an element or an entire site, making the browser remember information about the user for the next time she visits, building interface widgets, such as expanding menus
Server-side programming & database mgmt

Server Side Programming: Programs that are used to create web applications. These functions are handled by web applications running on the server - php, python, ruby, javascript, java, asp.net

Question 20

What organization oversees the development of web techonologies

Answer 20

The World Wide Web Consortium - W3C. Founded in 1994 by Tim Berners-Lee (inventor of the web), at MIT. In the beginning, it concerned itself w/ HTTP protocol and the development of html - now, it’s laying the foundation for the future of the web by developing dozens of technologies and protocols that must work together in a solid infrastructure

Question 21

What is the other name for Javascript?

Answer 21

ECMA Script

Question 22

What is DOM scripting?

Answer 22

Document Object Model - Standardized list of web page elements that can be accessed and manipulated using Javascript. DOM scripting is an updated term for what used to be referred to as DHTML (Dynamic HTML)