2. Rational Website ☻
http://www.rationallydesignedwebsite.com__________________ ____________ GO_
Elements | Composing | Good | Websites | Help
Combining Rationality and Art in Web Design
Combining text and visual media in an artful and appealing manner is
the goal of a good website. You want to deliver this content to the
user with the end goal in mind of having them perform a certain
specific task (such as purchasing something, becoming part of a
community, gathering information or raising awareness about
something).
4. Headers - Composition and Impact
● Headers usually consist of various combinations of the following elements:
Logos, Banners, Title, Site or Organization Names, A Secondary title or short
description, Social Media Buttons, and the Main Navbar
● It’s very important to combine these in an efficient, visually pleasing manner.
The header is the first part of the website a viewer sees, and can takes up to
60% of the screen before the user has to scroll down and see more. This is
your First, MOST important chance to make an impression on the viewer. It is
your pitch to the user and it's your chance to convince them that the rest of
your website is worth not only viewing, but worth being excited about.
5. What makes a good Header
Almost ALL websites have a combination of the header elements listed in the last slide, however
many fail to combine them in an efficient, visually pleasing manner.
General Rules:
● Take advantage of most of the header space - Don’t clutter it, but
take advantage of the prime real estate your webpage has to offer.
● Balance the header - In Art there are two main kinds of balance:
Symmetrical and Asymmetrical Balance. If your header’s content
isn’t centered or symmetrical and has a title or name that is left or
right aligned, make sure you are doing something on the other side
to balance it out. Viewers subconsciously visually crave balance.
David Hockney A Bigger Splash, 1967
This slideshow
Was created by
William
Visconage
6. Main | Navigation | Menu
● Navigation Menus should try to avoid having more than seven items
● Use menus items that are simple, definite, and broad in meaning.
○ Simple & Definite - short, concise, menu items should communicate the purpose of the menu
item immediately and should not be confusing or obscure.
○ *Teasing minimal information (hooks) can sometimes be a popular design choice to draw the
viewer’s attention, which is fine in other places, but your main (top) navbar should NEVER be
ambiguous. Viewers want to know where they will be going when they click on a menu link
○ Broad - if you plan on adding more menus later, a broad category (ex: resources) will allow for
growth, if you later want to add more menus later
● Some good examples of main nav menu items are:
Home, News, Shop, Blog, Forum, Media, About, Help, Resources
*only use one of these
7. Theme
Themes are broad, but very important stylistic touches that affect the overall look
and feel of the website and can help subconsciously convey the message you are
trying to get across. Without giving any concrete examples, I will convey a sample
of the feelings a good theme can give off:
- Warm, Scary, Relaxing, Exciting, Sharp and distinctive, Smooth and warm
A good theme has all of its content: color, font, shapes, interface, addons/plugins,
media, buttons, and social media content working together in unison to contribute
to the feeling of the theme. With that in mind, it is important to make sure none of
your content deviates or detracts from the theme and visual feel your page is
working towards.
8. Color
● Study the complementary colors and color wheel
● Try and stick to 3-4 colors as a baseline (main color,
secondary color and accent color -
○ for subheadings and descriptions you may use a weaker
shade of one of the main 2 colors
● Any colors in excess of 3 should either be a shade of white,
black, grey, or a variation on one of the 3 main colors
● If you are going to use 4 or more unrelated colors, check to
see if the colors in your palette work together and try not to
mix hard and soft colors
● Simple/less complex designs should stick to fewer colors to
make simple content stick out more, while more complex
designs can use additional colors if needed
9.
10. Text content - .....surprisingly unimportant to visually draw in viewers…
STRIKINGLY VITAL TO RETAINING VIEWERS ONCE YOU HAVE THEIR ATTENTION!
● Text content is the one and maybe only part of a sites design where the visual
appeal of your site takes a backseat to the message you want to convey
● Here are some general rules:
○ Don’t overload the viewer with too much text
○ Focus on quality of your words over quantity
○ Readability - read over your text, it should flow smoothly and it should have robust
spelling and grammar and be in a legible font (when in doubt, arial is a great
starting point)
○ Lastly, Appearance - make sure your font is easily readable in both color and font
type
11. Responsive Design (media queries)
We live in a world dominated by smartphones, tablets, and mobile devices, which has helped
increase the number of people who actively use the internet and your odds of getting traffic.
It is your job to make sure that not only are mobile users able to access your content on a
mobile device, but they are able to do so in a convenient and visually pleasing manner. In
other words, mobile layouts must be simple and barebones, while still getting your message
across.
12. Some Hard and Fast Responsive Design Rules
Here are some hard and fast rules. When dealing with responsive design, there are two
important things you must do. (Many web designers do the first, but neglect the second)
● Resize and rearrange content to suit the device / screen size of the viewer
● Remove content as the screen size gets smaller. Many may think this as nonsensical,
but It actually makes a lot of sense when you stop to think about it.
○ Firstly, small screens are frustrating and hard to use by comparison when you
sites don’t remove less vital div sections, making some design choices harder to
tactfully implement, and making the viewer more critical of your content.
○ Secondly, the amount of content you are presenting must be proportional to the
size of the screen you are viewing it on.
13. Close the Sale
Congratulations! You’ve hooked the viewer with your header, you’ve reeled them
in to shore and out of the digital ocean with your ease of navigation, intuitive
layout and beautiful color palette. You have scooped the viewer out of the water
and put them in a net, trapped and unable to escape from the captivating rational
design of your website. You Caught them! They are all yours!
………....wait..?.....What were you trying to do again?
You put in all this time and effort and work studying your subject, staking out your
post, preparing the line, and waiting.
Don’t forget to close the sale! This is your chance to make the viewer do
whatever you wanted them to come here and do, make sure they are able to do it
in a easy and convenient manner.
▼
14. Close the Sale - Checkout
Websites all have different goals, but most narrow down to a few key categories:
● To Raise Awareness or Inform
● To Build a Community (either online or off)
● To Sell a Product or Service
● To Entertain
● To Collect Information
● or To Get the User to Perform a Certain Specific Task
Make sure you are able to deliver on your goal. Your Website is essentially a huge
sales pitch, and even the greatest salesperson may have trouble selling a bad
product. Test the “checkout” process yourself first and make sure “checking out” is
a convenient and rewarding experience.
15. *Important website elements that do not involve design
● SEO - search engine optimization
● Tracking / Analytics
● Metadata and fine-tuning specifics
● Security - Anti-spam, database security (protection against MySQL injections, etc), whois, password
complexity, stored user information importance and repercussions, public/private key pairs for server
access (encryption-key pairs), ssl certificates, ssl labs security test, etc.)
● Databases - for storing information (wordpress uses MySQL by default)
● User/admin permissions and file ownership - important and complex of topic.
● Backend - backend code and server management, APIs, plugins, etc.
● Domains - domains / domain management (just the website name/separate from hosting)
● Hosting - hosting process - Virtual Private Server (VPS), dedicated hardware, or local machine.
○ Know the differences between using service like wordpress.com or hosting company lke
godaddy.com, and using a VPS (virtual private server) to self-host (save costs + more control)
● Tools - useful website tools: builtwith,Wordpress plugins/widgets, Bootstrap and other CSS libraries,
development environments, frameworks, and testing, ssl labs (ssl + security test)
16. You now have a greater understanding of how art
and design elements and rationality design work
hand in hand in accomplishing your goals, especially
in the world of web design.
Congratulations
and good luck
