Emptech reviewer by speezr

Information and Communication Technology (ICT) Weeks 1-4: Lecture

What is ICT? • Stands for "Information and Communication Technologies." • ICT refers to technologies that provide access to information through telecommunications. • It is similar to Information Technology (IT), but focuses primarily on communication technologies. • This includes the Internet, wireless networks, cell phones, and other communication mediums.

Examples of ICT provided to Society to Communicate (past few decades ago)

â&#x20AC;˘ Instant messaging, Voice over IP (VoIP), video conferencing â&#x20AC;˘ Allows people to communicate realtime with others in different countries.

Examples of ICT provided to Society to Communicate (past few decades ago)

â&#x20AC;˘ Social networking websites like Facebook, Twitter, Instagram â&#x20AC;˘ Allow users from all over the world to remain in contact and communicate in regular basis.

Modern ICT

Created a "global village," in which people can communicate with others across the world as if they were living next door.

Latest Trends: Internet

• Conversational Web • Convergence Of Social Media, Influencer Marketing And ECommerce • Internet Of Things, Data And Analytics

Conversational Web

The conversational web is all about expanding the way we interface and interact with the web.

Internet Of Things (IoT), Data And Analytics Data from IoT connected devices will be used to gain more insight from lifestyle habits so that marketers can build personalized shopping experiences and more importantly, create a seamless, omni channel shopping experience between online and brick and mortar properties.

Depression-Fighting Apple Watch Ingestible Sensors

Conversational Web: Examples • Chatbots (text) – Healthcare: Babylon Health, Symptomate, Florence – Business: Reserve, FoodBot, Chip • Virtual Assistants (voice) – Apple’s Siri, Amazon’s Alexa, Microsoft’s Cortana, Samsung’s Bixby • Botnik (encompass all conversational interfaces such as voice, biometrics, augmented reality, virtual reality, and some other forms of reality yet to be defined — including, one day, perhaps, a direct interface to the human brain)

Convergence Of Social Media, Influencer Marketing And E-Commerce Social media is changing the way we receive our information. We now have influencers on social media who are passionate about specific topics and have created a significant following on social networks. These people have a greater-than-average share of voice within a certain market segment and brands are leveraging them to promote products. http://primer.com.ph/blog/2017/04/11/filipino-socialmedia-stars-win-big-at-influence-asia-2017/

Latest Trends: Wireless Networks

• Internet of Things (IoT) • WiFi Standards • Cloud-managed WLAN

Internet of Things (IoT) â&#x20AC;˘ IHS (Information Handling Services) forecasts that the installed base of IoT devices will grow from 15.4 billion in 2015 to 30.7 billion in 2020. â&#x20AC;˘ Dell 'Oro Group estimates an installed base of nearly 1 billion WLAN network devices by 2020 and expects these WLAN devices will be the primary way most IoT devices connect to networks.

WiFi Standards â&#x20AC;˘ The first 802.11ac Wave 2 access point was released in April 2015, and since then there's been a steady stream of Wave 2 APs hitting the market. â&#x20AC;˘ Wave 2 brings the benefit of MUMIMO (Multi-User Multi-Input and Multi-Output) and the ability to service up to three concurrent streams to different users.

Cloud-Managed WLAN â&#x20AC;˘ With a Cloud-Managed WLAN, Aps (Access Points) connect to a virtual controller, typically located in a public cloud on the Internet. â&#x20AC;˘ Control-plane information, AP management and other WLAN services are performed between the cloud controller and the local APs across an Internet connection

Latest Trends: Cellphones / Smartphones

• • • • •

Headphone Jacks 18:9 Aspect Ratio Digital Assistants Dual Cameras Buttons Be Gone

Headphone Jacks • Apple’s decision to remove the headphone jack, send reverberations throughout the industry. • In 2016, phones like the Moto Z and the iPhone 7 switch over completely to digital and wireless audio. • Phones like the Galaxy S8 and the iPhone 8 will be without headphone jacks. • In addition Android phones will moving to USB-C ports.

USB-C Port

18:9 Aspect Ratio • LG’s G6 is the first phone with an 18:9 (or 2:1) aspect ratio (Univisium). • Most phones have a 16:9 aspect ratio. • This means the phone will be a bit taller than normal—and maybe even a bit better for one-handed usage.

