adobe xd
  • Home
  • /
  • Blog
  • /
  • Siti Web
  • /
  • Adobe XD: Come realizzare interfacce di siti web… e non solo!

How To Create Websites.. and Much More!

The design of a user interface is a fundamental activity when aiming at creating a simple, intuitive and attractive website.
For newbies, an interface is a tool allowing two different entities, in this case humans and machines, to interact.
Through commands and indications humans interact with machines in order to make them work accordingly.
An interface can be that of an Internet website, such as the buttons of a TV remote control: without even realising it we get to interact with a lot of interfaces on a daily basis!

Content Index

  • UX vs UI: What Are The Differences?
  • Adobe XD: a Closer Look at this Software
  • Let’s Get Down To Work! How to
  • Design an Interface for the First Time
  • Interface Prototype Design and Its
  • Interaction with Adobe XD
  • Export and Share a Project
  • Adobe XD: Other Functions

UX vs UI: What Are The Differences?

When talking about web design the terms UX and UI are often used, being sometimes confused or wrongly linked to each other, without saying which is which.
The truth? Let’s meet it halfway… They are closely connected but they show some differences anyway.
A common signature between the two is that both aim at making the final users happy.
Let’s take a closer look at them then, describing both in detail.
UX stands for User Experience and refers to all the processes meant to enhance the usability of a specific product or service for final users. Thanks to research, analyses, forms and psychological studies, the final objective is to understand the real needs and the preferences of users.
UI stands for User Interface design instead. It is the graphical core of the UX, i.e. everything about the graphical aspect and the visual elements an interface shows.
Studying colours, fonts, shapes, layouts and how the screen elements are placed, its intention is to create a visual interface that aims at simplifying and clarifying what actions we want users to take.
A banal but effective example comes to the rescue to get the importance of these two following processes fully.
If users visit a website and:

  1. They have problems while surfing
  2. They have no clue about what to do once they are there

There is clearly a problem of usage experience and so a UX or UI designer came up short in his or her work… Quite simple, isn’t it?

Adobe XD: a Closer Look at the Software

Let’s describe now what needs to be done in order to design a true complete interface.
Every time a website development is on the way, before start modifying its code, it is advisable to create a graphical prototype which needs to be as close as possible to the final result wanted, in order to get immediately a clear idea of what final aspect the website interface will look like.
By doing so it is possible to track and evaluate possible critical points or further improvements, without even making later changes, and maybe avoiding the risk that some of them need to be made after the website had already been completed.
So, it is crystal clear that the step called “prototyping” is a remarkable aspect of a website design.
Enough theory, let’s get down to practical steps now!
Adobe XD is undoubtedly one of the most sophisticated prototyping softwares, so popular on the market.
It was designed after the need, by a lot of web designers, to have a light but extremely precise software, able to spark their creativity to the fullest.
Thanks to softwares like Photoshop or Illustrator it is of course possible to “prototype” graphical interfaces, but the procedures end up being more complex and less precise compared to a software designed specifically for this purpose.
Adobe XD itself shows a simple and minimal style at first (referring to UX and UI) with a few elements available and just three main editing areas: Projecting, Prototyping and Sharing.

IMAGE
Adobe XD interface is simple and minimal.

Let’s Get Down To Work! How to Design an Interface for the First Time

Now that our new friend Adobe XD has been properly introduced with all its honors, it is time to explain what are the essential steps to create a good interface.
Ready to set the software in motion? Sadly, bad news is lurking in the shadows… First of all you are forced to grab pen and paper!
The same can be said for the designing of web interfaces!
Have you ever heard of Wireframes?
They are fundamental steps in every User Interface project.
They are practically initial models, rather unrefined from a graphical point of view, aiming at representing the information hierarchy and the page layout, and determining the way users are going to interact with the interface.
Guidelines, polygons, benchmark images, Lorem Ipsum texts and much more!
All these elements are ordered and placed hierarchically in the Wireframe, to get a general preview of how the interface is structured.
If this topic may be of interest to you, you can take a look at the
Guide for Amateurs edited by Envato.

IMAGE
Wireframes help define the ultimate layout of an interface

Once this fundamental preliminary phase is complete, you will be glad to know… that you can eventually officially start working on Adobe XD!
As already mentioned, what makes this software unique are the alignment options linked to guidelines and templates, but there is much more!
By using artboards it is possible to create different sections of our interface.
Let’s start then from the development of the most important section of a website, i.e. the homepage, and then let’s create all the other sections step by step.

