Dental Info DI 2 PDF

Dental Informatics
Compiled and Prepared by:
Dr. Jose de Chavez

CEU/CED
Disclaimer: All of the views expressed and images contain in

this presentation are not from the author but
from various website.
Objectives:
• Learned the principles of Web Site Design, its

characteristics, including planning in creating a web
site.
Web Site Design
• Web design is a process of conceptualizing,
planning, and building a collection of
electronic files that determine the layout,
colors, contrast, text styles, structure,
graphics, images, and use of interactive
features that deliver pages to your site
visitors
• Website design also involves information
architecture, website structure, user interface,
navigation ergonomics, and imagery
(photography) as well as icons design that helps
find information faster.
Ready to build a website? “Learn the foundation first.”
There are a number of other options for creating your Web design:
1. Hire a professional website design expert to create and build a unique
Web site.
2. Create your own website design using off-the-shelf software such as
FrontPage® or Dreamweaver®. (These software packages do require
technical expertise.)
3. Use online website design tools with pre-set and/or customizable Web
design templates to customize with your company colors, graphics and
text. (Example: Wix)
• The degree of customization included in your website design will
determine the speed and cost of getting your site up and running.
Characteristics of an effective web design
• Usability is the ease of use and learnability of

a human-made object such as a tool or
device.
• Usability is critical for the success of any website
and should never be overlooked.
• Good website usability is about making it easy for
visitors to find the information they need quickly
and easily.
• There are many ways to improve the usability
of your website.
Characteristics of user-friendly website design
1. Mobile Compatibility: More and more people use their mobile

phones to access the Internet, creating a mobile optimized website has
become a necessity.
• Create a mobile version of your website for free with the help of web-based
mobile website builders.
2. Accessible to All Users: User-friendly website should also be
accessible to everyone including blind, disabled or the elderly.
• These users typically use screen-readers to access the Internet.
3. Well Planned Information Architecture: Plan your website sections

and categories carefully and present information in a way that it is easy
for users to find.
• Always think from the perspective of your users. This is particularly important
if you offer a lot of content on your company's website.
4. Well-Formatted Content That Is Easy to Scan: The average Internet
user skims through the content on a web page instead of reading each
and every word from top to down.
• Correct use of headings, sub-headings, paragraphs, bullets or lists help to
break up text, making it easy for readers to scan.
5. Fast Load Times: Slow speed is one of the main reasons why visitors
leave a website. Making sure your website loads within 4 to 6 seconds
is important for good usability.
• You can use free tool such as Pingdom to test the speed of your website and to
get suggestion on what you can do to improve your speed.
6. Browser Consistency: It is important to ensure your website appears
and behaves consistently across all major browsers such as Chrome,
Internet Explorer, Firefox, Safari and Opera.
• Simple things like this set a professionally designed website apart from the
rest.
7. Effective Navigation: It is equally important for the navigation to be

clutter-free.
• Try to limit the number of menu items as far as possible. A drop-down menu or sub-
navigation may work better on large site with many sections and pages.
8. Good Error Handling: Good error handling and description on-screen
messages are very important for good usability. However it is often
overlooked.
• Correct handling of errors at a code level ensures the website is robust and free from
bugs. Displaying the right error message improves the user experience and overall
usability.
9. Valid Mark-Up & Clean Code: A website that adheres to the relevant web
design best practices and standards is often more robust and dependable.
• Ensures the website will load faster and appear consistent across browsers
and devices. It also makes it easier to locate problems and troubleshoot if the
need arises.
10. Contrasting Colour Scheme: The right contrast between the background of
the website and content is one of the most basic yet most important web
design principles that should never be overlooked.
• Good contrast between background and text e.g. black text on a white background
makes your content legible and easy to read. Lack of contrast, on the other hand,
makes it very difficult for visitors to read your content.
11. Usable Forms: Forms are a very important element on business websites. They
allow users to interact with the site. Forms are also very useful for generating leads
for a business.
• To get the most out of your site, it is important to ensure the forms are easy to use and
accessible to everyone.
• Here are some tips:
• Use correct labels for all fields
• Follow good form design principles
• Try to keep the number of fields to a minimum
• Offer tooltips and suggestions
• Display on-screen message on completion
• Use correct validation
Conclusion
• Website usability plays a vital role in the success of a website. Good