LG G6

Samsung S8+

Digital Assistants • “Smarter AI” is pretty much always on the docket for a smartphone manufacturer. • Samsung and Apple double down on machine learning and better digital assistants.

Demo: Bixby Vs. Siri

Dual Cameras • LG and Huawei led the way in 2016 with its dual camera setups. Apple followed suit later in the year. • In 2017, the rest of the smartphones released have similar dual-cameras on their backs. • The iPhone’s dual-camera is used to both to create a bokeh effect and for an analogue zoom. • Bokeh effect is the aesthetic quality of the blur produced in the out-offocus parts of an image produced by a lens.

Buttons Be Gone • iPhone 8 and the Galaxy S8 use smaller bezels, and bigger screens. • The size of the home button has made the iPhone’s jump to big screens particularly awkward. • But this year Apple is looking to fix that problem, iPhone 8 will get rid of the home button in favor of a smaller phone with a bigger screen.

Iphone 8

Resources: • https://techterms.com/definition/ict • https://www.forbes.com/sites/forbesagencycouncil/2017/06/ 09/new-internet-technology-trends-that-will-transform-thecustomer-experience/#5f11c4ca3184 • http://www.networkcomputing.com/wirelessinfrastructure/3-emerging-wlan-trends-2017/2057356947 • https://www.pastemagazine.com/articles/2017/01/5smartphone-trends-in-2017-to-look-out-for.html • https://www.youtube.com/watch?v=dwhF7rF52BY

Empowerment Technologies (Website Development)

Outline • About the Me • Course Introduction • Course Plan • Grading System • Class Policies • Assignment • Forming of Group

About Me… • MS. RESTY F. ALDANA • BS Computer Science (BSCS) Graduate • Master in Information Technology (MIT) Graduate • Still Pursing Doctor in Information Technology (DIT)

• Consultation Time • MON 4:00-5:30p • TUE 3:00-4:30p • THU 3:00-4:30p

Course Introduction • Title: Empowerment Technologies (Website Development) • Technologies that will be used: • Word Press • Graphics Design Editors • Photo Editors • Audio Editors • Video Editors • Final Output: Website (Per Group of 5 Members, based on your Approved Proposal) Proposals will be submitted on September 29, 2017. The format and other requirements to be included in the proposal will be discussed on Week 6.

Course Plan

Grading System

Class Policies • Observe silence in class specially during lecture. • Seat Plan will be implemented. You choose your own seat. Final seat plan will be utilized on week 6. • Class participation and involvement is vital. • Laboratory exercises (most of the time) require individual effort. • Laboratory exercises must be completed as scheduled since new exercises will be introduced every meeting. • No need to copy notes during lecture, handouts will be provided in eLeap. • Communications related to the subject will be posted in the FB Group. Always keep posted. • Submit deliverables on time.

Assignment #1: (10 pts.) Add the Facebook Group

EMPTECH_RFA_T1_2017_2018 on or before 11:59PM of

Sun, Sept. 10, 2017. Comment the following:

Section - Lastname, Firstname below the pinned postâ&#x20AC;¦

Assignment #2: (10 pts.) Submit a 1/8 index card with 2x2 picture and the following information on or before Friday, September, 29 2017.

Forming of Group… • In ½ sheet of yellow paper crosswise, provide the following information (following the format below in tabular form):

• Each member must provide their answer to the question below at the back of the yellow paper….

What talents/skills can you contribute to execute the role assigned to you fully?

Online Systems, Functions and Platforms Weeks1-4: Lecture #2

What is an Online System? • An online system provides access to a software system using a computer and internet connection. • It is a system that uses the internet web technologies to deliver information and services, to users or other information systems/applications. • It is a software system whose main purpose is to publish and maintain data by using hypertext-based principles (hyperlinks).

What is a Platform? • In IT, a platform is any hardware or software used to host an application or service. • An application platform, for example, consists of hardware, an operating system and coordinating programs that use the instruction set for a particular processor or microprocessor. • In this case, the platform creates a foundation that ensures object code will execute successfully.