IMAGE
Adobe XD Artboards are very similar to those available on Illustrator

Little Off-topic information: always remember that a website, for SEO matters too, needs to have at least one Homepage, one “About Us” page and one “Contacts” page. Feeling interested in the SEO world? Take good advice from our specialist Mirco here.
Such as for the other Adobe softwares, XD makes Artboard preset models available, with specific sizes related to the most common desktop, mobile or tablet devices.
In the artboards graphical elements can be added thanks to basic tools: rectangles, lines, polygons or the very powerful Pen tool.
All these tools are well-known already to those who are accustomed to Photoshop or Illustrator.
One of the main functions Adobe XD is largely used for is that of possibly dragging every kind of image in every shape created, and adapting it according to the size of the form itself.

IMAGE
The image is added to the artboard just by dragging it inside the shape, adapting accordingly.

In order to speed up the graphical layout design process, Adobe XD has the so-called “Repeat Grid”... a true gem in the software!
The Repeat Grid makes it possible for users to make the boring duplication progress of a specific content automatic. For instance, let’s take a product list from an e-commerce website: in this case it is enough to create and place the elements of a product tab, then duplicate them automatically in new tabs, aligning them both horizontally and vertically.
Little trick: if some images are selected and dragged in the repeat grid, they are automatically added in every other duplicated tab, according to the order they were selected.

IMAGE
By using the “Repeat Grid” it is possible to repeat specific elements with no limitations, both horizontally and vertically

Adobe also allows users to create “Components” to make the process of re-using interface elements (for example, buttons) easier.
Once the first button has been designed, you can click on the “Document resources” icon, placed at the bottom of the page, on the left.
Besides saving the settings regarding colours, styles and fonts, a graphical element can be selected too and then, after clicking on the “+” button right next to “Components” a main component can be added.
Then, it will be enough to drag that component in the canva to create an “instance”.

IMAGE
“Components” are very important in terms of saving time and organising a project correctly.

But why is it necessary to add components to my project?
Simple. If a change in the main component is made, all instances (i.e. the duplications of the original elements) will take the same changes, basically erasing the long work of modifying them all each by each.
Adobe XD functions are not over here… there are so many of them, that it would be necessary to write a column about each one.
If you are curious, like me, take a look at
this column about Adobe’s official website.
If you do not have much time do not worry... I am a good guy, so please find here a list of some really interesting functions Adobe allows to activate:

  1. “State” creation for elements: for instance the opportunity to add the “hover” state to buttons, and so change the colours to texts and backgrounds simply by dragging your mouse.
  2. “Content filling”: this function allows users to calculate padding, i.e. internal spacing between a text and a specific button)
  3. “Reactive Resizing”: nowadays it is so important, for a website, to be “responsive”. So Adobe XD has, among its many functions, that of resizing elements and layouts when displayed from a desktop to a mobile device and vice versa
  4. “Plugin Libraries”: if Adobe XD preset functions are not enough, you better know that several other functions can be added by using plugins (WordPress, if you are there, just raise your hand!)
    Download the “Icons 4 Designer” plugin, and get a smorgasbord of icons to use for your projects (there are so many of them, each one much different from the other!)
  5. “Basic Animations”: for example, the opportunity to create image carousels sliding horizontally
  6. And much more…

Interface Prototype Design and Its Interaction with Adobe XD

Once the different pages and sections of a prototype are created, it is time to move on to the funniest, somehow astonishing, step of the whole project design, i.e. interactions!
Through the “Prototype” working space it is possible to link different artboards in order to make your project interactive.
It is enough to select an element in an artboard, like a button, and link it to another artboard simply by a drag-and-drop operation. This explains the long arrows you certainly saw in some web design project…

IMAGE
Interactions show how the final user experience about a specific product could be

It is then possible to define, for every single link, some specific interaction conditions and some kind of animated transition.
For instance, it is possible to transmit specific commands to the software. For example, if users click on a specific button, then they are popped back to a specific page, while a fading or sliding animation is shown.
Find out what kind of interactions can be brought to light by these amazing functions Adobe XD makes available for users! Be curious!

Export and Share a Project

