The company involved in this project is a start-up IT consulting company that did not have a website at the beginning of this project, making it a perfect partner for this research. During the project, the design and implementation were planned in cooperation with the client, combining the research results with the company's requirements. When the project started, the company did not have a website and needed a well-structured, visually impressive and trendy site.
In order for the company to acquire customers and achieve a stable position in the market, it requires a modern website that enables customers to build trust in the company. The work page displays the company's past work as a portfolio, to show their creations to customers. The contact page had more specific requirements for its content, as the company had a clear specification of how the contact page should be structured.
The page had to have a contact person that would allow the customer to easily contact the company and inquire about services.
Benchmarking
Assistance in finding the conceivable target efficiency levels of the organization and narrowing down the haphazard targets. In one-to-one benchmarking, the organization first learns the identity of the most efficient organizations in the area they want to improve on (the target participant is rarely the best in the industry; the only requirement is that the target participant is significantly better ), the initiating organization compares the working methods and efficiency of a wide range of organizations. When the target has been found, only the terms of the opportunity need to be agreed and the visit planned.
In the first step of the one-to-one benchmarking, the organization must define the purpose of the study. This phase is important because the likely goal of the study is to bring the initiator to the same level of viability as the target. In the third phase, it is time to determine what information is required from the target.
The initiator is then in contact with the target organization, who agree on the terms of the study.
Usability Testing
The consultant provides an independent report of the visit and ensures an efficient visit. Usability testing is often part of an effort to increase profitability of products, but it also benefits users as the results represent the user's experiences of the product. It consists of back-end and front-end components, which as a whole create the look and functionality of the website.
-backend development is the process of creating the client-side view of the website, while backend development focuses more on the functional side of the site. -Recent development includes visual aspects of the site such as layout, fonts, colors, images and navigation. -recent development focuses on site functionality that is not visible to the regular user.
Parts of the website, such as the database and the execution of logical statements, are usually background operations that are not visible to the end user.
History of web design
Development of web design trends
The first pages did not emphasize usability, instead the focus at the time was on creating menu bars and links that helped the user navigate the site. These large graphics will contain commands such as "click here" or "learn more" to ensure that the user finds their way around the site with ease. Skeuomorphism is a design style that incorporates the visual characteristics of objects into digital design.
This style of design emphasizes the sense of familiarity by using functional aspects and qualities of objects to create designs. This style shifts to a more minimalist style, removing all the unnecessary elements that do not serve a significant purpose on the website. This allows the user to focus on the content without experiencing distraction from flashing graphics.
A simplistic design allows for faster loading times as the site is lighter and requires less complicated coding.
Tools
HTML5
Bright colors, sharp edges and 2D elements are an important part of the visual appearance of modern sites. The new features allow for a simpler approach to multiple functionalities that used to require the use of plugins in the past. HTML5 also enables the use of new form elements such as calendar, date, time, email, and search.
A key feature added is 2D/3D transformations, expanding its reach to game development. When it comes to multimedia on websites, Flash has been an important tool in playing multimedia content because there was no standard way to play it. With the new features of HTML5, it is possible to play multimedia without using plugins such as Flash.
HTML5 has standardized the way to embed audio and video files by creating specific tags for them. Audio assets are defined as
CSS3
Adobe Creative Cloud
Muse allows the user to add all the basic elements of the site through the options provided. It has a multitude of options in the form of web safe fonts and widget library and other tools. The application has hundreds of pre-installed web-safe fonts that the user can select as the typography of the designed site.
The widget library on the other hand provides all the interactive elements that can be added to the design, such as forms, slideshows, maps, etc. Elements added from the widget library can be customized to match the overall design of the site. changing colors and other attributes. The process of designing and creating a website is a phased but iterative and complex process that involves parallel tasks that are related to each other.
User interface design
- Requirement analysis
- Functional design
- Visual design
- Creating content
To create a successful product, it is important to be aware of the user's goals, tasks, constraints, motives and environments. The third stage of the needs assessment is to analyze and summarize the results of the user survey in order to draw conclusions about the findings of the survey conducted. From this information, the structure of the site can be determined and a wireframe model can be built.
Usage scenarios are used in the design of the information architecture and individual processes in the service. When rebuilding an old service, it is important to draw attention to the shortcomings of the scenarios. Before creating individual pages, it is important to plan the overall structure of the website.
The information architecture of the system should complement the process of performing these tasks. Once the structure of the site is created, the next step is to create a wireframe of the site. The appearance of the website should make it easier for the user to find information and perform tasks.
The second job is to convey a certain message through the overall look of the site. Colors are an essential feature of a layout as they define the overall look of the site. They help the user to draw their attention to certain parts of the site and can therefore be used as a pointer to draw attention to desired parts.
Content is designed during the process and added at the last stage of the design process. The content used on the website determines the structure of the layout, as the content must fit the website in the desired way.
Implementation/ Development
Creating content is a process that goes along with the other aspects of the website creation process. Content creation should start in an early phase of the project, as content is the most important part of the final product and should therefore be ready for use at launch.
Testing and deployment
For the correct selection of these factors, it is important to be aware of the user's way of working. All aspects of a website's visual presentation are attributes that contribute to the user's immediate response and thus to the first impression of the website. When designing usability, it is important to understand the importance of the multitude of devices used to browse the site.
Benchmarking research was conducted on six websites of different companies operating in the same industry as Collins O. The companies were selected based on their current financial status, as the goal was to find trends among successful companies in a specific field. The companies were selected from lists of the most successful advertising agencies from two different magazines. Planning began with the compilation of research and requirements, so that we have a clear understanding of the required attributes.
The navigation is locked at the top of the page, meaning it is constantly visible while scrolling through the page. The navigation consists of the necessary links and is placed at the top of the page. The slideshow rotates three images, which are represented by the three round buttons at the bottom of the slider.
The About page's structure shows the description of the company on the left, and the right side is filled with an image of employees. The contact information is displayed on the left side of the page which contains the address, phone number, email and website address. The contact form is displayed on the right side of the page and contains three types of boxes – name, email and message.
The implementation of the website began with the selection of appropriate tools for creating the page. There's a contact form at the bottom of the site that you can bring to life with an easy Adobe Business Catalyst integration. The creation of the website was planned and started based on the results of the research, which made the planning and development process easy and seamless.
The implementation of the website was carried out using modern web design technologies, such as HTML5 and CSS3.