What is an Internet/Online Platform? • Internet is a big network which is formed by connecting multiple small networks. • It is a platform for all the users which are connected to it. • Internet act as platform in different fields. Such as: – Internet as a collaboration platform. – Internet as a online entrepreneurship platform. – Internet as a education platform. – Internet as a online money transaction platform. – Internet as a news and latest event describer platform.

Collaboration Platform â&#x20AC;˘ Internet act as a collaboration platform as you can send and receive messages, emails and you can also chat with one another person. â&#x20AC;˘ You can also make online calls and video conferencing with other fellows. â&#x20AC;˘ So that you and your friends collaborate with each other while you may be at one corner of the world and your friend may be in other corner of the world.

Online Entrepreneurship Platform • Internet act as a online entrepreneurship platform as you can start your online business and can also perform online marketing of your product. • You can also work as a freelancer while sitting in you home and doing your job for a organization which is in any part of the world. So that no traveling problems for you. • You can earn money while working comfortably from any where.

Education Platform â&#x20AC;˘ Internet act as a education platform as you can learn online by searching on your require material or learn through distance learning, it mean that you can take admission online in any course or university and learn online by taking the classes of your course online.

Online Money Transaction Platform â&#x20AC;˘ Internet act as a online money transaction platform as you can send and receive money online. â&#x20AC;˘ So that you can send and receive money while sitting in your home comfortably and in very effective manner.

News and Latest Event Describer Platform • Internet act as a news and latest event describer platform. • So that we get update of news and latest events without purchasing newspapers. • It give us update rapidly without any delay while newspapers published once a day and you have to wait for next day to get update about new events and stories.

Resources: • https://www.dshs.wa.gov/faq/what-web-basedsystem • http://searchservervirtualization.techtarget.com/defi nition/platform • https://www.expertsexchange.com/articles/9389/What-is-an-InternetPlatform.html

Contextualized Online Search and Research Skills Week 5: Handout #5

Contextual Search • Contextual search is a form of optimizing web-based search results based on context provided by the user and the computer being used to enter the query. • Contextual search services differ from current search engines based on traditional information retrieval that return lists of documents based on their relevance to the query. • Rather, contextual search attempts to increase the precision of results based on how valuable they are to individual users.

Basic Contextual Search • • • •

• •

The basic form of contextual search is the process of scanning the full-text of a query in order to understand what the user needs. Web search engines scan HTML pages for content and return an index rating based on how relevant the content is to the entered query. HTML pages that have a higher occurrence of query keywords within their content are not rated higher. Users have limited control over the context of their query based on the words they use to search with. For example, users looking for the menu portion of a website can add “menu” to the end of their query to provide the search engine with context of what they need. The next step in contextualizing search is for the search service itself to request information that narrows down the results, such as Google asking for a time range to search within.

Search Syntax • Search syntax is a set of rules describing how users can query the database being searched. • Sophisticated syntax makes for a better search, one where the items retrieved are mostly relevant to the searcher's need and important items are not missed. • It allows a user to look for combinations of terms, exclude other terms, look for various forms of a word, include synonyms, search for phrases rather than single words.

Search Syntax Main Tools • • • • • •

Boolean Logic Wildcards and Truncation Phrase Searching Proximity Capitalization Field Searching

Boolean Logic â&#x20AC;˘ Boolean logic allows the use of AND, OR and NOT to search for items containing both terms, either term, or a term only if not accompanied by another term. â&#x20AC;˘ Tip: NOT can be dangerous. Let's say you want to search for items about Mexico, but not New Mexico, so you use NOT to exclude the word "New" from your retrieved set. This would prevent you from retrieving an article about "New regulations in Mexico" because it contained the word "New," though that wasn't what you intended.

Wildcards and Truncations • • • • • •

This involves substituting symbols for certain letters of a word so that the search engine will retrieve items with any letter in that spot in the word. The syntax may allow a symbol in the middle of a word (wildcard) or only at the end of the word (truncation). This feature makes it easier to search for related word groups, like "woman" and "women" by using a wildcard such as "wom*n." Truncation can be useful to search for a group of words like "invest, investor, investors, investing, investment, investments" by submitting "invest*" rather than typing in all those terms separated by OR's. The only problem is that "invest*" will also retrieve "investigate, investigated, investigator, investigation, investigating." The trick, then is to combine terms with an AND such as "invest*" AND "stock* or bond* or financ* or money" to try and narrow your retrieved set to the kind of documents you're looking for.

