** Four Parts ** Part 1 : Web Design ** Part 2 : HTML5 and CSS3 ** Part 3 : Killer Website Project ** Part 4 : Optimize and Launch Websites
- CSS inside an HTML document
- css inside an HTML document <style>
- In its own file style.CSS
child elements inherit their properties from their parents
- transparencies rgba(29, 167, 23, 0.75)
- Margin
- Padding
- Border
- Width (only for content)
- Height (only for content)
Block elements - use the full width of the browser
Inline elements - cannot set the height or width
- Relative position is determined by other elements
- Absolute position is positioned anywhere
** Flat Design
-
2d design - simple clean and modern
-
Typography
Beautiful typography - art and technique of arranging type to make written language readable and beautiful.
- Use a font-size between 15 to 25 pixels for body text
- Use really big font sizes for headlines (perhaps decrease its font weight)
- use line spacing between 120% and 150% of the text
- 45 to 90 characters per line
- use Good Fonts Open Sans, Lato Raleway, Monsterrat, PT Sans / Cardo
- Sans-serif : more neutral, clean, simple, modern Websites
- Serif : traditional, storytelling, long reading
- Font that reflects the look and feel of the website - sans-serif or serif - use only one typeface
- Use only one basic color -
Adobe Color CC Paleton - The meaning of colors in web design Section 4, Lecture 24 Picking a color for a website means more then picking your favorite color and turning it into a design. It means picking the right color in order to get the desired response from your audience. Color really makes a difference. This happens because there are psychological effects behind each color.
- Red is a great color to use when power, passion, strength and excitement want to be transmitted. Brighter tones are more energetic and darker shades are more powerful and elegant.
- Orange draws attention without being as overpowering as red. It means cheerfulness and creativity. Orange can be associated with friendliness, confidence, and courage.
- Yellow is energetic and gives the feeling of happiness and liveliness. Also, it associates with curiosity, intelligence, brightness, etc.
- Green is the color of harmony, nature, life and health. Also, it is often associated with money. In design, green can have a balancing and harmonizing effect.
- Blue means patience, peace, trustworthiness, and stability. It is one of the most beloved colors, especially by men. It is associated with professionalism, trust and honor. That's actually why the biggest social networks use blue.
- Purple is traditionally associated with power, nobility and wealth. In your design, purple can give a sense of wisdom, royalty, nobility, luxury, and mystery.
- Pink expresses romance, passivity, care, peace, affection, etc. Brown is the color of relaxation and confidence. Brown means earthiness, nature, durability, comfort, and reliability.
The ultimate cheatsheet: all web design guidelines in one place Section 4, Lecture 31 This cheat sheet is intended to serve as a quick reference for you.
It contains all the guidelines I showed you in this web design section.
It is very important that you have all of the guidelines in mind at the same time when you're making your designs.
Beautiful Typography
-
Use a font-size between 15 and 25 pixels for body text
-
Use (really) big font sizes for headlines
-
Use a line spacing between 120 and 150% of the font size
-
45 to 90 characters per line
-
Use good fonts
-
Chose a font which reflects the look and feel you want for your website
-
Use only one font
Using Colors Like a Pro
-
Use only one base color
-
Use a tool if you want to use more colors
-
Use color to draw attention
-
Never use black in your design
-
Choose colors wisely
Working with Images
-
Put text directly on the image
-
Overlay the image
-
Put your text in a box
-
Blur the image
-
The floor fade
Working with icons
-
Use icons to list features/steps
-
Use icons for actions and links
-
Icons should be recognizable
-
Label your icons
-
Icons should not take a center stage
-
Use icon fonts whenever possible
Spacing and layout
-
Put whitespace between your elements
-
Put whitespace between your groups of elements
-
Put whitespace between you website's sections
-
Define where you want your audience to look first
-
Establish a flow that corresponds to your content's message
-
Use whitespace to build that flow
-
Put Text on the Image
-
Overlay the Image
-
Put the Text in an Opaque Box
-
Blur the Image
-
The Floor Fade (Black at the Bottom)
-
- Use Icons to List Features / Steps
- 2 Use Icons for Actions and Links . Icons should be recognizable / Label your icons
-
- Icons Should Not Take a Center Stage - They Should Have A Supporting recognizable
-
- Use Icon Fonts Whenever Possible - Vector Icons
Website Basics
Spacing and Layout
- Use Whitespace - put whitespace between elements, groups of elements, website sections, but don't exaggerate
- Define Visual Hierarchy a. define where you want audience to look first b. establish flow that corresponds to your message c. use whitespace to build that flow
Download the 7 steps here Section 5, Lecture 34
- Define your project
Start off by defining the goal of your project. This can be showing your portfolio to the world, selling an e-book, building a blog, etc. Also define your audience. Ask yourself: which is the typical user that will visit my website? This is important, because you should always design with your goal and audience in mind.
- Plan out everything
Once your project is defined, plan your content carefully. This includes text, images, videos, icons, etc. Remember what I told you about visual hierarchy. It plays an important role when you start thinking about what you want on your website and what you don't. Defining the content before actually starting the design is called the content-first approach. It means that you should design for the content, instead of designing a webpage and then filling it with some stuff. Define the navigation. Define the site structure. You can draw a sitemap in this step if we're talking about a bigger project.
- Sketch your ideas before you design
Now it's time to get inspired and think about your design. Then, get the ideas out of your head. And with that I mean that you should sketch your ideas before you start designing. It will help you explore ideas and create a concept of what you want to build. Using pencil and paper is a great way of quickly retaining your valuable ideas. Make as many sketches as you want, but don't spend too much time perfecting anything. Once you have an initial idea, you can concentrate on the details when designing in HTML and CSS. I advise you to never, ever start designing without having an idea of what you want to build. Getting inspiration is very important in this phase, and I already told you how to do that!
- Design and develop your website
After sketching, start to design your website using all the guidelines and tips you've learned in the web design section. You'll do that using HTML and CSS, which is called designing in the browser. Designing in the browser is basically designing and developing at the same time. There are more and more designers leaving traditional design programs such as Photoshop and start designing in the browser. The biggest reason for this is that you can't design responsive websites in photoshop. It also saves you tons of time. In this phase, you'll use your sketches, content and planning decisions you've made in steps 1, 2 and 3.
- It's not done yet: optimization
Before you can actually launch your beautiful masterpiece for the world to see it, we have to optimize its performance in terms of site speed. You also need to do some basic search engine optimization (SEO) for search engines such as google.
- Launch the masterpiece
Your optimized website is now finally ready to launch. All you need for launching is a webserver that will host your website and deliver it to the world.
- Site maintenance
The launch of your website is not the end of the story. Now it's time to monitor your users' behavior and make some changes to your website if necessary. You should also update your content regularly in order to show your users that your website is alive! For instance, a blog can be a great way of doing that.