+ Atomic Design By Pattern Lab Delaney Metzger. + Goal of Atomic Design Atomic Design is an idea that can be used to translate the creative side into.

Slides:



Advertisements
Similar presentations
Intelligent Utilities Intelligent Utilities Intelligent Utilities Intelligent Utilities Intelligent Utilities Intelligent Utilities Intelligent Utilities.
Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Business Development Suit Presented by Thomas Mathews.
User Interface Structure Design
Lecture 6/2/12. Forms and PHP The PHP $_GET and $_POST variables are used to retrieve information from forms, like user input When dealing with HTML forms.
By Choksi Siddharth Dubey Anshu Karkera Prasad Shah Parth.
DIVISIONS FOR ALL WEB PAGES Web Page Elements.  All Web Pages should have the following 4 elements (Also called divisions).  header  navigation  content.
Good Websites. 2. Submit one good web interface. This website is a good because of it usability and appears of the website.
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
]. Website Must-Haves Know your audience Good design Clear navigation Clear messaging Web friendly content Good marketing strategy.
Reasonable Sakai Widgets Aaron Zeckoski Gonzalo Silverio Antranig Basman
© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.
Introduction n Keyword-based query answering considers that the documents are flat i.e., a word in the title has the same weight as a word in the body.
Chapter 12: The Internet The ultimate direct. Internet Facts U.S. firms spend $14.7 billion on Internet advertising in 2005 By 2010, they are expected.
Building the User Interface by Using HTML5: Organization, Input, and Validation Lesson 3.
WEB FORM DESIGN. Creating forms for a web page For your web project you have to design a form for inclusion on your web site (the form information should.
Creating an Expression Web Site
PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 1.
XP 1 HTML: The Language of the Web A Web page is a text file written in a language called Hypertext Markup Language. A markup language is a language that.
Programming with Microsoft Visual Basic 2012 Chapter 12: Web Applications.
 What is a wireframe?  What features are important?  Which wireframe tools might you want to try?
State Term Contract & State Purchasing Agreement Website Innovative Ideas towards Improving Your Buying Experience DMS State Purchasing IT Team.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
Tutorial 1 Developing a Basic Web Page. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives – Lesson 1 Introduction to the.
How to develop your website Chapter Websites Denise R. E. Copeland
Objective To create a professional, affordable, and easy to use website Create a user friendly interface with accessibility and effortless navigation.
Publishing a Macromedia Flash Movie – Lesson 131 Publishing a Macromedia Flash Movie Lesson 13.
HTML Forms.
Oxford Scholarship Online User Guide URL :
State Term Contract & State Purchasing Agreement Website Innovative Ideas Towards Improving Your Buying Experience DMS State Purchasing IT Team.
Online Surveys Jacqui James and Malcolm Roberts School of Education.
Guide for Mahara My Views PY1 team 3 - Yihong Huo, Jian Ren, Poonam Kala 1Guide of My Views - Team 3.
Review of last Session Learning Objectives 1. Create an on-line account with weebly.com along with a blank website 2. What a domain names are & how to.
Online Surveys Jacqui James Malcolm Roberts School of Education.
 An atom is the basic unit of matter (make up elements)  If you break it any smaller it is no longer the element  Atoms are made up of smaller pieces.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® REUSABLE DESIGN.
WEB FORM DESIGN. Creating forms for a web page For your web project you have to design a form for inclusion on your web site (the form information should.
Web Design Site Structure. Site File Structure What is a wireframe?
The Internet is a Big Collection of Computers and Cables. -"interconnection of computer networks". Millions of personal, business, and governmental.
1 Web Engineering Forms Lecture 05. FORMS Its how HTML does interactivity. There are quite new feature in HTML5. But the fundamental idea does not change.
WHY DO YOU NEED IT? What is a wireframe?. A wireframe is… A wireframe is a simple visual guide to show you what a Web page would look like. Wireframes.
Complete Ordering System for Promotional Literature and Samples Quick Reference and Training Guide.
Presentation by Jason Schlemmer. Making the website clear – explain who you are and what you do.
2.4. Choose and configure HTML5 tags to organize content and forms Choose and configure HTML5 tags for input and validation. Building the User Interface.
Essential Elements to Keep in Mind While Designing a Website.
COMP 143 Web Development with Adobe Dreamweaver CC.
Live. learn. work. play Superior Avenue Suite 310 Cleveland Ohio Tel: Fax:
Planning and Creating a Web Site. Stages in planning a web site planning the project decide on the purpose and audience for the web site create mind map.
How To Make Easysite Forms By Joshua Crawley Contact:
Creating and Processing Web Forms
Objective % Select and utilize tools to design and develop websites.
Chapter 2 Developing a Web Page.
Project Objectives Lay out Web pages Create layers
Objectives Design a form Create a form Create text fields
How to Succeed at MWSUG 2017 Paper# SA04
How to Create Message Template in Hotmail?
Objective % Select and utilize tools to design and develop websites.
Section 10.1 YOU WILL LEARN TO… Define scripting
APTECH JANAKPURI INSTITUTE PROVIDING WEB DESIGNING COURSES Address:- J-1,2nd Floor, Opp Metro Pillar No – 559, Janakpuri East, Delhi /42.
Unit I: Collecting Data with Forms
Mary Torjussen A2 ICT Week 1.
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Planning a Website MAD2053.
Unit 2 Test Building a Web Page Test.
Pattern Libraries Leveraging Atomic Design and Pattern Lab to Develop a Living Visual Style Guide Jayson Jaynes, ITS Web Services Web Developer Mark Miller,
Teaching slides Chapter 6.
Objective Explain concepts used to create websites.
Recuperação de Informação B
Human and Computer Interaction (H.C.I.) &Communication Skills
HTML5 Tags By Dr Derek Peacock
Presentation transcript:

+ Atomic Design By Pattern Lab Delaney Metzger

+ Goal of Atomic Design Atomic Design is an idea that can be used to translate the creative side into what the client wants Starts with basic ideas and builds up to working prototypes These building blocks go from abstract ideas to concrete interfaces

+ What is Atomic Design? “Atomic Design is a methodology used to construct web design systems” In other words Atomic Design is a way to create your own effective, web based templates Atomic Design is the idea that all sites, no matter how complex can be broken down into five distinct stages: Atoms, Molecules, Organisms, Templates, and Pages

+ Atoms The building blocks of a website Basic tags These items cannot be broken down any further Not very useful on their own Examples Form labels Buttons Fonts

+ Atoms - Example Click!

+ Molecules Molecules refer to groups of atoms bonded together In Atomic Design this translates to “groups of elements (atoms) that function together as a unit” The idea of do one thing well Example Three form labels (one for name, one for , and one for message), three input boxes, and a button combine together to form a contact form molecule

+ Molecules - Example Labels Inputs Submit Button Name Message Submit

+ Organisms Organisms are “groups of molecules joined together to form distinct sections of an interface” Building molecules with atoms, and in turn organisms leads to creating portable and reusable components Can have similar and dissimilar molecules types Example Footer organism may include a search form, secondary navigation, and paragraph atom of contact information

+ Organisms - Example Paragraph Element Secondary Navigation Search Form Our Company Address Address Line 2 Phone Home About Services Contact Us Enter Keyword Search Site Search

+ Templates Templates are made up of “mostly organisms combined together to form page-level objects” This is where HTML and wireframes come into play Focuses on structure alone, not content Eventually yields deliverable/production code

+ Templates - Example

+ Pages Pages are specific illustrations of a particular template They are used to test the effectiveness of the design Are there changes to be made? In this stage real content is substituted for placeholder content for the client to see

+ Conclusions No matter how complex a site build is, it can be broken down into simple components Breaking down a build into smaller parts makes for easier changes and additions Easier to go from abstract ides to concrete interfaces with smaller building blocks

+ Exam Questions 1) What are the five basic components of Atomic Design? 2) Which component takes into account user testing and input from the client? 3) What advantages are there to utilizing Atomic Design?

+ Exam Question Answers 1) Atoms, Molecules, Organisms, Templates, and Pages 2) The Pages component is when real content is placed into the interface and testing should occur here as well as any changes should be made at this stage 3) In utilizing Atomic Design, smaller components can be built first and then assembled into the interface. This makes for easily repeatable sections and faster building of web site templates. In addition Atomic Design allows for easier changes and additions by slowly building up from small ideas to the finished piece.

+ Works Cited Pattern Lab Atomic Design