Phrase Searching â&#x20AC;˘ Many concepts are represented by a phrase rather than a single word. In order to successfully search for a term like "library school" it's important that the search engine allow syntax for phrase searching. â&#x20AC;˘ Otherwise, instead of getting documents about library schools you could be getting documents about school libraries or documents where the word "library" and "school" both appear but have nothing to do with a library school.

Proximity â&#x20AC;˘ This allows the user to find documents only if the search terms appear near each other, within so many words or paragraphs, or adjacent to each other. â&#x20AC;˘ It's a pretty sophisticated tool and can be tricky to use skillfully. Many times you can accomplish about the same result using phrase searching.

Capitalization â&#x20AC;˘ When searching for proper names, search syntax that will distinguish capital from lower case letters will help narrow the search. â&#x20AC;˘ In other cases, you would want to make sure the search engine isn't looking for a particular pattern of capitalization, and many search engines let you choose which of these options to use.

Field Searching â&#x20AC;˘ All database records are divided up into fields. Almost all search engines in CD-ROM or online library products and the more sophisticated Web search engines allow users to search for terms appearing in a particular field. â&#x20AC;˘ This can help immensely when you're looking for a very specific item. Say that you're looking for a psychology paper by a professor from the University of Michigan and all you remember about the paper is that it had something about Freud and Jung in its title. â&#x20AC;˘ If you think it may be on the Web, you can do a search in Alta Vista, searching for "Freud" AND "Jung" and limit your search to the "umich.edu" domain, which gives you a pretty good chance of finding it, if it's there.

Googleâ&#x20AC;&#x2122;s Search Syntax

Google’s Search Syntax •

•

allinanchor: If you start your query with allinanchor: Google restricts results to pages containing all query terms you specify in the anchor text on links to the page. For example, [allinanchor: best internet marketing] will return only pages in which the anchor text on links to the pages contain the words “best,” “internet,” and “marketing.” allintext: If you start your query with allintext: Google restricts results to those containing all the query terms you specify in the text of the page. For example, [allintext: seo services ] will return only pages in which the words “seo” and “services” appear in the text of the page. allintitle: If you start your query with allintitle: Google restricts results to those containing all the query terms you specify in the title. For example, [allintitle: internet marketing] will return only documents that contain the words “internet” and “marketing” in the title. allinurl: If you start your query with allinurl: Google restricts results to those containing all the query terms you specify in the URL. For example, [allinurl: google faq] will return only documents that contain the words “google” and “faq” in the URL, such as “www.google.com/help/faq.html”.

Google’s Search Syntax •

•

• •

author: If you include author: in your query, Google will restrict your Google Groups results to include newsgroup articles by the author you specify. The author can be a full or partial name or email address. For example, [ seo author:john author:doe ] or [ seo author:doe@someaddress.com ] return articles that contain the word “seo” written by John Doe or doe@someaddress.com. cache: The query cache:url will display Google’s cached version of a web page, instead of the current version of the page. For example, [ cache:www.espn.com] will show Google’s cached version of the ESPN home page. define: If you start your query with define: Google shows definitions from pages on the web for the term that follows. This advanced search operator is useful for finding definitions of words, phrases, and acronyms. For example, [ define: seo ] will show definitions for “SEO”. ext: This is an undocumented alias for filetype: filetype: If you include filetype:suffix in your query, Google will restrict the results to pages whose names end in suffix. For example, [ seo evaluation filetype:pdf ] will return Adobe Acrobat pdf files that match the terms “seo” and “evaluation.”

Google’s Search Syntax • link: The query link:URL shows pages that link back to that URL. For example, to find pages that point to ESPN’s home page, enter:[ link:www.espn.com ] • location: If you include location: in your query on Google News, only articles from the location you specify will be returned. For example, [seo location:india ] will show articles that match the term “seo” from sites in India. Many other country names work; try them and see. • movie: If you include movie: in your query, Google will find movie-related information. • phonebook: If you start your query with phonebook: Google shows all public U.S. residence telephone listings (name, address, phone number) for the person you specify.

Google’s Search Syntax •

• •

•