Are you still there? Well, congrats! You have just completed the creation of your first website prototype!
Now, let’s move to the final part, maybe the most important of all parts: saving and sharing your project with your co-workers, web developers or with your customers directly.
Jokes aside, Adobe XD’s third and last editing space comes to the rescue right for this purpose:
“Share”.
Adobe XD makes different sharing options available, for various reasons and needs.
By default, thanks to the “Project review” setting, a link to the prototype is generated, with all the interactions connected to it.
If you prefer to share your project with a programmer instead, all you need to do is to flag the “Developer” mode setting.
By doing so, a link to the final project is generated as well, but some dedicated options are also created for those in need to turn that prototype into something concrete and real: the website itself.
The developer can find the project colour hexadecimal codes, signatures and properties of the fonts used (like categories, sizes, alignment and so on) and generally little HTML and CSS elements.
Select an element and make all the information linked to it appear on the screen.

Adobe XD: Other Functions

We described how it is possible to prototype a website interface using Adobe XD, but it is also important to emphasize that such a tool can be used for completely different purposes too. Please find some examples below:

  • Developing Mobile App Interfaces 
  • Creating prototypes of vocal assistants, thanks to management options and voice recordings
  • Designing of videogames interfaces and opportunities to link a gamepad to map buttons and interact with those
  • Creating graphical layouts for social networks, banners and landing pages

And here we are! It’s almost a wrap… (a pity, we were just getting started...)
Both as far as the design of web interfaces and WordPress websites, and the creation of simple graphical contents, are concerned, Adobe XD is an extremely powerful tool, making it easier everyday, to millions (if not billions) of designers, to work and free their creativity.
If you intend to develop your own website using WordPress, maybe after creating a specific prototype on Adobe XD, my advice is to use
Elementor Pro, the best page builder on the market.

Keep up the good job and, most of all, have fun!

Edoardo









Adobe XD: Come realizzare interfacce di siti web… e non solo!

La progettazione dell’interfaccia utente è un processo fondamentale se si ha intenzione di creare un sito web semplice, intuitivo e accattivante.

Per i non addetti ai lavori, si definisce interfaccia quel dispositivo che permette la comunicazione tra due entità distinte, nel nostro caso uomo e macchina.

Attraverso una serie di comandi e indicazioni, l’uomo interagisce con la macchina per farle compiere determinate azioni.

Un’interfaccia, quindi, può essere quella di un sito internet, così come i bottoni di un telecomando della TV: senza rendercene conto, ogni giorno abbiamo a che fare con tantissime interfacce!

 

 


UX vs UI: facciamo chiarezza

Nell’ambito del Web Design si sente parlare spesso di UX e UI, due terminologie che alle volte vengono confuse o addirittura associate allo stesso significato.

La verità sta nel mezzo: sono strettamente correlate, ma comunque diverse.

Ciò che le accomuna entrambe è la soddisfazione dell’utente finale, ovvero colui che effettivamente fruirà del prodotto/servizio finale.

Entriamo comunque nel dettaglio e cerchiamo di dare delle definizioni alle due terminologie.

La UX, detta anche User Experience, riguarda tutti quei processi volti a migliorare l’usabilità di un determinato prodotto o servizio da parte dell’utente finale. Mediante ricerche, analisi, questionari e studi psicologici, si cerca di trovare il miglior modo per soddisfare le sue esigenze, i suoi gusti e i suoi bisogni.

L’UI design, acronimo di User Interface design, rappresenta il “cuore” grafico della UX, ovvero tutto ciò che riguarda l’aspetto grafico e gli elementi visuali di un’interfaccia. Tramite uno studio dei colori, dei font, delle forme, del layout e della disposizione degli elementi che compariranno a schermo, si cerca di realizzare un’interfaccia visiva che semplifichi e renda chiaro cosa si vuole far compiere all’utente.

Per capire veramente l’importanza di questi due processi, basta un esempio banale ma efficace.

Se un utente accede a un sito internet e:

  1. ha difficoltà a navigare;
  2. non riesce a capire effettivamente cosa deve fare.

Evidentemente c’è un problema di esperienza di utilizzo, per cui ci sarà stato un UX o un UI designer che non avrà fatto bene il suo lavoro.

Semplice no?

 

Adobe XD: entriamo nel dettaglio del software

Data la premessa, parliamo ora del modo attraverso il quale è possibile progettare una vera e propria interfaccia.

Quando si vuole sviluppare un qualunque sito web, ancor prima di mettere mano al codice, è consigliabile creare un prototipo grafico che si avvicini il più possibile al risultato desiderato, in maniera tale da avere già dall’inizio un’idea chiara di quello che sarà più o meno l’aspetto finale dell’interfaccia del sito.

