In order to build a website with a great UI/UX, every company should take into consideration a lot of factors. You must make the users feel at home and extend their reach from the first interaction with your website. Therefore, the essence of an excellent UI design is to help users complete a given task as simple and time-efficient as possible. Even if the approach for making this is different depending on many factors, an attractive interface and impressive images are elements with a great importance. But the core part of making a great UI design is to deliver the users an intuitive and smooth experience.

Many people that get started in the business keep looking for the best user interface websites, in order to see how different features have worked for other companies with different preferences and requirements.

For a good starting point for evaluating if a UI design is efficient, the research company Nielsen Norman Group defines usability through these 5 characteristics:

• Learnability:Can the user complete their tasks with little or without any difficulty?
• Efficiency:Does the interface allow the user to complete tasks in a timely manner?
• Memorability:After leaving a website, how likely will the user be able to remember how to use it the next time they visit?
• Errors:What steps does the interface take to lessen the chance of user error, and how do they let the users correct an error?
• Satisfaction: Does the user enjoy interacting with the design?

On top of those standards, a good UI should also reflect the personality of the brand in order to stand out from the competition and provide users with a delightful experience.

From this point of view, the following characteristics should be taken into consideration:

• Stunning and unique layout: Even for visitors who fail to stay, a great layout can make your website unforgettable. They might return because your products are laid out with creativity rather than being displayed in the old-fashioned grids.
• High-quality images: photos are the most eye-catching features that visitors see from the first glance on your website. Remarkable sites compete to cover their high-resolution image pages to expose their products from any possible angles.
• Thought-provoking slogans: Clever content providers and UI designers create and put thought-provoking slogans everywhere on their homepages from sliders, headers to landing pages and pop-up forms. Once one of the slogans hits the visitor’s eye, you have very big chances to get a new order or a new subscriber, and so on.
• Straightforward navigation: This idea is easily understandable. Nowadays, everyone is in a hurry. If your users can’t find soon what they want, for sure you will lose them very quickly.
• Rapid prototyping: if you take a closer look at most websites with a gorgeous UI design, you’ll find that rapid prototyping tools were adopted by most of them. This approach lays a solid basis for a fast iterative development in the next stages of the websites building.

Based on all these characteristics, we have looked around on the Internet and put together a list of five websites that have gotten great UI designs and deliver a delightful experience to their visitors:

1. Airbnb

The UI of Airbnb does three things very well: booking a place to stay, sharing different places, experiences and destinations and creating trust between two complete strangers. Airbnb has prioritized making it easy to start booking a stay right from the home page.

The conversational invitation for searching is a delightful way of portraying the voice of the brand, as well as making the process of finding a place to stay simple. The only fields you need to fill during the initial search are: choosing a destination where you would like to go, along with the duration of your staying and the number of guests. By leaving out the additional filters until the next step, the process is streamlined, friendly and approachable.

The listing pages are complete with a description of any additional fees that may be included. This is a very straightforward, easy process for just about any user. The ‘Request for Book’ button sits right under this and is the brightest buttons on the page, inviting users to click it in order to finalize their order.

On the other hand, Airbnb takes pride in bringing people together and gives the conversation importance over the transaction. Airbnb has cleverly thought out its copy and used engaging photos and videos to ensure that the interface conveys an emotional tone that helps create a sense of trust between strangers.

2. MyUKmailbox

MyUKmailbox.com is a company that provides BuyForMe and UK mail forwarding services to people everywhere in the world. The idea is simple: not every British online store delivers outside of the borders, and therefore MyUKmailbox.com provides the user a physical address where you can get your product and they take care of forwarding them where you want.

In fact, delivering simplicity, trust and efficiency are the main goals of the website. And MyUKmailbox does this! Even if as structure, the UI of MyUKmailbox.com can be seen on many other websites, the layout, design and content were created focusing on the customer. To clear things from the beginning, a video explainer is placed right on the home page and the user will find in a funny and nice way the benefits he will get after signing in.  On the “Price” page, in addition to the pricing plans, they placed a Rate Calculator where, after filling a regular form, the user gets a cost estimation. This way, he can decide what financial option fits him the best.