related: The query related:URL will list web pages that are similar to the web page you specify. For instance, [related:www.consumerreports.org ] will list web pages that are similar to the Consumer Reports home page. site: If you include site: in your query, Google will restrict your search results to the site or domain you specify. source: If you include source: in your query, Google News will restrict your search to articles from the news source with the ID you specify. For example, [ election source:new_york_times ] will return articles with the word “election” that appear in the New York Times. weather: If you enter a query with the word weather and a city or location name, if Google recognizes the location, the forecast will appear at the top of the results page. Otherwise, your results will usually include links to sites with the weather conditions and forecast for that location.

Online Research Skills

1. Check Your Sources Evaluating information found in your sources on the basis of accuracy, validity, appropriateness for needs, importance, and social and cultural context

Online Research Skills

2. Ask Good Questions Developing and refining search queries to get better research results

Online Research Skills

3. Go Beyond the Surface Displaying persistence by continuing to pursue information to gain a broad perspective

Online Research Skills

4. Be Patient Displaying emotional resilience by persisting in information searching despite challenges

Online Research Skills

5. Respect Ownership Respecting intellectual property rights of creators and producers

Online Research Skills

6. Use Your Networks Using social networks and information tools to gather and share information

Sources: • https://en.wikipedia.org/wiki/Contextual_searching • http://www.ipl.org/div/aplus/skills.htm • https://www.highervisibility.com/blog/googlesearch-syntax-explained/ • https://www.scholastic.com/teachers/articles/teachi ng-content/6-online-research-skills-your-studentsneed/

Online Safety, Security, Ethics & Etiquette

Digital Life â&#x20AC;&#x201C; Video Demo

Digital Life – Real Time Metrics Social Media counts of 84 users as of 7:10AM today…

Dangers of the Internet

Online Safety ď&#x20AC;Ş is the knowledge of maximizing the user's personal safety and security risks to private information and property associated with using the internet, and the self-protection from computer crime in general. ď&#x20AC;Ş As the number of internet users continues to grow worldwide,[1] internet safety is a growing concern for both children and adults.

Common Safety Concerns on the Internet  malicious users (spam, phishing, cyberbullying, cyberstalking etc.)  websites and software (malware, computer viruses, etc.)  various types of obscene or offensive content  crimes can be committed on the Internet such as stalking, identity theft and more

Internet Security  is a tree branch of computer security specifically related to the Internet, often involving browser security but also network security on a more general level as it applies to other applications or operating systems on a whole.  Its objective is to establish rules and measures to use against attacks over the Internet.  The Internet represents an insecure channel for exchanging information leading to a high risk of intrusion or fraud, such as phishing.  Different methods have been used to protect the transfer of data, including encryption.

5 Tips to Stay Safe

Tip #1: Be Aware

Example: Fake Social Networks Login

5 Tips to Stay Safe

Tip #2: Check for Website Safety

Dealing with Secured Websites ď&#x20AC;Ş provide your information to reputable businesses, then ensure that the company's website uses a Web address that starts with "https" and has a padlock symbol either in the address bar or at the bottom of the browser. ď&#x20AC;Ş This means that the site encrypts your information, making the data nearly useless to any thieves or hackers who may intercept the transmission.

5 Tips to Stay Safe

Tip #3: Choose strong and varied passwords

5 Tips to Stay Safe

Tip #4: What is spyware? How do I stop it?

Spyware ď&#x20AC;Ş is any piece of software that records your actions or information without your knowledge

ď&#x20AC;Ş it's almost impossible to avoid spyware on your own, having anti-spyware and antivirus programs running on your computer is a must

5 Tips to Stay Safe

Tip #5: It's not all about spyware and scams

Other Tips  Limit the personal information that you share online  Secure your password  Signing in and out  Use secure networks  Lock your screen or device

Computer Ethics: Why study ethics?

ď&#x20AC;Ş According to Bowyer (2001), through ethics you become a more ethical person, particularly in your career as a computer professional. ď&#x20AC;Ş It is important to note that as Johnson has proposed (2001), we should think of computer ethical issues as new species of moral issues.

Sample Ethical Issues Topic #1: I think my partner is cheating on me. I need to know the password to my partnerâ&#x20AC;&#x2122;s facebook account so I could check if s/he is secretly flirting with someone.

