The following paper describes the process of creating a web design for an educational platform called Bazis Online. The main purpose of this bachelor project is to become familiar with the basic issues related to web design and to create a graphical interface for Bazis Online – a Russian online education platform. The purpose of the present work is to find a solution to the problem of attracting and retaining new customers to a company with a modern and user-friendly interface.
The primary purpose of this project is to create a website design where the potential students of the Bazis Online institution can connect and study from all over the world, and to contact a teacher and get all the necessary information about their studies. . Another goal of the new website is to invent the possibility to register and pay for studies online. This dissertation aims to explore different ways of creating a layout for a new website by applying enough knowledge obtained during the theoretical research.
Plan and thesis framework
The research in this thesis includes a step-by-step guide to designing web pages, which includes defining all the necessary design components and how they can affect the visual outcome. In addition, I will consider basic web design principles such as color theory, typography, icon usability, and current design trends. Ultimately, behind the particular decision to create a certain design is a great and clear understanding of the basis of web design.
The design should relate to the style of Bazis Online, support the spirit and attitude of the brand, help them stand out in the education market among other companies and be attractive to all new and existing customers. In summary, it is extremely important to understand the brand strategy, strengths and weaknesses, and what makes a customer unique among others. This research will help provide this information in future website design for Bazis Online.
Web design definition
In this process, I will use different aspects of literature observation to achieve the research objective and get the final outcome. A good web design is not just about delivering content to the user and making it look good.
User interface and user experience in web design…
Another important thing to consider while creating a website design is its responsiveness. It is very important for every web designer to be familiar with all the latest trends and practices in the field of web design and development. Responsive Web Design, the formatting of website design, is a method that is highly optimized for viewing and navigation through a wide range of devices such as traditional personal computers, smartphones and tablets.
Web design inspiration.…
Personally I like key elements like buttons and other calls to action to be big and bold. I think this typography brings out the brand identity by setting a light green color against a gray website. The client is a Russian company called Bazis Vocational Education Institution with more than 100 offices in St.
Within the high demand among students and growth of the institution's profit, Bazis decided to go online in 2016. The sub company was called Bazis Online, and must have an online platform to run their courses via the internet. Bazis Online will make the lives of many students easier by allowing them to take lessons regardless of what their timetables may be and where they live.
In contrast to face-to-face lessons, student interactions create an interactive effect, resulting in high-quality dialogue. To take a step towards the process of creating a new website, it is important to understand the strengths and weaknesses of the company. The strong point of Bazis Institution is about the content, the uniqueness of the courses they offer and the ability to change and adopt the rapidly changing technologies by updating the study programs and providing current information to the students.
The client has recently decided to approach a younger market, which represents a significant portion of potential future clients. At the moment, the main goal of Bazis is to run the Bazis Online project as soon as possible.
Grid
Typography in web design
Today, thanks to CSS3, there is a large selection of different fonts that can be used in web design. As Turner mentions, fonts are designed to be used in a specific context and for specific purposes. Serif fonts (with diminutive serifs like the Times New Roman typeface) are usually identified as professionalism and importance, whereas san serif fonts (e.g. Helvetica) mostly look modern and give a fresher, cleaner and more informal feeling.
Sans serif fonts mostly bring a modern feel, adding refinement and a clean look to the interface. Turner also writes that sans serif fonts are used by tech industry users to feel up to date. The manner in which typography is presented on the website also plays an important role.
Line spacing and spacing should be kept in mind as texts appear easier to read with greater spacing. For content that has multiple lines of readable text, make sure the distance from the bottom of the words above to the top of the words below is the correct distance to make them readable. In the past, strips of lead were used to vertically separate lines of text; the naming convention remains.”.
Kerning is used to adjust the closeness of neighboring letters to optimize their visual aspect and readability.
Colour theory in web design
Psychological aspect in web design
Icon design
Design brief
It is required to include several calls to action, such as "purchase course", "call back", and "sign up". The system design must accurately display on any type of monitor and with any type of web connection (modem, high-speed channel, etc.). Graphic elements should be light enough to ensure the high speed of page loading on the site; a website should allow easy identification of a course visitor. A site must display correctly on all possible screen sizes and resolutions; this requires a responsive design.
The website interface must provide a visual, intuitive representation of the structure on it, as well as a quick and logical transition to sections and pages. If the website contains a link to another website, it should be opened in a new window. In terms of visual aspects, the client suggested using darker and calmer shades, avoiding bright reds and yellows.
Design process
During this process, I reviewed the content and assigned it three colors – green for the content to be kept on the future website, yellow for the unnecessary content and red for the content to be removed. The further fate of the yellow-marked content was discussed and resolved during meetings with the client. In my opinion, it's a pretty good technique to quickly sort through the given content and point to important content on the future website.
According to Hobson, a hierarchy is a system or organization in which people or groups are ranked above each other according to status or authority – and we can actually apply this statement while working with content hierarchy. During the content sorting process, I always thought about how the content belongs and how it will be distributed.”. When the content is sorted and wireframes are ready, it's time to start creating an actual design.
The purpose of sketching is to get rid of all the rubbish ideas before I start the actual design and to further explore the ideas I could come up with. The main advantage of sketching is that it helps clarify how to envision the rough layout of the future design. It is also a good opportunity to experiment and think unorganized about how design elements can work.
Another essential thing to do before starting the website design work is wireframes. At some point, creating wireframes is an optional but important step as it shows the visual layout without thinking about visual details like typography, colors, etc. Because color mostly evokes different feelings for each person, it is better to try a broader assumption about what a color can mean for Bazis Online's target audience.
It is almost impossible to predict what kind of visual difficulties users may have; we may try to use color effectively but carefully so as not to create additional problems for site visitors. The font in the main sections is Futura, as it is a sans-serif font and is comfortable to read on the web. Besides simply saving free space on the screen, they also provide a better understanding of the interface and help navigation by being a visual submission of an action.
Outcomes (final design)
These processes have given me the opportunity to gain development knowledge as well as to reach the final goal of creating a website from an idea. The images used in the final designs were purchased from an online, royalty-free, international micro-stock photography provider called IStock by Getty images.
Research learning outcome
Feedback from the customer
Due to the huge amount of material, I have attached only the most important designs on the website. Furthermore, the customer emphasized that the new website seems to work well and is easy to use for all target groups. The results show that the website design follows ease of use and a good user experience to lead to success in the future.