In questo modo, è possibile sin da subito valutare eventuali criticità o ulteriori miglioramenti, senza dover necessariamente intervenire a posteriori, magari quando il sito è già stato completato.

Vien da sé che allora la fase che da ora in avanti chiameremo di “prototipazione” è un aspetto imprescindibile del design.

Ma basta con la teoria, passiamo ora alla pratica!

Uno degli strumenti di prototipazione di interfacce più sofisticati e utilizzati sul mercato è Adobe XD.

Tale prodotto nasce dall’esigenza di molti web designer di avere a disposizione un software leggero ed estremamente preciso per poter dar sfogo alle proprie idee creative.

Mediante Photoshop o Illustrator è sì possibile “prototipare” delle interfacce grafiche, ma sicuramente tale processo risulterà più macchinoso e meno preciso rispetto a un software nato esclusivamente per questo scopo.

Lo stesso Adobe XD, alla prima apertura, si presenta con uno stile semplice e minimale (rimanendo in tema di UX e UI), con pochi ma sufficienti strumenti a disposizione e tre aree di lavoro principali: Progettazione, Prototipo e Condividi.

L’interfaccia di Adobe XD è semplice e minimale

 

Al via con i lavori! Progettiamo la nostra prima interfaccia.

Ora che abbiamo fatto le dovute presentazioni al nostro caro amico Adobe XD, è arrivato il momento di spiegarti quali sono i passaggi essenziali per la realizzazione di una buona interfaccia.

Pronto ad aprire il software? Ho una brutta notizia per te… Per il momento ti toccherà prendere carta e penna!

Chi è nel mondo del design saprà benissimo che prima di realizzare un qualsiasi progetto grafico è fortemente raccomandato abbozzare le prime idee su un foglio di carta bianco.

Stessa cosa vale per la progettazione di interfacce web!

Conosci già i Wireframe?

Essi sono uno step imprescindibile in qualsiasi progetto di User Interface.

In pratica, sono dei modelli iniziali, piuttosto grezzi a livello grafico, che servono a rappresentare la gerarchia di informazioni e il layout delle pagine, e che determinano già in prima battuta il modo in cui l’utente interagirà con l’interfaccia.

Linee guida, poligoni, immagini segnaposto, testi Lorem Ipsum, pulsanti, e chi più ne ha più ne metta!

Tutti questi elementi vengono ordinati e disposti gerarchicamente all’interno del Wireframe per avere un’idea preliminare di come sarà strutturata l’interfaccia.

Se sei interessato ad approfondire questo argomento, ti consiglio questa guida per principianti messa a disposizione da Envato.

I Wireframe aiutano a definire, sin dall’inizio, la struttura che dovrà avere l’interfaccia

Una volta conclusa questa fondamentale fase preliminare, sarai felice di sapere che potrai finalmente aprire Adobe XD!

Come già anticipato, ciò che rende unico tale software sono le opzioni di allineamento relative alle griglie e linee guida, ma non solo!

Attraverso l’utilizzo delle Tavole da Disegno, è possibile creare le diverse sezioni della nostra interfaccia.

Partiremo dunque dallo sviluppo della sezione più importante di un sito internet, ovvero la Homepage, per poi creare a poco a poco tutte le altre sezioni del sito.

Le Tavole di Disegno di Adobe XD sono molto simili a quelle di Illustrator

Piccolo Off-topic: ricorda sempre che un sito internet, anche per questioni di SEO, deve avere almeno una Homepage, una pagina Chi Siamo e una pagina Contatti. Se vuoi approfondire l’argomento SEO, ti consiglio vivamente di dare retta ai consigli del nostro specialista Mirco.

Così come per gli altri software di Adobe, XD mette a disposizione dei modelli preimpostati di Tavole da disegno, con dimensioni specifiche relative ai più comuni dispositivi desktop, mobile o tablet.

All’interno delle tavole da disegno, possiamo inserire elementi grafici grazie agli strumenti di base: rettangolo, linea, poligono o addirittura il potentissimo strumento Penna.

Tutti strumenti già visti per chi conosce Photoshop o Illustrator.

Una delle prime funzionalità che però contraddistinguono Adobe XD è quella di poter trascinare all’interno di qualsiasi forma creata una qualsiasi immagine, in maniera tale da adattarla alle proporzioni della forma stessa.

Tramite un semplice trascinamento, l’immagine viene inserita all’interno della Tavola, adattandosi alle dimensioni della forma che la contiene

