Designing and creating the websites
Projektowanie i tworzenie stron www
the principles of designing and creating websites,
be able to explain the process in English.
Why do you use websites? What is their main function?
Which websites are the most attractive for the users?
Why do you like browsing some websites and leave others very quickly?
What are the graphics on websites that you like?
Open several websites that you like. Analyze what you like about these pages and what you do not. Then complete the table:
www | pros | cons |
Before you create your own website, read the following text and then write down the main principles of proper website designwebsite design.
When designing a website, it is worth considering some rules for their creation. Below I will present and explain a few rules that are worth following.
Less is more
„Overloading” a page with graphics can, firstly, distract the Internet user from the main content and will cause difficulty in finding information and secondly, the page will load longer. Can you imagine a situation in which you will find yourself in a building where in all rooms and on all corridors, the doors, walls and windows will be glued with colorful patterned posters? Moving around such an object will be difficult, and when you do not find the door again, you will be angry. Of course, exaggerating the other way is also not recommended. A reasonable proportion must be found. However, it is better to accept the principle that in this case less is more.
Make a clearly visible menu
Internet user should be able to figure out where to „click” to start moving on your website. Also on the next subpages the menu should always be in the same and visible place, so that the visitors of your website do not have to look for the possibility of moving to further websites.
Use simple, logical navigationlogical navigation and intuitive structure
Think about how the customer reacts by going into the store, where the products will be arranged in a less logical way. For sure he or she will walk among the bookshelves more and more irritated that it is difficult for him or her to find what he or she is looking for. Perhaps they will get so upset that they will leave without doing any shopping. Similarly, this experience may be compared with a website. After opening the menu, the Internet user should quickly find out what he will find under his button. In developing the proper structure of the website, it is very helpful to take the so‑called „map” of the page, i.e. a graph on which you can visualize the layout of materials and information of your website. You can also look at what layout the „competition” of recognized reputation has taken.
Ensuring correct display in different browsers
Everyone has their favorite browser. For some, it's Chrome, for others it's Firefox, but for many it will be Internet Explorer, Opera, Safari, or something else. Each of the browsers, although interpreting the same code displaying your website, will do it a bit differently. If, when designing your website, you only take into account how your favorite browser is interpreted and displayed, you may find that your website on your friend's computer looks much worse, or you cannot display it at all. When creating a website, it's worth using only code elements accepted by most browsers. After creating a new, next part of the page it will be good to check how it will be displayed on different browsers and in case of problems, check which piece of code (or which line of code) can be incompatible and try to find a different solution.
Make sure that the page displayed on different devices is legible and easy to read
This is technically called the assurance of website responsivenessresponsiveness. It is now very important, because smartphones have become devices on which websites are displayed very often and this trend is growing all the time. At the same time, due to much smaller size and completely different aspect ratio of the smartphone screen, the page displayed on the computer and on the smartphone should have a different layout and navigation.
Click on the numbers on the screen, and you will see additional rules to be followed when designing websites.
Create a checklistchecklist that you will be able to complete by viewing the pages from the previous task. A checklist is a list where important points are placed, it must be checked to confirm that the website meets all of them.
Before you start creating a website, first think about what information you want to place on it. List all the things which should be on the menu. Remember that a good website should not have too much text, be too colorful and should not contain too much graphics. Consider using a template when designing your own website.
Exercises
Determine which sentences are true.
- A good side should be responsive
- The page will display in the same way in all browsers
- The more colorful the page is, the more it attracts attention
- The website, especially the first page, should contain only key information
- The principle of three clicks says that if you do not find the required content after clicking 3 three times you should leave the page
Draw a flowchart of the website that you would like to create for your school. Think about elements that should be on the page menu and what information should be placed there. Use available computer programs.
Describe principles of website design in English.
Indicate which pairs of expressions or words are translated correctly.
- tworzenie stron www - website creation
- projektowanie stron www - website design
- responsywność - responsiveness
- szata graficzna - graphics layout
- czytelność strony - intuitive layout
- intuicyjna struktura - readibility of the website
- tworzenie stron www
- internet browser
- przeglądarka internetowa
- szata graficzna
- responsiveness
- responsywność
- graphics layout
- website design
- projektowanie stron www
- website creation
Glossary
lista kontrolna
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: checklist
szata graficzna
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: graphics layout
przeglądarka internetowa
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: Internet browser
intuicyjna struktura
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: intuitive layout
logiczna nawigacja
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: logical navigation
monitor
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: monitor
czytelność strony
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: readibility of the website
responsywność
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: responsiveness
tworzenie stron www
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: website creation
projektowanie stron www
Nagranie dostępne na portalu epodreczniki.pl
wymowa w języku angielskim: website design
Keywords
graphics layoutgraphics layout
internet browserinternet browser
responsivenessresponsiveness
website creationwebsite creation
website designwebsite design