Turn graphic PSD mockup into web
In the creation of the website, the front-end part is first to present in mock-up or prototype, to the client and users, before moving from the PSD graphic mockup to the website.
This makes it possible to validate the need, and to ensure that the website that will be created is the one expected by the users.
We often make a PSD graphic mockup, before transforming it into a website.
UX and UI are the face up and the most important part for the end user. you have to give it time and rigor, and ensure that the transition from the PSD graphic model to the website is done without loss of information.
In this article, the expert from the web agency Wedigitalpro, presents the transformation process of
What are UX and UI?
UX : User experience
UX is the acronym for user experience in English. In French it is the user experience. These are the elements: tools and procedures that make the user journey intuitive and enjoyable.
It is still valid for all user journeys and it does not only concern digital. We can meet her in mass distribution, to imagine a pleasant customer journey in stores and shopping malls.
The user experience is encountered, also in the routes to carry out administrative procedures, or also for the organization of sporting events …
The customer experience studies the sensations and feelings of users, to present a physical or web journey, the most pleasant.
UI : User Interface
UI is the acronym for “User Interface” in English. in French it is « l’interface d’utilisateur « . These are the elements: design, and construction of the user interface.
The user interface is made up of all the graphic elements: the content of the screens, the navigation logic, the animations, the input fields, the buttons, the icons, the messages, the colors, the fonts, etc.
The structuring components of the user interface are organized first into templates, models and themes. They also adapt dynamically according to the profile of the web user, or the device.
The UI can still be presented by a static and dynamic model.
How to make a static web model?
Structuring elements of the identity of the brand or the company are graphic. And they must be reflected in the design of the website.
We can cite the web elements below, and the tools to create them:
- The existing font or create a new one with one of these tools:
- Images can be transformed with the tools below:
How to make a dynamic web model?
With a base of graphic web components, which carries the identity of the brand or the company, we must add a navigation logic consistent with UX / UI.
A dynamic website mockup first illustrates the different customer web journeys. It then makes it possible to define the internal and external mesh.
It is a prerequisite to validate the customer need, and also to allow developers to create a compliant website.
How to transform the PSD mockup into web code?
The model presents the graphic framework of the website. And finally with the model we have the graphic model. This template will be the container for the content to be published and that will be updated regularly.
The graphics model is the stable part, while the content will change depending on the news.
The graphic part to be coded is indeed this model. But you have to understand that the content will be managed by a non-IT user. The publisher of the website content will be an employee of the marketing or communication department.
Transformation of the model into a web by coding
Now that the mockup is validated by the client, it must be transformed into code to create the front-end of the website.
The tools offer easy extraction of CSS code, images, colors, and text from PSD files. It is a raw extract that needs to be refined by specialist front-end web developers. HTML, CSS and javascript.
Transformation of the model into a web automatically
Transforming a graphic model into a web in code is tedious work, and some parts consume time and human resources.
The transformation of a PSD mockup into a web component: page, theme … requires several areas of expertise: HTML, CSS, javascript …
In some cases, it requires the participation of several experts. this adds a significant coordination effort to the work of production.
This manual transformation work can be avoided, at least in part, by automating the transformation from PSD to HTML / CSS.
Ci- dessous quelques exemples de site web qui proposent une transformation automatique gratuitement. Il s’agit duPSD To Web et CSS3Ps
It should also be noted that there are frameworks to facilitate development. Bootstrap is a development environment for CSS, JavaScript and external JavaScript libraries like jQuery or Popper to define components: navigation bars, modal windows …
How to integrate the coded model into the CMS?
CMS is the acronym for Content Management System. In French a content management system. They provide a framework that allows content to be edited and published on the internet.
The most popular CMS are:
WordPress is by far the most widely used CMS. The template or page template is called the Theme in WordPress.
The integration of the PSD model consists of transforming it into
How to turn PSD into a WordPress Theme?
The mockup transform into Html: index.html and into CSS style.css. You just have to transform the index.html file into a .php file which forms the structure of the WordPress Theme.
In several .php files:
- Archive.php
- Header.php
- Footer.php
- Index.php
- Single.php
- Page.php
- Sidebar.php
- Category.php
- Search.php
- 404.php
- Comments.php
- Comments-popup.php
Make sure the coded mockup is responsive?
A Responsive website is a site whose display adapts to the device and the browser.
The display of images, fonts, and menus can be altered from one device (mobile, computer, tablet, console, etc.), or from one browser (Chrome, internet explorer, Firefox, etc.) to another.
In this case the customer experience will be altered, it will certainly be poor.
To do this, you must first provide in the code the elements that allow you to modify the sizes of the graphic components according to the devices and browsers. In some cases also hide part of the content.
How to optimize the performance of a coded model?
Without altering the aesthetics of your website, guarantee a high loading speed. To do this, you must perform the optimizations below:
- Centralizing and reducing javascript / css.
- Reduce loading of images
- Use icon fonts or CSS sprites to have fewer requests.
- Reduce the number of fonts (and charset)
- Work with CSS animations, for the browser to optimize them.
- Load javascript ASYNC
The Wedigitalpro web agency has the experts and the tools to design, create, put into production and supervise the websites of very demanding clients.
Wedigitalpro offers to support you. Contact us to study your needs.