E ti dirò di più: per velocizzare il processo di progettazione del layout grafico, Adobe XD mette a disposizione la c.d. “Griglia di ripetizione”, pura magia!

Tale funzione consente di automatizzare il noioso processo di duplicazione di un determinato contenuto. Pensiamo a un elenco di prodotti di un e-commerce: attraverso tale funzionalità basta creare e disporre gli elementi di una scheda prodotto, per poi duplicarli automaticamente in nuove schede orizzontalmente e verticalmente allineate.

Piccolo trick: se selezioni una serie di immagini e le trascini all’interno della griglia di ripetizione, queste verranno inserite in ordine di selezione all’interno di tutte le altre schede duplicate con tale funzionalità.

Con la “Griglia di ripetizione” è possibile ripetere determinati elementi all’infinito, sia in verticale sia in orizzontale

Ulteriore funzionalità messa a disposizione da Adobe XD è quella di poter creare le “Componenti” per semplificare quel processo di riutilizzo di elementi che solitamente vengono ripetuti in un’interfaccia, come per esempio i pulsanti.

Una volta progettato il tuo primo pulsante, in basso a sinistra puoi notare l’icona “Risorse Documento”. Oltre a poter salvare colori e stili caratteri, puoi anche selezionare un elemento grafico e cliccare sul tasto “+” accanto a Componenti per aggiungere una Componente principale.

Fatto questo, basterà trascinare tale componente all’interno della tavola per dar vita a una “istanza”.

Le “Componenti” sono importantissime in termini di risparmio di tempo e corretta organizzazione del progetto

Ma perché devo aggiungere Componenti al mio progetto?

Semplice: se si effettua una modifica alla componente principale, tutte le istanze (ovvero i duplicati dell’originale) subiranno le stesse modifiche, eliminando di fatto tutto quel lavoro in più che implicherebbe modificarle tutte singolarmente.

Le funzionalità di Adobe XD non finiscono qui, anzi… sono talmente tante che sarebbe necessario creare degli articoli ad hoc per ognuna di esse.

Se sei curioso come me, ti invito a visitare questo articolo ufficiale direttamente dal sito ufficiale di Adobe .

Siccome sono buono, ti lascio comunque una breve lista di altre funzionalità davvero interessanti:

  1. Creazione di “stati” per gli elementi: per esempio, la possibilità di aggiungere lo stato “hover” ai pulsanti, e quindi cambiare il colore del testo e dello sfondo al passaggio del mouse;
  2. Riempimento del contenuto”: questa funzione permette di calcolare il padding, ovvero la spaziatura interna, tra il contenuto di un gruppo e i limiti esterni (per esempio, la spaziatura tra testo e pulsante);
  3. Ridimensionamento reattivo”: data l’importanza odierna attribuita ai siti web “responsive”, Adobe XD mette a disposizione una funzionalità che consente di ridimensionare gli elementi e il layout passando da dispositivi desktop a mobile, e viceversa;
  4. Librerie di plugin: se le funzionalità predefinite di Adobe XD non ti bastano, sappi che puoi aggiungerne di nuove tramite i Plugin (WordPress, sei tu?).
    Ti consiglio di scaricare il plugin “Icons 4 Designer”, che aggiunge una vastissima libreria di icone in formato vettoriale da utilizzare per i propri progetti (ce ne sono di tutti i gusti… più uno!);
  5. Animazioni base: per esempio, la possibilità di creare caroselli di immagini con scorrimento orizzontale;
  6. E tanti altri…

 

Come “prototipare” un’interfaccia e renderla interattiva con Adobe XD

Una volta create le diverse pagine e sezioni del tuo prototipo, passiamo ora alla fase più divertente e a tratti sbalorditiva della progettazione, ovvero le interazioni!

Tramite l’area di lavoro “Prototipo” è possibile collegare le diverse tavole da disegno per rendere il tuo progetto interattivo.

Basterà selezionare un elemento all’interno di una Tavola da Disegno, come un pulsante, e collegarlo a un’altra tavola da disegno tramite un semplice trascinamento e click con il mouse. Ecco svelato a cosa servono tutte quelle lunghissime frecce che sicuramente avrai visto in qualche progetto di web design.

Le interazioni danno l’idea di come potrebbe essere l’esperienza d’uso finale del prodotto

È inoltre possibile attribuire, per ogni singolo collegamento, delle condizioni di interazione e una tipologia di transizione animata.

Per esempio, possiamo dire al software che se si clicca su quel pulsante si verrà rimandati a una pagina specifica, il tutto attraverso un’animazione in dissolvenza, o per scorrimento.