usability helps to provide a seamless experience for visitors and
improves your chances of success. It is one of the factors that sets a
professionally designed website apart from the rest. Given above are
11 usability characteristics that every website must display. It can help
to make your website a success.
8 Web Design Principles to Know in 2019
By: Peep Laja Published: April 17, 2019 | Last updated: May 10, 2019
REMEMBER
• Design is not just something designers do.
• Design is marketing.
• Design is your product and how it works.
• The more YOU learned about the
principles of web design, the better results
YOU WILL HAVE.
1. Visual Hierarchy
• Visual hierarchy is one of the most important principles behind good
web design. It’s the order in which the human eye perceives what it
sees.
• Exercise. Please rank the circles in the order of importance:
• Without knowing anything about these circles, you were able to rank
them easily. That’s a visual hierarchy.
• Certain parts of your website are more important than others
(forms, calls to action, value proposition, etc.), and you want those to
get more attention than the less important parts.
• If you website menu has 10 items, are all of them equally important?
Where do you want the user to click? Make important links more
prominent.
• Start with the business objective

• You should rank elements on your website based on your
business objective. If you don’t have a specific goal, you won’t
know what to prioritize.
• Here’s an example. It’s a screenshot taken from the Williams-
Sonoma website. They want to sell outdoor cookware.
• The biggest eye-catcher is the huge piece of meat (make me want it), followed by the headline (say what it is),
and a call to action (get it). Fourth place goes to a paragraph of text under the headline; the fifth is the free
shipping banner, and the top navigation is last.
• This is visual hierarchy—a timeless principle of web design—well done.
• Exercise. Surf the web and consciously rank the elements in the visual hierarchy. Then go look at your site. Is
something important (i.e. key information that visitors seek) too far down in the hierarchy? Make it more
prominent.
2. Divine Proportions
The lower-case Greek

letter phi is used for
the Golden Ratio. So, if your layout width is 960px, divide it
by 1.618 (=593px).
You know that the width of the content
area should be 593px and the sidebar
367px.
Many artists and architects use If the website height is 760px tall, you
proportions to approximate the Golden can split it into 470px and 290px chunks
Ratio. A famous example is the (760/1.618=~470).
Parthenon, built in Ancient Greece:
Here’s what the Golden Ratio If you want to learn more, check out this article
on how to apply the Golden Ratio to
looks like typography.
3. Hick’s Law: Hick’s Law says that with every additional choice increases
the time required to take a decision.
This is similar to the Paradox of Choice—the
more choices you give, the easier it is to
choose nothing. Both principles come into
play with web design.
The more options a user has on your
website, the more difficult it is to use (if it’s
used at all). We need to eliminate choices.
To make a better web design, focus on
eliminating distracting options throughout
the design process.
• 4. Fitt’s Law: Fitt’s law stipulates that the time required

to move to a target area (e.g. click a button) is a
function of the distance to the target and the size of the
target. In other words, the bigger an object and the Spotify makes it easier to hit
closer it is, the easier it is to use. “Play” than other buttons:
• A tiny button is much easier to click when given a 20% size
Let’s imagine there’s a form you want
increase, whereas a very large object, given the same 20% people to fill. At the end of the form,
boost in size, won’t deliver the same benefits in usability. there are two buttons: “Submit” and
• This is similar to the rule of target size. The size of a button “Reset” (clear fields).
should be proportional to its expected frequency of use. You
can use mouse tracking to see which buttons people use the 99.9999% want to hit “Submit.” Hence,
most, then make popular buttons bigger (easier to hit). the button should be much bigger than
‘reset’.
5. Rule of Thirds: The best images

follow the rule of thirds: An image
should be divided into nine equal
parts by two equally spaced
horizontal lines and two equally
spaced vertical lines.
• Important compositional elements
should be placed along these lines
or at their intersections.
6. Gestalt Design Laws: Gestalt psychology

is a theory of the mind and brain. Its
principle is that the human eye sees objects
in their entirety before perceiving their
individual parts.
• Notice how you could see the dog without
focusing on each black spot that the dog
consists of?
• A founder of gestaltism, Kurt Koffka, explained
As it relates to web design, people see the
it this way: “the whole exists independently whole of your website first—before they
from the parts.” distinguish the header, menu, footer, and so on.
7. White space and clean design: White space (also

called “negative space”) is the portion of a web page
that remains “empty.”
• It’s the space between graphics, margins, gutters, space
between columns, space between lines of type, or
visuals.
• The right amount of white space makes a website look
“clean.” While a clean design is crucial to communicate a
clear message, it doesn’t just mean less content.
• The fine use of white space makes it easy to focus on
the main message and visuals, and the body copy is easy
to read.
• In general, white space promotes elegance and
sophistication, improves legibility and drives focus.
8. Occam’s Razor: When given several