The modern layout, which stays on top with the latest web design trends, reflects the personality of the brand and stands apart from the competition.

3. Dropbox

Dropbox has one of the easiest to understand interfaces by far. By having a folder and file organizational structure, it is easy to recognize and use by anyone who ever used a computer before. In terms of learnability, the things are pretty simple. All the actions you have to make in order to have an account and upload the files for storage or for sharing or download the files are so easy and intuitive, that every user has already known how to do from the start. It’s natural for most users to try dragging and dropping files from their desktops to the page without them even know if it’s possible or not, just because it’s so familiar.

Dropbox’s friendly personality, created by lighthearted illustrations, helps the user feel comfortable while using the product. Also, by adopting the usage of hand-drawn illustrations in everything they do, they put the user at ease, appeal to the child in all of us, and make the product seem more accessible. This addition to the interface makes the product feel like an old friend, ready to help users complete their file sharing tasks.

This is especially helpful if you are a large tech company like Dropbox.

4. Boosted Boards

This is a website full of life and personality. Upon arrival, users are immediately greeted with some microinteractions. The UI lets here the product to take the spotlight, putting everything else in the background. When a visitor clicks the “Reserve for $100” button, a check out form pops up. Instead of being redirect to another page, this allows the user to go ahead quickly, fill the form and reserve his products without leaving the product page.

When scrolling down, the home page has a series of panels of big, bold and vibrant photos showing the product in use and information related to products, their advantages and the most important characteristics. This gives users a unique way of seeing what the product has to offer instead of just listing out features. By greying out the text, the eyes are drawn to the two bright and bold places that contrast with the image from background: “Shop Now” and “Learn More” call-to-action buttons.

The UI of Boosted Boards really helps to compliment the “cool” factor that the product has to offer.

5. Frank and Oak

Men’s clothing retailer, Frank and Oak, uses their UI to grab the attention of their visitors and their taste of stylish shopping. The company uses big, bold photography and clean, sans-serif typography to capture the personality of the brand and to convey the message to their target audience.

The online shopping experience they deliver to their users is fairly straightforward. The navigation is quite easy,

if you want to dive deeper for more products or to switch between different products categories.

When you decide to buy a product, the UX Frank and Oak website delivered to the user is quite friendly and delightful. After clicking on one item, even if there are some other elements that help user to buy the right product, the page is focused on two things: the product’s images, and the call to action button, those two being the only colored elements on the page. To avoid some unpleasant situations, the ‘Add to Cart’ button won’t work until a size is selected.

Filling out personal information during the online buying process could be an unpleasant and stressful experience, but Frank and Oak help users out by breaking the form into smaller chunks of input fields to reduce the stress.

Overall, the UI of Frank and Oak website can be seen on many other websites, but the layout and the style were definitely created having the ideal customer in mind.

1. Tell us a little bit about yourself and what you do.

I’m a designer from Brazil currently living in Oakland, California. I moved to the US in 2011 when I got an offer from Google. Since then, I have been working for them. Before that, in 2006 I founded a personal blog that ended up growing more than I’d ever planned. Abduzeedo started as a side project and it has always kept that status, it is a blog where I can share things that inspire me. Over the past 10 years, a lot has changed and with that, the blog has evolved as well.

2. How did you get into design? Was there a pivotal point in your life when you decided to become a designer, or was it a gradual process?

My background is industrial design, and I think the reason I got into design was because I was always curious. I also have to thank my parents, especially my dad for always nurturing a sense of curiosity in my brother and me. Then, when i got my first computer and discovered some early graphic software, things became much clearer for me and this led to my desire of creating things using my computer as a medium. Of course, when I chose industrial design, to my surprise, I had to learn to do things without the computer first. I got a bit frustrated, but that was a sign of my naïveté. Now I really appreciate those days and what I learned.

