my-honganh-blog

[my-honganh-blog]

Website design question you should ask

   Before designing a website. you should know the goal that we need to achieve. Here are some questions that to ask yourself and your client by Emilia shared us.

1. What is the name of your business? What is the meaning behind the name? 2. What is the purpose of your website? 3. What would be some successful outcomes from people visiting your site? 4. What features and functionalities do your website have to have? 5. What aspects of your brand could differentiate your website from others in your niche? 6. If you already have a website, what problems are you running into with your current site? 7. What would fix those problems? 8. What problems are you running into with your business? 9. How might your website be able to fix some of those problems? 10. Please list any websites you like very much and briefly explain why. 11. Is there a specific design/look you prefer for your website? 12. About your contact page:  Would you like a contact form? A location map? An address? Or just your contact details? What are your contact details? 13. Do you require a blog? If so please specify if you know how you want the blog to look like. 14. Which social media icons would you like to show? Please list and include their URLs. 15. Any additional details or creative considerations? I want to ensure we are on the same page throughout this collaborative process! 16. What your domain name/URL? What is your provider name? 17. Site Map

   In her blog, she also explains why we need to ask these questions. I think it’s really helpful for you to begin designing a website.

[my-honganh-blog]

5 tips for websites structure

Why does the website's structure matter?

It is liked the skeleton of body. Or before write an article you must have an outline first, and then begin to develop the points. It is the same with a website, if you have a good structure, you will have a good website.

Search engine optimization (SEO)

SEO is the practice of increasing the quantity and quality of traffic to your website through its search engine page rank. It is one of the most crucial aspects of a site's SEO perform. so understanding what it means to have a site structure can help your site enhances SEO.

A goods site structure means a great user experience

a strong and logical site structure is cognitively satisfying to users. it helps the website easily able to find. your site is more appealing to users will enhance the rank page. in addition, they may recommend it to others.

5 tips for website structure

1. Plan before you

Start with your pen and paper, then brainstorm, draw and write every idea you have about your site then sketch the draft how your homepage link with the other page.

2. Symmetry is key

Anything needs a balance, it is also with the the the the website, it needs a balance. when your structure is lopsided, it may talk about something else and you need to organize it again.

3. Pay attention to page slugs

“Slug” is internet speak for the tail end of the URL for a page or post. For the best user experience, it should be short and simple.

4.make your menu front and center

The menu is also important. It should be easy to find.

5.keep it simple

Make it simple, and try to make it no more than six main menu items.

You can visit this link to more information.

[my-honganh-blog]

Websites with Impressive Illustrations and Animations

1. In Piece - 30 Endangered Species

   As its name, this is a project about an interactive exhibition turned the study into 30 of wold's most interesting and endangered species. It is created by Bryan James.    When you go to the page, it displays the black background with loading function and the short clip around 30 seconds to present the website. Then, then when you go to the exhibition, it changes to the bright background and shows you randomly one of the 30 pieces. It is really easy to use with many functions to choose. as all pieces function to see and watch all pieces or changing automatically, turn off the sound, information and video about the species are displaying.    Basically, the site is really easy to use and understand. besides that, it is colorful and catchy, as well as, the animation was used really good.

2. MamboMambo

   It is a collection of websites which get you into the big world in many expertise such as strategy, art direction, print design, and web & interactivity. It is created by In-House the background is attractive and colorful.    It is supported by English and French. In each theme, it displays the main image to give you some ideas about the website that it presents.    There is only one thing I don't like is I feel it has a sudden change between page when I use the scroll bar.

3. One Design Company

   By One Design Company, it uses green pastel for the main color tone. it transforms research into insight through memorable web design, development and brand strategy. the most I like in this site is the animation. for example in approach page, the animation and using the same tone of color has brought the high efficiency of connecting the contents together and makes it more interesting.  

[my-honganh-blog]

CSS Animation - Part 2

   Today I want to talk about keyframe and animation property. 1. Keyframe rule specifies the animation code. An animation is created by gradually changing from one set of the CSS style to another. CSS syntax:

