Website UI with Adobe XD

Hey guys! I am here with a UI I have just finished designing with Adobe XD. I have recently downloaded Adobe XD and this is my first UI designed from scratch in it, took me around 1 hour to make, I had to google some shortcuts for Adobe XD lol. Tell me what you think of it!

Note: To all of the aspiring UI Designers out there, I strongly recommend Adobe XD for UI Design, it is simple to use, and doesn’t look as ‘daunting’ as other programs such as Illustrator and Photoshop.

7 Likes

Nicely done. It looks like an actual pizza parlor’s website.

5 Likes

Thank you!

Also, Parlour lol

4 Likes

I spelled it the American way. Both are correct.

2 Likes

Wow, I didnt notice that, I live in the UK so you’re right ig :flushed:

1 Like

piza, i lav piza; best fud im worl, piza chep
I like the UI, it is noice

1 Like

Can I have a pizza :pizza:

the website you created is my favourite because pizza is my favourite meal and the website design is not that bad. that it all I wanna say.

Make sure give me extra topping :pizza:

1 Like

Yeah Adobe XD seems like a great piece of software, especially do its mock up features. I personally prefer more advanced vector graphics software, but I did try Adobe XD once but I was turned away when they didn’t have a dark mode. :sob:

Anyway, the UI looks good but it does need some work.

  1. Font and accent fonts
    Too many different fonts can ruin the consistency of your UI. Using accent fonts to throw in a little bit of inconsistency can look good, but differing too much between fonts can hurt the style.

  2. Image fade. It feels too quick or abrupt. Maybe make the white part more transparent.

2 Likes

Thank you, I will definitely take those into consideration! :slight_smile:

1 Like

This Looks Great!!!
Theres one thing though the font is different in some parts try making it all the same font

1 Like

I think you did an excellent job considering this is your first time!

2 Likes

Same! And that looks great btw BrickColor is annoying in scripting Uk spells BrickColour lol

1 Like

I have been designing ui’s for so long but each and every single one suck, you said this is your first one? jesus… this is amazing

1 Like

This is my first attempt at Adobe XD, not UI Designing, and cmon, dont think of yourself like that. My UI’s used to be trash as well, this is an example of what I used to make:

Over time, I practiced a lot, which made my skill and experience gradually gain. So have some hope in yourself, motivate yourself, and go for it! And over time, your UI’s will look amazing!

Remember, we all start from somewhere, whether it is good or bad.

I’m I only the only one that thought that the XD was supposed to be the emoticon not the version of Adobe?

Lol, I have heard about it from different UI Designers, and only decided to try it out today.

The UI looks good. I would suggest you change how the cart icon looks like. Additionally, I would use more different font weights for the text.

As for the drop shadows, I think you should reduce the drop shadow a tad bit for the text and the button that says “View Our Menu”. I like the font on the “View our Menu” text. What font did you use for that text? I would also make those light text paragraphs have a normal font weight and have it at that size.

I would also say you take the “expensive.” text a bit more up. Then, take that paragraph and “View Our Menu” button a bit up closer to the “Flavour doesn’t need to be expensive” text.

Also, for the tabs on the top bar, I think you should make the “Home” tab first, and have the “Contact” tab at the end of the tabs (don’t place it where the cart icon is). I would have the “About” tab next to the “Home” tab, then the “Menu” and “Services” tabs, and finally the “Blog” and “Contact” tabs. Keep the cart icon where it is though.

Overall, the UI looks nice, but with some more work put into it, it will look even better. Good work! :thumbsup:

-GameDevSky

1 Like

that’s pretty much what I make nowadays LOL, i am absolute trash at colors and color schemes, that ui is pretty good ngl