Please enable JavaScript.
Coggle requires JavaScript to display documents.
UI Design, Frontend Design - Coggle Diagram
UI Design
-
Typography
Most of your content will be text, so beautiful typography is a key element to a good looking website.
- First try to differentiate between Serif and Sans Serif
- Sans Serif
- Opens Sans
- Lato
- Raleway
- Monsterrat
- PT Sans
- Serif
- Cardo
- Merriweather
- PT Serif
Some Guidelines
- Use a font size between 15 to 25px for body text. (as per current display devices)
- Use (really) big font sizes for headlines. Try to cordinate between font size and font weight.
- Use line spacing between 120 to 150% of the font size
- 45 to 90 Chars perline is the line length that is easy to read. ( less chars only if poem or some columns)
- for special characters use Glyphs
- For the font size, fix one origin in px (lets say in the root dom), and then, set rest of the font size in % percentage everywhere, relative to the root dom. That way, you'll get things easier to handle
Color
Some Guidelines
- Use only one base color.
- Use tools if you want to use more colours.
- Use color to draw attention.
- Never use black in your design
- Choose color wisely. Some blogs related to color and psychology:
- know which colors company uses in designPieces
Images
Images are getting more and more important in webdesign, so choosing great images and putting text on them is an essential part of your work.
Some Guidelines
- You can put text on images:
- Directly, but contrast between font and image should be more.
- Using an overlay.
- Inside a box.
- Blur the image.
- Using Floor fade.
-
Icons
Icons are also a good way of setting a friendly tone for your website, but use them carefully.
Some Guidelines
- Use icons to list features/steps.
- Use icons for actions and links.
- Icons should be recognizable.
- Label your icons if you can.
- Icons should not take a center stage.
- Use icon fonts(vector) whenever possible opossing to static image icons.
- for icons you can use:
- for favicons converter use:
Spacing and Layouts
- The adequate use of whitespace makes a website look professionally designed, so use it a lot, but in the correct way.
- Build a layout by defining the visual hierarchy of your content. Whitespace is also important for this.
Some Guidelines
- Use whitespace
- betweend your elements.
- between your groups of elements.
- between you website's sections.
- but don't exaggerate.
- Define Visual Hierarchy: Whitespace describes invisible relationships between the elements of your website.
- 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.
- prefer using padding in parent element, rather than margin in the child elements.
Resources
- Coggle links
- Medium
- Misc
- Fonts Idea
Neumorphism
Some Guidelines
- Collect designs that you like.
- Try to understand everything about them.
- Why do they look good?
- What do these sites have in common?
- How were they built in HTML and CSS
- Steal like an artist. At the beginning, don't worry about originality. Rather observe and take inspirations.
Frontend Design
Part 1- UI Design
Part 2- UX Design
Part 3 - Courses
Project1
Udemy HTML CSS course*
-
-
CSS
Background
background-image
- 1 more item...
background-color
- 1 more item...
background-size
- 1 more item...
background-position
- 1 more item...
background-repeat
- 1 more item...
background-attachment
- 1 more item...
background-clip
- 1 more item...
-
Part 4 - Projects
Project1
Omnifood
Section - Meals
What we'll learn
- How to make a grid of images.
- How to make a nice "zoom-in" transition, only using CSS.
- A way to make <img> elements darker.
Section - How it works
What we'll learn
- How to draw circles in CSS
- A cool techniques to make separate between sections
- How to incorporate App Store and Play Store buttons
Section - Cities
What we'll learn
- Practice our new skill set
- How to use small icons aligned with some text
- How to style generic links
Section - Testimonials
What we'll learn
- How to create a beautiful background-image effect
- How to effectively communicate what customers have to say
Section - Signup
What we'll learn
- Design with border radius
- How to create box shadows with CSS
Section - Form
What we'll learn
- How to use a set of new HTML elements to create forms: form, label, input, select, option, textarea
- How to style these elements
Footer
What we'll learn
- How to build a simple but effective footer
- A cool way of using social icons
Responsive Website
-
-
jQuery
- jQuery is the most popular JS library
- It is free
- jQuery makes it easier to:
- Select and manipulate HTML elements
- Create animations
- Develop Ajax applications
Optimize
Website Optimization
- Optimize heavy images
- Minify CSS and jQuery Code
Search Engine Optimization (SEO):
techniques that improve and promote a website to increase the number of visitors the site receives from search engines.
- 1 more item...
Launching the Website
- 2 more items...
Header
What we'll learn
- New HTML elements: header, nav, ul, li.
- Put text on an image: make image darker.
- How to make that image as high as the browser viewport.
- How to make a vertically, and horizontally centered box.
- How to design buttons.
- The 4 link states in CSS: link, visited, hover, active.
- CSS3 transition for small animations.
- How to create a simple navigaiton.
- For the font size, fix one origin in px (lets say in the root dom), and then, set rest of the font size in % percentage everywhere, relative to the root dom. That way, you'll get things easier to handle.
- If you're creating hover effect, you must have that property in default value also:
.something{
border: 2px solid transparent;
}
.something:hover{
border: 2px solid red;
}
-notice that adding border to hover should be done only if border exists at normal state.
7 Steps to Build any website*
- Define your project
- Plan out everything
- Sketch your ideas before you design
- Design and develop your website
- It's not done yet: optimization
- Launch the masterpiece
- Site maintenance
3 Ingredients to Responsive Web-Design
- Fluid grid: all layout elements are sized in relative units, such as percentages, instead of absolute units like pixels.
- Flexible images: are also sized in relatives units, so as to prevent them from displaying them outside their parent elements.
- Media Queries: allow us to specify different CSS style rules for different browser widths.
Section - Features
What we'll learn
- How to put content on a website directly from CSS with the :after pseudo-class
- We'll use the fluid grid for the first time
- We'll learn how to use icons.
-
-