3. What’s the most exciting project you’ve worked on so far?

I am fortunate to have had the opportunity to work on so many cool projects. It is hard to pinpoint one. I always try to put myself in very uncomfortable situations so I can learn the most. Of course this inevitably has resulted in some awful mistakes, but that’s the only way to gain experience, in my opinion. But to answer your question I will say Abduzeedo because it is my personal project and the one I’ve run the longest.

4. How did Abduzeedo start, and where do you see your publication in 10 years from now?

Abduzeedo started after my design studio in Brazil got robbed. We left for lunch and when we came back our studio was empty. All of our equipment was gone. For me it was even worse because that day I decided to back up my files so I lost all my backup discs as well. It started as a backup system, way before the cloud was something. There was no Dropbox, iCloud or Google Drive. I used a server and the blog to backup files in which I would write little tutorials so I could remember how I did certain things in photoshop. It ended up taking off, luckily.

After 10 years I’ve seen quite a lot of things. The blog reached its peak in 2009-2010. It was really massive the amount of traffic it was getting. Since then it has been on a decline but I believe it is more a filtering process. The web became much bigger and the long tail is simply huge. There’s a lot of information and ways to get it. That ended up fragmenting the blogosphere in terms of traffic. My goal is to keep running with Abduzeedo until the point it doesn’t make more sense for me.

5. You probably get this question a lot, but what is like to be a part of a company like Google? Do they really have slides in their offices?

Google is an amazing company. I have learned so much in so many ways. From all the incredibly amazing people to the scale of the projects and how to design for billions. It’s much more challenging indeed. The company’s culture is also incredible and we do have slides in some of the offices.

6. What’s the most interesting project you’ve had on Google?

I got the chance to work on quite a few projects, from Google Search to the most recent one that is Google Play Music. Each one with their particular challenges and requirements. I cannot get too much into the details, but designing for a very broad audience is always a big task and that really gets me motivated.

7. Where do you see the graphic design industry going? What is going to be next year’s graphic design biggest trend?

I feel that the industry is moving towards simplicity. I cannot speak too much about graphic design, but in terms of user interface we see this evolution quite clearly. From the beginning of mobile UI with the iOS and now you can see how much simpler the visual design became. There’s a constant movement towards reduction. The challenge is to do that without losing user’s understanding of how to use the software. As the audience gets more mature and savvy, it allows us to experiment more with this type of exercise.

8. Aside WebDesignLedger, where do you get your inspiration from?

More and more I try to find inspiration from the physical world. With the overload of information online I sort of started to lose my capacity to pay attention to the small little things that are so inspiring in our quotidian lives. From nature to books and architecture. There’s so much out there to be seen, and the most beautiful thing is that it’s unique to your eyes and brain to process that.

9. What are your current hobbies? What are you most curious about right now?

I became a father a little over 9 months ago and right now my hobby is to be a father hah! It takes most of my spare time for sure but it’s just awesome. I also have been learning to prototype in native Android with Android Studio. I feel that the design community focus so much on iOS and there’s a huge need for Android as the main mobile OS>

10. Tea or Coffee?

Coffee.

In this tutorial, we’re going to learn how to use the repeat grid tool in Adobe Experience Design CC (Adobe XD).

The Steps (1-9)

1. Create a new document by selecting iPhone 6 from the Start Screen.

2. Select the Rectangle Tool and draw a landscape-orientated rectangle in the upper part of your screen, and give this shape a fill colour of your choice.

3. With the Rectangle Tool still selected, hold Shift to draw a square, and again, give this shape a fill colour of your choice.

4. Select the Text Tool, click anywhere on the artboard, and start typing some title text.

5. Duplicate this layer by going to Edit > Duplicate, move this under your title text, reduce the size, and insert some text of your choosing.