Sample Ethical Issues Topic #2: My classmate is making fun of me in the classroom. I will secretly-install a keylogger in his laptop so I could sniff his password in FB. When he is not looking, it will be sweet revenge.

Sample Ethical Issues Topic #3: I am an IT professional who uses applications like Photoshop, Dreamweaver and Illustrator. I do not have licensed products. I have downloaded the pirated version.

Sample Ethical Issues Topic #4: As Network Administrator of this exclusive, top notch IT company, I have access to all the files, ALL sensitive information of everyone working in this company. I can get information that I can use to my advantage.

Sample Ethical Issues Topic #5: You decided to make fun of your classmate. You dug around his old photos. You see this old photo of him where he looks funny as a child. You started to like the photo (with the hope that it will show up in the feed). You left comments by saying things like “up” or “gwapomo pre”.

10 Commandments of Computer Ethics 1. Thou shalt not use computer to harm other people 2. Thou shalt not interfere with other peopleâ&#x20AC;&#x2122;s computer work 3. Thou shalt not snoop around in other peopleâ&#x20AC;&#x2122;s files 4. Thou shalt not use a computer to steal 5. Thou shalt not use a computer to bear false witness

10 Commandments of Computer Ethics 6. Thou shalt not use or copy software for which you have not paid 7. Thou shalt not use other peopleâ&#x20AC;&#x2122;s computer resources without authorization 8. Thou shalt not appropriate other peopleâ&#x20AC;&#x2122;s intellectual output 9. Thou shalt not think about the social consequences of the program you write 10. Thou shalt use a computer in ways that show consideration and respect

Online Etiquette Basic Rules to follow while communicating onlineâ&#x20AC;Ś

Think before you send. If you send an email or post a message in anger, it could come back to haunt you later. The same goes for pictures and videos you post online. Even when something is deleted from a page, it may still be out there waiting to be found when you least expect it.

Online Etiquette Basic Rules to follow while communicating onlineâ&#x20AC;Ś

Respect the time and bandwidth of others. Don't pass along emails that contain hoaxes (pranks), or send messages to the entire student body. The same goes for sending large videos or attachments in an email message. It wastes everyone's time when they have to wade through extra information to get to the important stuff.

Online Etiquette Basic Rules to follow while communicating onlineâ&#x20AC;Ś

Don't send messages that could be misinterpreted as threatening or hurtful. Be careful about the language you use as well as the information you pass along about others. Sending messages that could be seen as threatening may result in disciplinary action.

Online Etiquette Basic Rules to follow while communicating onlineâ&#x20AC;Ś