@keyframes [name] {      from { [style]; }      to { [style]; } }

*Property values: [name]: name whatever you want to call the selector from, to: start and end [style]: what is changing and what should it look like at the end

For example:

@keyframes mystyle {      from { top:0px; }      to { top:200px; } }

2. Animation property is a shorthand property. it's complicated, but it's also straightforward and you can separate properties. here is syntax:

.element { animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state]; }

For example:

.element { animation: mystyle 2s ease-in-out 0s infinite normal forwards paused; }

  Continue the example from the last post:   You create the same HTML as the last post. And here the CSS file:

body {    padding:50px; }

.box {    display:inline-block;    background:yellow;    width:200px;    height:200px;    position: relative;    animation-name: mystyle;    animation-duration:3s;    animation-timing-function:ease-in-out;    animation-delay:0s;    animation-iteration-count:infinite; }

@keyframes mystyle{    from {        height:200px;    }    to {        height:600px;        background:orange;    } }

 Instead of from and to you also can use percentage (from 0% to 100%). with percentage, you can add more animations that you want.

@keyframes mystyle{    0% {        height:200px;    }    30% {        width:400px;        background:orange;    }    100% {        height:600px;        background:red;    } }

   This is the basic CSS code that you can do many animated things for your websites such as orientation, function change, a new element, highlight, visual feedback, and system status.

[my-honganh-blog]

   To continue the last post about CSS animation. this post I did a practice, and note all the code that I didn't know before.    First of all, create a class "box" in HTML file, then follow the CSS code behind:

body {    padding:50px; }

.box {    display:inline-block;    background:red;    width:200px;    height:200px;    transition: transform 300ms ease-in-out; }

.box:hover {    transform:translate(200px, 150px) rotate(20deg); }

Inline-block value: display an element as an inline-level block container, and you can change its data. For more information about display-property value, you can visit this link.

Transform property allows you to rotate, translate(move)... (more value in this link)

Apply the coding from the last post to make the transform moves. you can change any transition-timing value if you want (link)

  We can see the problem in here is when you hover over the object by mouse, it will move. To solve it, we can create and design another element (in HTML file) which is a parent of the box.

body {    padding:50px; }

.box {    display:inline-block;    background:red;    width:200px;    height:200px;    transition: transform 300ms ease-in-out; }