6. Repeat Step 4 and type your CTA (call-to-action) text here. For example, it might say ‘Read More’. Make this text prominent in order to grab your users’ attention, and position this under the text created in Step 5.

7. With your mouse, drag over all of the elements created in Steps 2-6, and then click the Repeat Grid button in the Property Inspector on the right-hand side.

8. Notice the green border that appears around your content? Select the bottom slider and drag this down to repeat your content so that it fills the screen.

9. When using the Repeat Grid Tool, Adobe XD automatically creates a gutter (spacing) in between the different objects that are being repeated. By selecting and clicking inside this space (the gap in between objects) you will see some pink guides appear, that allow you to adjust the gutter spacing. For this tutorial, reduce the spacing here to around 10-30 pixels.

Download Adobe Experience Design CC (Adobe XD).

In this tutorial, we’re going to learn how to create guides for responsive design, in Adobe Experience Design CC (Adobe XD).

The Steps (1-12)

1. Create a new document 1920 x 1080 from the Start Screen.

2. Create a shape that is 100% height, and 1170 pixels in width. This shape is going to represent the maximum site width that we will be designing for, and should be centrally aligned to the artboard. Give this rectangle a grey colour for now. Go to Object > Lock to lock this layer in position, so that we don’t select it by mistake when working through the steps to follow.

3. Create a thin vertical rectangle, that is 100% height and 15 pixels in width. This is going to form our site margin, and should be positioned on the inside left edge of the main rectangle. Duplicate this shape, and also position a copy on the inside right edge of the main rectangle. Give these shapes a slightly different shade of grey, so that we can easily distinguish the different shapes/elements, whilst working on the layout.

4. Create another vertical rectangle that is 100% height, and 67.5 pixels in width (70 pixels if you design your grid without the left and right margins). Colour this new shape black, and position this alongside the shape created in Step 3.

5. Create another vertical rectangle that is a different shade of grey to the two shades already being used by the other shapes, and position this alongside the shape created in Step 4. The three rectangle shapes should all be lined up alongside each other, with no gaps in between.

6. Using Shift to select these three shapes (excluding the main rectangle). Next, click on the Repeat Grid button in the Property Inspector on the right-hand side.

7. Your shapes should now have a set of green guides around them, allowing you to drag the slider on the right, until it touches the edge of the right margin that we created in Step 3.

8. When using the Repeat Grid Tool, Adobe XD automatically creates a gutter (spacing) in between the different objects that are being repeated. By selecting and clicking inside this space (the gap in between objects) you will see some pink guides appear, that allow you to adjust the gutter spacing. For this tutorial, reduce the spacing here to zero, so that there are no gaps between our shapes.

9. Once the gaps have been reduced, select the green right slider again, and drag this out to the right, until it lines up with our right-hand margin as before.

10. Double-click the Repeat Grid group, select the first 30 pixel shape that we created, and adjust the colour to white. You will see that all of the other clones of this shape also change in colour.

11. Use your mouse to drag over all of the shapes that we’ve created (the main rectangle should still be locked), and in the Appearance menu on the right-hand side, adjust the opacity to between 2-5%. Lock these layers, as we did with the main rectangle in Step 2. Keeping the opacity of the responsive grid less than 5%, allows it to still be visible enough to work on, but doesn’t interfere too much with any design elements that are being created, and you can even set the guides to 0% opacity to hide them completely.

12. Start designing an awesome and responsive site!

Download Adobe Experience Design CC (Adobe XD).

In this tutorial, we’re going to learn how to design an on/off switch UI, in Adobe Experience Design CC (Adobe XD).

The Steps (1-18)

1. Create a new document by selecting iPhone 6 from the Start Screen.

2. Select the Line Tool and hold Shift to draw a horizontal line that spans the width of your document (375 pixels), and position this at the top of your artboard.

3. Duplicate this line by going to Edit > Duplicate, and move this new line downwards approximately 80 pixels.