Ti lascio scoprire da solo quali sono le interazioni che è possibile realizzare attraverso questa straordinaria funzionalità che Adobe XD ci mette a disposizione.

 

Esportazione e Condivisione dei progetti

Se sei arrivato fin qui ti faccio i miei complimenti! Hai appena realizzato il tuo primo prototipo di sito web!

Ora non ti resta che fare una cosa, forse la più importante: salvare e condividere il progetto con i tuoi collaboratori, sviluppatori web oppure direttamente con il tuo meraviglioso e simpaticissimo cliente.

Scherzi a parte, per fare ciò, ci viene in aiuto la terza e ultima area di lavoro del software: “Condividi”.

Adobe XD ci mette a disposizione diverse opzioni di condivisione per le più disparate esigenze.

Di default, con l’impostazione “Revisione progettazione”, verrà generato un link che reindirizzerà al prototipo, con tutte le interazioni a esso associate.

Se vuoi invece condividere il progetto con un programmatore, ti basterà selezionare come impostazione la modalità “Sviluppatore”.

In questo modo, verrà sì generato un link che rimanda al progetto finale, ma saranno anche disponibili delle opzioni dedicate per chi ha necessità di trasformare quel prototipo in qualcosa di concreto, ovvero il sito vero e proprio.

Lo sviluppatore, in questo modo, potrà risalire ai codici esadecimali dei colori del progetto, alle caratteristiche dei font utilizzati (come la famiglia, le dimensioni, l’allineamento e così via) e in generale a piccoli elementi di HTML e CSS.

Basterà selezionare un elemento per far comparire a schermo tutte le informazioni associate a esso.

 

Adobe XD: altre applicazioni

Finora abbiamo parlato di come è possibile prototipare un’interfaccia di un sito internet con Adobe XD, ma è importante sottolineare che tale strumento può essere utilizzato anche per scopi completamente diversi. Ecco alcuni esempi:

  • Sviluppo di interfacce di Applicazioni per Mobile;
  • Creazione di prototipi di assistenti vocali, grazie a opzioni di gestione e registrazione della voce;
  • Progettazione di interfacce di giochi e possibilità di collegare un gamepad per mappare i tasti e interagire con esse;
  • Creazione di layout per grafiche social, banner e landing pages.

Ebbene sì… Siamo arrivati alla conclusione di questo articolo (peccato… mi eri già simpatico).

Sia che si tratti di progettazione di interfacce per il web, sia che si tratti di creazione di semplici grafiche, Adobe XD è uno strumento estremamente potente, che ogni giorno semplifica la vita a milioni (se non miliardi) di designer.

Se hai intenzione di sviluppare il tuo sito web in WordPress, magari dopo aver creato il tuo prototipo su Adobe XD, ti consiglio di utilizzare Elementor Pro, il migliore page builder sul mercato.

Buon lavoro e soprattutto buon divertimento!

Edoardo

How To Create Websites.. and Much More!

The design of a user interface is a fundamental activity when aiming at creating a simple, intuitive and attractive website.
For newbies, an interface is a tool allowing two different entities, in this case humans and machines, to interact.
Through commands and indications humans interact with machines in order to make them work accordingly.
An interface can be that of an Internet website, such as the buttons of a TV remote control: without even realising it we get to interact with a lot of interfaces on a daily basis!

Content Index

  • UX vs UI: What Are The Differences?
  • Adobe XD: a Closer Look at this Software
  • Let’s Get Down To Work! How to
  • Design an Interface for the First Time
  • Interface Prototype Design and Its
  • Interaction with Adobe XD
  • Export and Share a Project
  • Adobe XD: Other Functions

UX vs UI: What Are The Differences?

When talking about web design the terms UX and UI are often used, being sometimes confused or wrongly linked to each other, without saying which is which.
The truth? Let’s meet it halfway… They are closely connected but they show some differences anyway.
A common signature between the two is that both aim at making the final users happy.
Let’s take a closer look at them then, describing both in detail.
UX stands for User Experience and refers to all the processes meant to enhance the usability of a specific product or service for final users. Thanks to research, analyses, forms and psychological studies, the final objective is to understand the real needs and the preferences of users.
UI stands for User Interface design instead. It is the graphical core of the UX, i.e. everything about the graphical aspect and the visual elements an interface shows.
Studying colours, fonts, shapes, layouts and how the screen elements are placed, its intention is to create a visual interface that aims at simplifying and clarifying what actions we want users to take.
A banal but effective example comes to the rescue to get the importance of these two following processes fully.
If users visit a website and:

  1. They have problems while surfing
  2. They have no clue about what to do once they are there