.trigger {    width:200px;    height:200px;    border: 10px double black;    background:#BFACB5; }

.trigger:hover .box{    transform:translate(200px, 150px) rotate(20deg); }

  It was hard for me to try to understand this part when I'm following the video. .trigger:hover .box:    To make it simple. if you write just only .trigger:hover, you will move both elements. so you don't want it to happen, you just want only the box moves. it means when you hover the trigger, the box will be affected and move.

   And here is the result.

(to be continued)

[my-honganh-blog]

   What will you gonna do when you don't have any ideas for your website? So here is several idea content ideas that I prefer mostly and you can consult.

Buying Guides: it has a variety of different form, but they have a common purpose that helps your user make a decision to buy certain products. Especially when you list the products you sell on your site. (Example: Mac Rumors)

What not to do: basically, you can post some of worst things or choices you can follow. The post can be fun for you to write it. You can turn the story in a cautionary or humorous way. It depends on the level of consequences in your particular subject. (Example: link building)

Quiz: this is an interesting content for your site, especially if you want more users participating on your webpage.” Make the quiz short and easy to take” 

Games: it has many advantages as you can turn anything into a game, or create a game for your user

Comics: it could be hard, but it could be easy also, depending on what kind of mood they’re in. 

Memes: even it is easier to make a meme. It grows significantly to refer to any image, colloquial phrases, often display in an entertaining way.

Regular video series: instead of writing a post, you can use a regular video series, and it should be weekly, then you will gain your viewer loyalty.

   There is more idea that you can follow. You can also visit the link to know more idea for your website.

[my-honganh-blog]

   This is the brief of the video I want to share with you about how to do the CSS Transition.

   The first thing we should know is what is animation? According to Oxford learner's dictionary, the animation is the process of making films/movies, videos and computer games, in which drawings or models of people and animals seem to move. The CSS Movement makes the things possible to animate transition. There is two main way to make it work - Transition Property and Animation Property & Keyframes.

   Part 1: Transition Property.

   Normally, it used as part of transition shorthand, and define what property you want to apply a transition effect to. So here the formula of transition:

.element {    transition: [property] [duration] [ease] [delay]; }

.element - is can be a class, the thing that you want to move

[property]: the other property that is going to be animated

[duration]: how long the transition happening

[ease]: the default value os the CSS timing-function property

[delay]: how long is it wait before the transition happen

For example:

.element {    transition: opacity 300ms eas ease-out 1s; }

   Animable property includes font size, background color, the size (width height), etc. but there is some property cannot animate such as display, font-family, position. basically, you cannot change something from this font to the other font, you just can switch it, or change from relevant to absolute.

   Properties are position, scale, rotation, and opacity. With the position is not position, it is about transforming top to bottom, left to right.

   Triggering - how do you make it happen    We have many ways to do it, but there are two main ways - hover pseudo-class and class changes

   The hover pseudo-class is the interaction between user and an element with a pointing device. Normally, it is triggered when the user hovers over an element with the mouse pointer.

   Class change is a normal class the switch a class, but the class has the style of transition. And you can do it with menu or drop-down.

[my-honganh-blog]

  I found out how to create a simple Animation Movie with HTML. It is fun, and I think it will helpful for beginners to create an animation website. In this code, we can learn how to use the marquee element which "is a non-standard HTML element - causes text to scroll up, down, left or right automatically" (Wikipedia). basically, the marquee element is constantly moving.

   Firstly, you need to create an html file.

   Secondly, add any background that you like, and the image (png file) you want it moves (In my product, I used a bird). And now it is time for the coding.

  Here is the code.

<DOCTYPE! html>

<html>

   <body background="1.jpg"width="100%">

   <marquee direction="left"><img src="2.png"width="10%"/></marquee>

   </body>

</html>

   Finally, add a position. You can use CSS or HTML breaks to adjust the position.

   Below is my product. :)

[my-honganh-blog]

   There are many types to design a website. Here are 12 trends in web design:

1.Cards:    It is easy to understand the content of a web page like Pinterest. It is also great for organizing a large of content into easily digestible and viewable, and easily reorganize by themselves. 

2. Illegibility:   Reducing the contrast in the text, the page is becoming more and more illegible. 

3. Minimalist design:    Stripping away distractions making web very clean, and increasing legibility and simplicity of navigation. 

4. No bad Wordpress:    Try to use a responsive theme. “Be original be beautiful be simple”

5. Material design hybrid:    Material design is essentially a hybrid between flat and volumetric shape, so it is easier to navigate. It is also better for the mobile device to help visitors understand how to navigate and what they need to do next.

6. Rich animations:    "Animation can play a huge part in making ideas and interfaces easier to understand", says interactive designer Chris Gannon. Animated website is an obvious trend and gives a company a big opportunity to enhance their brand further. 

7.Dynamic typography:    Using new and different fonts and fonts size able to be simple and dramatic. It gives you an opportunity of displaying your brand identity in a very unique and differentiated way.

8. More vibrant color:    When you chose the right color for your website. It can be a positive impact for your visitors what they see on your website beyond its layout and typography.

9. HD visuals 10. Optimized for mobile 11. illustrations:    It gives you an opportunity to create a level of personality, uniqueness, and style.

12. UI vs. UX

