The request
When we have a workshop, we need to understand correctly the request. It's essential for the rest of the process.
Ideas search
Once assimilated the subject, we can then begin to look for ideas. In group or alone, we brainstorm to note all the ideas that come to mind. Some of these ideas are exploited and deepened to define together the final concept.
UX design
The User eXperience design consist of thinking and creating a user-friendly interface to be the user experience the better. Because it's not enough to have a beautiful interface if it's not usable.
Information Architecture
Then, we will create the Information Architecture. It's a crucial step as soon as there is more than one page in the website. This step allows to define each page of the website with all the information that must be there.
The content
Thanks to Information Architecture, we can create the content of the site. This part takes time, but it is very important and delicate. It’s necessary create all the content without any spelling or syntax mistake. Content must also match the concept of the site.
Wireframes
Once the content of the site is finished, we can finally begin the serious tasks. By helping us with information architecture, we can begin to create our wireframes for desktop and mobile.
But what is a wireframe?
A wireframe is a simplified sketch of the site. Without any graphic style, it is used to define the areas and components that the page should contain.
User testing
So, when we have our prototype, we must have it tested by potential users.
How happen a user test?
We ask the user to do an action on the site and ask him to say out loud what he is doing, and we stay at the side of user to take notes.
At the end of the test, we can see if there are any problems or not during the user testing. Thereafter, we can solve them to improve the user experience.
UI design
The User Interface design focuses on the layout, graphic identity of the interface with all data collected during the previous steps of the UX design.
For simplicity, we can compare the UX design to the ingredients of a recipe and the UI design to the finished recipe.
Graphic Identity
The first step will be to look for a graphic identity for our website. I like to write on a paper keywords that will represent my site.
From that moment, I will look for inspiration on websites such as Pinterest or Dribbble by entering my keywords in the search bar.
Generally, I create a pinterest board where I store all my inspirations and ideas.
Typography web
Before we start designing, we search the fonts that will be used for the site. We can find them on websites such as Google Fonts which is free or Adobe Fonts if we have the Adobe license.
This is a very important choice because the fonts bring a real identity to the project.
Visual design
Now that we have all the keys in our hands, we can begin visual design. This is the research phase, I create with Adobe Xd a lot of iterations before reaching the final result.
It’s also at this step that I create all the images, illustrations, logo and icons that I need.
It's important to create the design for desktop but also for mobile !
Web integration
Once the design of the website is complete, thanks to all the information (colors, fonts, sizes and text styles, margins, images, etc.), we can start the last step, the code.
This step is essential because a web page cannot be online as a real site if it is not coded.
The Web development can be divided into two parts, the development front-end and back-end.
Front-end vs Back-end developer
Simply, front-end development is the tip of the iceberg, the style of the interface, what we see. The front-end developer uses programming languages such as the HTML, CSS and JavaScript.
And the back-end development is the hidden part of the iceberg, the invisible part of website. The back-end developer uses databases and programming languages such as the PHP, MYSQL.
Front-end development
But during my second year in school, we learn the programming language of front-end development. So, for my websites I coded only in HTML, CSS and JS.
HTML
HTML means HyperText Markup Language. Is used to semantically and logically structure the content of the page with tags.
Some examples
CSS
CSS means Cascading Style Sheets. Is used to give a style to the website. It's with CSS that I can define the colors, the fonts, the margins, the whole style. An example:
I add a class that I call “title” on my title in the HTML.
And I define his style in CSS.
JavaScript
Is used to create interactions with the interface. For example: When I click on the menu burger (☰), the navigation is displayed, and the button becomes a cross. When I click on the cross, the navigation is hide, and the button becomes lateral bars (☰).
Demo
Upload
When the site is coded, I put it online. To put a website online, you must buy a domain name. This is the URL of the site. Mine is alinegillard.be.
Then, I sign in to a software like FileZilla with my identifiers. And finally, I drag and drop my files on my server and it's over, my site is online !
Conclusion
To conclude, I would say that people who are not in the field do not realize the work that is behind a website but creating a website requires a lot of work.