There is clearly a problem of usage experience and so a UX or UI designer came up short in his or her work… Quite simple, isn’t it?

Adobe XD: a Closer Look at the Software

Let’s describe now what needs to be done in order to design a true complete interface.
Every time a website development is on the way, before start modifying its code, it is advisable to create a graphical prototype which needs to be as close as possible to the final result wanted, in order to get immediately a clear idea of what final aspect the website interface will look like.
By doing so it is possible to track and evaluate possible critical points or further improvements, without even making later changes, and maybe avoiding the risk that some of them need to be made after the website had already been completed.
So, it is crystal clear that the step called “prototyping” is a remarkable aspect of a website design.
Enough theory, let’s get down to practical steps now!
Adobe XD is undoubtedly one of the most sophisticated prototyping softwares, so popular on the market.
It was designed after the need, by a lot of web designers, to have a light but extremely precise software, able to spark their creativity to the fullest.
Thanks to softwares like Photoshop or Illustrator it is of course possible to “prototype” graphical interfaces, but the procedures end up being more complex and less precise compared to a software designed specifically for this purpose.
Adobe XD itself shows a simple and minimal style at first (referring to UX and UI) with a few elements available and just three main editing areas: Projecting, Prototyping and Sharing.

IMAGE
Adobe XD interface is simple and minimal.

Let’s Get Down To Work! How to Design an Interface for the First Time

Now that our new friend Adobe XD has been properly introduced with all its honors, it is time to explain what are the essential steps to create a good interface.
Ready to set the software in motion? Sadly, bad news is lurking in the shadows… First of all you are forced to grab pen and paper!
The same can be said for the designing of web interfaces!
Have you ever heard of Wireframes?
They are fundamental steps in every User Interface project.
They are practically initial models, rather unrefined from a graphical point of view, aiming at representing the information hierarchy and the page layout, and determining the way users are going to interact with the interface.
Guidelines, polygons, benchmark images, Lorem Ipsum texts and much more!
All these elements are ordered and placed hierarchically in the Wireframe, to get a general preview of how the interface is structured.
If this topic may be of interest to you, you can take a look at the 
Guide for Amateurs edited by Envato.

IMAGE
Wireframes help define the ultimate layout of an interface

Once this fundamental preliminary phase is complete, you will be glad to know… that you can eventually officially start working on Adobe XD!
As already mentioned, what makes this software unique are the alignment options linked to guidelines and templates, but there is much more!
By using artboards it is possible to create different sections of our interface.
Let’s start then from the development of the most important section of a website, i.e. the homepage, and then let’s create all the other sections step by step.

IMAGE
Adobe XD Artboards are very similar to those available on Illustrator

Little Off-topic information: always remember that a website, for SEO matters too, needs to have at least one Homepage, one “About Us” page and one “Contacts” page. Feeling interested in the SEO world? Take good advice from our specialist Mirco here.
Such as for the other Adobe softwares, XD makes Artboard preset models available, with specific sizes related to the most common desktop, mobile or tablet devices.
In the artboards graphical elements can be added thanks to basic tools: rectangles, lines, polygons or the very powerful Pen tool.
All these tools are well-known already to those who are accustomed to Photoshop or Illustrator.
One of the main functions Adobe XD is largely used for is that of possibly dragging every kind of image in every shape created, and adapting it according to the size of the form itself.

IMAGE
The image is added to the artboard just by dragging it inside the shape, adapting accordingly.

In order to speed up the graphical layout design process, Adobe XD has the so-called “Repeat Grid”... a true gem in the software!
The Repeat Grid makes it possible for users to make the boring duplication progress of a specific content automatic. For instance, let’s take a product list from an e-commerce website: in this case it is enough to create and place the elements of a product tab, then duplicate them automatically in new tabs, aligning them both horizontally and vertically.
Little trick: if some images are selected and dragged in the repeat grid, they are automatically added in every other duplicated tab, according to the order they were selected.

IMAGE
By using the “Repeat Grid” it is possible to repeat specific elements with no limitations, both horizontally and vertically