Follow the conventions of writing when sending formal emails or posting comments online. Unless the message you're sending is informal (such as a text message to a friend), you should use correct spelling, grammar, and punctuation. You shouldn't WRITE IN ALL CAPS! (It's considered shouting)

Online Etiquette Basic Rules to follow while communicating onlineâ&#x20AC;Ś

Respect others' right to privacy. Don't use technology to pass along rumors or share personal information about someone without their permission. The same goes for posting names and photos of others.

Resources      

http://www.personalizemedia.com/the-count/ https://www.commonsensemedia.org/video/modal/2078096 https://prezi.com/sbrdbl67fj7d/online-safety-security-ethics-etiqutte/ https://howsecureismypassword.net/ https://www.youtube.com/watch?v=uquRzrcwA18 Social, Ethical, Legal & Professional Issues in Computing by Charlemagne Lavina  IT Ethics.pdf by Jordan Aiko Deja

Imaging and Design for the Online Environment Week 6 â&#x20AC;&#x201C; Handout #6

What is the most visited website in the world? Think about it for a second.

Here is a clue, the site’s mission statement is to organize the world’s information and make it universally accessible and useful.” You have probably guessed it by now,

On March 23, 2016, Alexa.com, a renowned website for ranking web page popularity, ranks this website number one in the entire world. Why do you think Google ranks number one despite the countless search engines and websites in the internet?

3 Main Reasons why Google is the most popular Search Engine • Better Search Experience –The quality of search results is closely monitored by Google’s search quality team and regular algorithm updates are being performed to ensure that only high-quality results are returned in every search query. • Great Business Exposure – As billions of search queries per day are being performed in Google, businesses who advertise their products and services through Google’s AdWords program gain more visibility and exposure. • Innovative Products and Services – Aside from Search, Google has various innovative web-based products and services that are also popular and widely-used by internet users. The most popular are Gmail, their free web-based emailing service; G+, their social networking website build to compete with Facebook; and YouTube, the most popular video community in the World Wide Web. Other popular products include Google Maps, Blogger, and Chrome.

Creating a web page is like creating a work of art. There are certain things that you need to consider in order to get your message across.

Basic Principles of Graphics and Layout

• • • • • • • •

Balance Contrast Emphasis Visual Movement Pattern Rhythm Proportion Variety

Balance

A distribution of visual weight on either side of the vertical axis. Symmetrical balance uses the same characteristics. Asymmetrical uses different but equally weighted features.

Balance

Sample Websites that show Balance/Symmetry in Web Design •

•

ICORA is a perfect example of how symmetry contributes to the vertical flow of a website. Instead of throwing a bunch of stuff on the page and letting the user choose where to go, the designer encourages the user to scroll through the content. The designer takes you on a set journey in what is essentially a carefully planned sales pitch.

Sample Websites that show Balance/Symmetry in Web Design •

•

In PIXEL BLEED nothing about it fits the norm. The logo and navigation are at the bottom, which just feels wrong… and yet it works! The symmetry lends an interesting balance to the design. And with the visually heaviest elements at the bottom of the page, the layout feels grounded.

Sample Websites that show Balance/Symmetry in Web Design •

•

Symmetry can occasionally play into the subject of the website. In the case of DUUEL, the idea of two designers dueling makes sense. The designers are evenly skilled and evenly equipped, and the symmetry subtly reinforces this idea.

Sample Websites that show Balance/Symmetry in Web Design • Symmetry is also great when you simply don’t have much to say. • The makers of CLOCKS don’t need much to explain their product. One word does the job. • In fact, saying more would almost defeat the point.

Sample Websites that show Balance/Symmetry in Web Design •

•

One powerful aspect of symmetry is its ability to direct the user’s focus. With everything balanced on the vertical axis, attention naturally goes there. RYAN M. STRYKER’S name here is in this pivotal location, ensuring you don’t miss it. The website functions almost like an elevator pitch, starting with the name and flowing into a summary of the designer’s work. Critical information is carefully controlled and powerfully conveyed. The design doesn’t have to be overbearing either; the symmetry does most of the work.

Contrast

The arrangement of opposite elements (light vs. dark, rough vs. smooth, small vs. large, etcâ&#x20AC;Ś) in a composition so as to create visual interest.

Contrast

Sample Websites that use Stunning Color Contrast â&#x20AC;˘ â&#x20AC;˘

LUSH is a good place to start because white space is the hero here. It's the delicious coloring of the toiletries, contrasted with large black and white typography and a black header that makes this such an enjoyable site to browse.

Sample Websites that use Stunning Color Contrast •

•

ODD PEARS -The sock retailer (hipsters note, all designs come in threes) is another that uses its colorful stock to full effect. One can browse by the socks themselves or by the patterns thereon. Though most of the color is delivered by the products, this ecommerce site features a number of fun photo shoots, previewed above the fold on the homepage, which deliver additional color. Note the ever-contrasting headers displaying shipping information (in green) and order incentives (in coral).

Sample Websites that use Stunning Color Contrast â&#x20AC;˘ Hipster neighborhood guide ON THE GRID employs a strong blue and white design that uses brightly colored tiles once you drill down into a category.

Sample Websites that use Stunning Color Contrast â&#x20AC;˘

â&#x20AC;˘

HUGE is an agency in love with pink, using the color to highlight mouse-overs and also liberally splashing the stuff on its homepage. Once again, contrast is achieved with text as well as imagery and background color.

Sample Websites that use Stunning Color Contrast â&#x20AC;˘

â&#x20AC;˘

TRAINLINE APP - It's the bold coloring of the booking engine, all mint and navy blue, that's so distinctive. This color scheme is used sparingly to highlight the calls to action through the ticket purchase journey.

Emphasis

Used to make certain parts of an Artwork stand out. It creates the centre of interest or focal point. It is the place in which an Artist draws your eyes first.

Emphasis