4.Repeat Step 3 two more times. The pink guides in Adobe XD will help ensure that the spacing between the lines is consistent.

5.Remove the top line (that is touching the top of the artboard), and give the remaining three lines a colour of your choice. For this tutorial, we’re going to be using a light grey colour.

6.Select the Text Tool and type the text for your first option, and adjust the font and size of this text as desired.

7. Duplicate this text two times, by going to Edit > Duplicate, and position these two copies so that they are vertically centrally aligned between the lines below. Change the additional text objects to display the desired wording.

8. Select the Rectangle Tool, and create a landscape-orientated rectangle that fits within the space between the lines.

9. In the Appearance section of the Property Inspector, select the icon that displays a square with rounded corners, and enter a value in the box alongside this, so that either end of your rectangle become completely rounded at either end. Alternatively, the shape corners can be adjusted by selected the shape, and then clicking and dragging the circle anchor points that appear just inside of the outside anchor points for the selected shape.

10. Give this shape a white fill, and select a border colour of your choice.

11. Adjust the width of the border to be between 1-4 pixels.

12. Select the Ellipse Tool and hold Shift to create a circle that is the same height as the rounded rectangle created in Step 8. Align this circle to the right-hand side of the rounded rectangle.

13. Select the rounded rectangle, and give this a fill colour of your choice. For this tutorial, we’ve used a green colour to signify that the option is selected. You can also remove the border from the rounded rectangle by un-ticking the box in the Property Inspector (optional).

14. Select the circle, and alongside the border options, select the Eyedropper Tool, and sample the same colour used for the rounded rectangle in Step 13.

15. Select both the rounded rectangle and circle elements that make up the slider, and go to Edit > Duplicate to create a copy. Repeat this two more times, and position the additional sliders alongside the corresponding text in the spaces below.

16. Select a slider that you wish to display the opposite position, and adjust the fill colour of the rounded rectangle so that the button appears inactive (grey can be an effective choice of colour to clearly communicate this functionality to a user).

17. Select the circle for this inactive slider. Next, similar to Step 14, select the Eyedropper Tool, and select the same colour as the inactive rounded rectangle.

18. Align the circle on the inactive slider to the left-hand side of the rounded rectangle.

Download Adobe Experience Design CC (Adobe XD).

In this tutorial, we’re going to learn how to quickly add multiple images in Adobe Experience Design CC (Adobe XD).

The Steps (1-11)

1. Create a new document by selecting iPhone 6 from the Start Screen.

2. Select the Rectangle Tool and hold Shift to draw a square that fills the entire width of your artboard. Alternatively, you can enter the width and height of 375 pixels in the Property Inspector on the right-hand side with the shape selected.

3. Give the square a fill colour of your choice.

4. The artboard width is 375 pixels, and in order to display additional images below across 3 columns, we must divide the artboard width by 3 (375/3 = 125).

5. Select the Rectangle Tool and holding Shift create a new square, and give this shape a width and height of 125 pixels. Position this shape directly under the larger square, and align to the left edge of the artboard.

6. Select the smaller square and then click the Repeat Grid button in the Property Inspector on the right-hand side.

7. Notice the green border that appears around your content? Select the right slider and drag this to the right to repeat the square, and create the three image placeholders.

8. When using the Repeat Grid Tool, Adobe XD automatically creates a gutter (spacing) in between the different objects that are being repeated. By selecting and clicking inside this space (the gap in between objects) you will see that some pink guides appear, that allow you to adjust the gutter spacing. For this tutorial, reduce the spacing here to zero, then drag the green slider to the right so that it touches the edge of the artboard once again.

9. Next, drag the bottom green slider down, and repeat Step 8 to reduce the gutter spacing to zero.

10. Select the larger square, and from your window/desktop drag your featured image on to the square, and it will automatically import this image into the document to occupy this space.