[my-honganh-blog]

   I'm studying how to build a website with "HTML" and "CSS," but at the first time, I was wondering what is the difference between them. Both of them used to build a webpage, and each serves a very unique purpose.

    HTML: HyperText Markup Language. You can imagine it is a bone of a human, so HTML is a structure of a website, used to create the content of the page. it allows you to publish online docs with headings, text, images, retrieve online information vis hypertext links, and the other pieces of content.

    CSS: Cascading Style Sheets is like clothes, the thing you can see, and you can design it. With CSS. You can design fonts, colors, and layout. Besides that, you can adapt display across platform such as large screen, small screen, etc, and you can modify the style easily without changing the HTML elements.

    For example

- HTML consists of tag surrounding content

<tag> content </tag>

<h1> This is my blog </h1>

Tag: HTML element is an individual component of an html document, used to describe a specific section on a website

Content: text, link, images, etc that you want to display on your website.

 - CSS consists of selectors followed by a declaration block

Selector {property: value;}

h1 {font-size: 1.5rem;}

Selector: the html element you want to style.

Declarations contain a property and separated value

    So, there is a basic thing to distinguish between HTML and CSS. I found out some useful cheat sheets on Pinterest for the beginner. 

[my-honganh-blog]

Here is the next post. This time I want to recommend you a video I found "5 Website Design Hints. Web Design Tutorial for beginners". I've just learned web design a month, so it can be helpful for me in the future. So here are the tips.

1. Color Pallete: Normally, I used to find on Pinterest (a huge resource for designers) and colorpalettes.net(it is good in color selection). In the video, he recommended paletton.com. they let us choose 1 or more colors with the color scheme such as monochromatic (1 color), adjacent color or triad (3 colors), tetrad (4 colors) and freestyle. The result will show on the right side. Besides that, you can check it how is it gonna be on a website. by clicking examples, it will create a hypothetical page layout, or artwork, or animated which use the color(s) you chose.

2. Great Images: Hiring a photographer???? It's impossible, especially I'm not rich and I'm still a student. Pay for stock images such as iStockphoto, and Shutterphoto - I think I can do that but it depends on how good is it, or I really need it or not. So, I prefer to use Pinterest. After this video, I have two more free-image websites - unsplash, and pixabay.

3. Space: The tip is adding a little bit of extra space all around the elements (text, images, graphics) to make your website more clear.

4. Be decisive: I am not really clear about this tip much. But the main point of it is just rid of using sliders. why can't we use the slider? He said because we can't decide what is the important thing, so we use the slider. We can use Dive as he recommended or invisionapp.com to test and get more overview about our designing website.

5. Mobile Viewers: This is the good hint. why did I say that? maybe your websites don't have attractive color or credible images. Nowadays, when all most people use a mobile phone or tablet to visit your websites, you should make sure that they look good on any kind of devices.

6. Fonts: Here is the link he recommended some font combinations. https://www.garettcreative.com/21-google-fonts-combinations-for-websites-brands/.

But if you want more than that you can try to find on dafont.com - free resources of fonts.

[my-honganh-blog]

This video is for beginners, introduce about the graphic design tutorial and how to learn it. - What is design? The design is a process of drawing or planning something to communicate an idea or concept. It is not using any software or done on a computer, also painting ability to draw. Maybe you can think that design is art. Through this video, we will know design is not art. It can be art, but art must have a function and should be understood by everyone. What is the difference between graphic design, product design, and web design? Graphic design: is a process of visual communication, mostly for print such as book, magazine, poster. Product design is a process of creating or improving a product that can be used. Web design is design for the world wide web.

- What does a designer do? That solves the problem or do something that consumers want through the project. so a designer must be flexible and open-minded, then always update such as what consumers need or new trends.

- Design process It has many benefits. The process presents your work and keeps you organized, productive and creative. It has two basic different design processes - the rational model and the action-centric model.

- Design elements: It can be line, form, color, texture, space, mass.

- Design principles: Alignment helps organize items, creates groups and visual connection. Contrast: when 1 or two elements are different with another. Bigger different - different contract. Repetition is also called consistency.

- Design elements and design principles in the real world: To identify design elements in the real world, you can collect a few magazines, catalogs or anything printed or just look your favorite websites. Then open your eyes and take long looks and analyze all the graphics project.