competing hypothesis, Occam’s razor urges
you to choose the one that makes the
fewest assumptions and, thereby, offers
the simplest explanation.
• To put it in the context of web design,
Occam’s Razor argues that the simplest
solution is usually best. “The Angelpad team and mentors
challenged us in many ways. “You have
• Simple, minimalist design does not too many things on your home page”
was something we didn’t agree with at
guarantee that the design will work. But, in first, but we’re happy to test. And it
my experience, simple is always better than turned out we had been wrong indeed.
We removed 80% of the content, and
the opposite—and, hence, we should strive left one sign-up button and one Learn
to simplify our web designs. More link on the home page.
Conversion to sign up increased by
• Rework, written by founders Jason Fried 300%.”
By: Peep Laja Published: April 17, 2019 | Last updated: May 10, 2019Conclusion
Conclusions:
• Effective web design and art are not the same. But many
psychological and design principles apply to websites. You can design
a great website by applying the relevant aspects of those laws to your
layout, typography, and images.
• Design for the user and your business objectives. Good web design
can deliver aesthetically pleasing and financially rewarding results.
How to Plan a Website
BY MINDY LILYQUIST, Updated November 04, 2018
What P.L.A.N. Stands For

• Prepare – Identify your target audience, appropriate website tone, and goals.
• Landscape – Think through how you would like your website to be able to
function. More specifically, what features need to be on your site?
• Aesthetics – The way your website looks and feels is just as important as what
it can do. Think about what colors and images you want on your site and how
your site compares to your competitors.
• Navigation – It is important to plan how you want your audience directed
through your website.
• By thinking through what pages you need and how they should be laid out, you will help
ensure early on a good visitor experience.
How To P.L.A.N. a Website
• PREPARE: Before you jump online to buy your domain name and web-
hosting to build your site, you need plan. Pull out your business plan to
help you with these steps:
• Who is your target market? Who are the most likely buyers of what you're selling,
and what is the best way to speak to them?
• What is the goal for your website? What do you want the website to do for you?
Will it generate leads? Sell products? Operate as an online brochure?
• What information do you need on the site to achieve your goal?
• Based on your target market, what is the best way to provide this information? Will
the tone be formal or business-like, or more casual, perhaps even whimsical?
• LANDSCAPE: Figuring out the "lay of the land" for your website is essentially
determining which website features are essential and desirable to meet the
goals for your website.
• To do that, you need to refer back to the goals for your website in the Prepare step. For
instance, do you want to sell products? If so, you are going to need credit card processing
and a shopping cart feature.
Features to consider include:
• Ecommerce set up including shopping cart and payment processing
• You don't necessarily need all of the • Photo or video gallery
features listed above. Again, you need • Map and directions if you see clients in your home office
to consider your market and your • Contact page or information
goals for the site in determining what • Social media links and share buttons
is needed. • Frequently Asked Questions (FAQ)
• Portfolio
• Testimonial page
• AESTHETICS: Design aesthetics, or the way your site looks, is a crucial piece of the
website creation process.
• Thankfully, most web hosts offer templates and content management platforms have themes
to make this part easy.
How to decide the look of your site:
1. Who is your market? Are they moms? Business owners? Survivalists? It's important to
match your site's tone to your market.
• For instance, don’t pick some crazy colored music industry template if you plan to do
business in a conservative B2B marketplace.
2. What is easy to read? Generally, white font on a black background is harder to read than
black on white.
• Also, consider font style. Stick with basic fonts that all browsers will be able to deliver to
the reader.
How To P.L.A.N. a Website: AESTHETICS
How to decide the look of your site….
3. Use images. Research indicates that readers are attracted to visual content.
But you need to choose quality graphics that enhance your content and
message.
• You can take your own photos or there are free or low-cost stock photo
options available on the Internet.
• If you don't have fancy photo editing software, you can use one of the free
and low-cost online graphic editing options
How to decide the look of your site….
4. Above the fold content. You want your best information, the information your visitors
have come to your site to find, front and center on the screen.
• There are too many other websites your visitors can visit if they can't find what they
want on your website.
• You'll want to keep this in mind for each of your website's pages.
• Avoid making your visitors have to scroll down to get the information they want.
5. Responsive design. Since many people now use the Internet on mobile devices, you
want to make sure you use a responsive design
• NAVIGATION: Website navigation is the way the website pages and links are organized.
• Deciding your navigation structure before you build is crucial to designing a site that is
easy for your visitors to use to find what they want. To determine your site's navigation:
1. Use a piece of paper to map out your site. At the top, you'll have your homepage or top page of
your site. This is the page that your domain URL (www.yourbusiness.com) will direct to.
2. List pages you know you need such as "About" and "Contact" just below your Homepage.
3. List main categories of your site, just below your Home Page (same level as "About" and
"Contact." For example, if you have a cooking store, your main categories might be, "Utensils,"
"Pots & Pans," "Kitchen Tools," and "Recipes."
4. Under your main categories, list subcategories. Using the cooking store example, under
"Utensils" you might have "Knives," "Serving Utensils," etc. Under "Kitchen Tools" you might
have "Crockpots," "Spiralizers," and "Mixers."
Putting It All Together
• Once you've completed your P.L.A.N., you're ready to move on to the building
phase.
• That starts with buying a domain name and web hosting, and then choosing the theme
that will fit your tone, and allow all the features you want.
• Once you've built your site, be sure to check that all pages and graphics load
correctly.
• Test your forms to ensure they're working.
• Consider previewing and using your site on different browsers (Chrome, Firefox, Edge,
Safari, etc), as well on mobile devices (smartphones and tablets) to make sure all
elements appear and work.
NEXT MODULE….
Creating a Website with Wix

Website Sources:
• https://www.socialmediatoday.com/content/web-design-11-characteristics-user-friendly-website
• http://www.arawebsitedesign.com/what_is_website_design_66.htm
• http://www.networksolutions.com/education/what-is-a-web-site-design/
• https://99designs.com/blog/web-digital/what-is-web-design/
• http://bpastudio.csudh.edu/fac/lpress/471/hout/netech/dns.htm
• https://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm
• https://domains.google/learn/the-difference-between-a-url-domain-website-more/#/
• https://www.hover.com/blog/whats-the-difference-between-a-domain-name-website-and-hosting/
• https://www.mediacollege.com/internet/intro/thewww2.html
• https://www.techopedia.com/definition/16955/network-infrastructure
• https://conversionxl.com/blog/universal-web-design-principles/
• https://www.thebalancesmb.com/how-to-plan-a-website-1794805

Dental Info DI 2 PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Dental Info DI 2 PDF

Transféré par

Droits d'auteur :

Formats disponibles

Dental Informatics

Compiled and Prepared by:

Dr. Jose de Chavez

Disclaimer: All of the views expressed and images contain in

• Learned the principles of Web Site Design, its

• Usability is the ease of use and learnability of

1. Mobile Compatibility: More and more people use their mobile

3. Well Planned Information Architecture: Plan your website sections

7. Effective Navigation: It is equally important for the navigation to be

• Website usability plays a vital role in the success of a website. Good

• Start with the business objective

The lower-case Greek

• 4. Fitt’s Law: Fitt’s law stipulates that the time required

5. Rule of Thirds: The best images

6. Gestalt Design Laws: Gestalt psychology

7. White space and clean design: White space (also

8. Occam’s Razor: When given several

What P.L.A.N. Stands For

Creating a Website with Wix

Vous aimerez peut-être aussi

Dental Info DI 2 PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Dental Info DI 2 PDF

Transféré par

Droits d'auteur :

Formats disponibles

Dental Informatics

Compiled and Prepared by:

Dr. Jose de Chavez

Disclaimer: All of the views expressed and images contain in

• Learned the principles of Web Site Design, its

• Usability is the ease of use and learnability of

1. Mobile Compatibility: More and more people use their mobile

3. Well Planned Information Architecture: Plan your website sections

7. Effective Navigation: It is equally important for the navigation to be

• Website usability plays a vital role in the success of a website. Good

• Start with the business objective

The lower-case Greek

• 4. Fitt’s Law: Fitt’s law stipulates that the time required

5. Rule of Thirds: The best images

6. Gestalt Design Laws: Gestalt psychology

7. White space and clean design: White space (also

8. Occam’s Razor: When given several

What P.L.A.N.​ Stands For

Creating a Website with Wix

Vous aimerez peut-être aussi

What P.L.A.N. Stands For