Adobe also allows users to create “Components” to make the process of re-using interface elements (for example, buttons) easier.
Once the first button has been designed, you can click on the “Document resources” icon, placed at the bottom of the page, on the left.
Besides saving the settings regarding colours, styles and fonts, a graphical element can be selected too and then, after clicking on the “+” button right next to “Components” a main component can be added.
Then, it will be enough to drag that component in the canva to create an “instance”.

IMAGE
“Components” are very important in terms of saving time and organising a project correctly.

But why is it necessary to add components to my project?
Simple. If a change in the main component is made, all instances (i.e. the duplications of the original elements) will take the same changes, basically erasing the long work of modifying them all each by each.
Adobe XD functions are not over here… there are so many of them, that it would be necessary to write a column about each one.
If you are curious, like me, take a look at 
this column about Adobe’s official website.
If you do not have much time do not worry... I am a good guy, so please find here a list of some really interesting functions Adobe allows to activate:

  1. “State” creation for elements: for instance the opportunity to add the “hover” state to buttons, and so change the colours to texts and backgrounds simply by dragging your mouse.
  2. “Content filling”: this function allows users to calculate padding, i.e. internal spacing between a text and a specific button)
  3. “Reactive Resizing”: nowadays it is so important, for a website, to be “responsive”. So Adobe XD has, among its many functions, that of resizing elements and layouts when displayed from a desktop to a mobile device and vice versa
  4. “Plugin Libraries”: if Adobe XD preset functions are not enough, you better know that several other functions can be added by using plugins (WordPress, if you are there, just raise your hand!)
    Download the “Icons 4 Designer” plugin, and get a smorgasbord of icons to use for your projects (there are so many of them, each one much different from the other!)
  5. “Basic Animations”: for example, the opportunity to create image carousels sliding horizontally
  6. And much more…

Interface Prototype Design and Its Interaction with Adobe XD

Once the different pages and sections of a prototype are created, it is time to move on to the funniest, somehow astonishing, step of the whole project design, i.e. interactions!
Through the “Prototype” working space it is possible to link different artboards in order to make your project interactive.
It is enough to select an element in an artboard, like a button, and link it to another artboard simply by a drag-and-drop operation. This explains the long arrows you certainly saw in some web design project…

IMAGE
Interactions show how the final user experience about a specific product could be

It is then possible to define, for every single link, some specific interaction conditions and some kind of animated transition.
For instance, it is possible to transmit specific commands to the software. For example, if users click on a specific button, then they are popped back to a specific page, while a fading or sliding animation is shown.
Find out what kind of interactions can be brought to light by these amazing functions Adobe XD makes available for users! Be curious!

Export and Share a Project

Are you still there? Well, congrats! You have just completed the creation of your first website prototype!
Now, let’s move to the final part, maybe the most important of all parts: saving and sharing your project with your co-workers, web developers or with your customers directly.
Jokes aside, Adobe XD’s third and last editing space comes to the rescue right for this purpose:
“Share”.
Adobe XD makes different sharing options available, for various reasons and needs.
By default, thanks to the “Project review” setting, a link to the prototype is generated, with all the interactions connected to it.
If you prefer to share your project with a programmer instead, all you need to do is to flag the “Developer” mode setting.
By doing so, a link to the final project is generated as well, but some dedicated options are also created for those in need to turn that prototype into something concrete and real: the website itself.
The developer can find the project colour hexadecimal codes, signatures and properties of the fonts used (like categories, sizes, alignment and so on) and generally little HTML and CSS elements.
Select an element and make all the information linked to it appear on the screen.

Adobe XD: Other Functions

We described how it is possible to prototype a website interface using Adobe XD, but it is also important to emphasize that such a tool can be used for completely different purposes too. Please find some examples below:

  • Developing Mobile App Interfaces 
  • Creating prototypes of vocal assistants, thanks to management options and voice recordings
  • Designing of videogames interfaces and opportunities to link a gamepad to map buttons and interact with those
  • Creating graphical layouts for social networks, banners and landing pages

And here we are! It’s almost a wrap… (a pity, we were just getting started...)
Both as far as the design of web interfaces and WordPress websites, and the creation of simple graphical contents, are concerned, Adobe XD is an extremely powerful tool, making it easier everyday, to millions (if not billions) of designers, to work and free their creativity.
If you intend to develop your own website using WordPress, maybe after creating a specific prototype on Adobe XD, my advice is to use 
Elementor Pro, the best page builder on the market.

Keep up the good job and, most of all, have fun!

Edoardo

Articoli Collegati

tema child wordpress

Anche i Temi hanno una famiglia. Tema Child: cos’è e come si crea

Leggi