11. Next, hold Shift and select all of the other images that you wish to import (remember, the order in which you select these images, is the order that they will appear when imported into Adobe XD), and drag these on to that first smaller square that we created. Adobe XD will then automatically populate all of the other small squares with your selected imagery.

Download Adobe Experience Design CC (Adobe XD).

In this tutorial, we’re going to learn how to design a social profile user interface (UI) in Adobe Illustrator.

The Steps (1-18)

1. Create a new document, 3000 x 3000 pixels, with the colour mode set to ‘RGB.’

2. Using the Rectangle Tool, select a light grey and draw a four-sided shape that covers the entire artboard. You can then double-click the layer name in the Layers palette and rename the layer to ‘Background’, and click in the empty box alongside to lock the layer (you should see a padlock icon appear to confirm that the layer has been locked).

3. Create a new layer from within the Layers palette, give this layer a name of your choice, and then paste in the profile photo that you wish to use. Make sure that this new layer is above the ‘Background’ layer. Move the photo off of the artboard for now, and we’ll come back to this later in the tutorial.

4. Using the Rectangle Tool, draw a new four-sided shape (approximately 775 x 490 pixels). Give this shape a fill colour of white.

5. Select the Ellipse Tool, and hold Shift to draw a circle (approximately 290 x 290 pixels). Fill with any temporary colour for now, and align the circle centrally inside the rectangle that we created in Step 4. Different shades of grey are particularly useful when working on a layout to get the basic structure, and can then be refined later in the design process.

6. Select the Type Tool and click anywhere on the artboard to start typing a number of your choice, then press Return and type the word ‘Likes’.

7. Select central text alignment, pick a font, and style using bold/italics as desired.

8. Position the new text object in the bottom left corner of the rectangle, with plenty of space from the left/bottom edge.

9. Copy/Paste the text object two more times, and spread all three horizontally across the width of the rectangle. Use the alignment options if necessary to distribute the 3 text objects equally apart. The numbers can also be adjusted, as well as the titles. For example, consider using Shares, Downloads, Followers etc as ideas for titles.

10. Remember the profile photo that we put to one side earlier? Move the photo over half of the circle, so part of the circle is still visible. Then select Object > Arrange > Bring to Front to ensure that the circle is on top.

11. Select both the circle and photo together holding Shift when selecting, and then go to Object > Clipping Mask > Make. This will crop your photo inside the circle shape. Double-click on this object to now go inside of the shape and adjust the crop of your image. To then exit that specific object group, click the arrow pointing left, in the upper left corner of the document window.

12. Next, we can create a circle with similar dimensions to the profile photo, remove the fill, and give this shape a stroke width and colour as desired. This step is optional, adding a border around your profile photo.

13. Select the Polygon Tool and specify creating a shape with 3 sides (triangle). Select white as the fill colour for this shape, reduce in size, and position centrally and underneath the main rectangle, ensuring that the triangle is pointing in a downwards direction.

14. Ensure that both of these shapes are touching, and in the Pathfinder palette, select the Unite option to merge these two shapes into one shape.

15. Using the Ellipse Tool, create a narrow ellipse that is a similar width to the main rectangle, and position this underneath. With this shape selected, open the Gradient palette and create a new gradient that has black on the left and right sides, with white in the centre. You can drag swatches from the Swatches palette on to the Gradient Slider to add these to your gradient.

16. The next step is to go to Effect > Blur > Gaussian Blur, and specify a value for the desired amount of blur. The aim here is to create a ‘floating shadow’ for the main rectangle, and you can adjust the amount of blur accordingly. The overall opacity of this shadow can also be adjusted in the Transparency palette.

17. Increase the height/width of the main rectangle as required to add any other additional details. For example, this could be someone’s Name, Job Title, or a Description etc.

18. Select the main rectangle, and go to Effect > Stylize > Drop Shadow, to specify any drop shadow settings. Adding a subtle shadow can help create a little more distinction between the light grey background, and the white used for the main rectangle.