Redesigning a site with Adobe XD
HTML-код
- Опубликовано: 23 апр 2019
- In this video, I take an existing site (from community member c__beck) and redesign the homepage in Adobe XD, setting the stage for a major refactor.
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: / discord
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
![Rob49 - On Dat Money (with Cardi B) [Official Video]](http://i.ytimg.com/vi/fTFS58mHJh8/mqdefault.jpg)
Awesome redesign. The great thing about design is the more you do it, the more you learn and can only become better!
Nice! It'll be interesting to see the final product, especially how you will implement the mobile view. Always a pleasure to watch and thank you for sharing.
Love the use case and that you did not cut stuff out. Nice to hear you thinking as you go.
Great work. Can't wait for next step. Keep it up.
from where we can get these images for the project??
nice redesign!
really looking forward to the coding part 👍
ps: please fix the spelling error (we our ...)
should be 'we are', I guess.
How did I not see that, speically with the font size being so big! It'll definitely be fixed 😀
@@KevinPowell haha. it was driving me nuts throughout the entire video...
I wonder for how long it must have been on the original site since you've copied the text from there🤔
@@CodeNascher_ It was driving me crazy as well. It still is up on the site that way
@@biomcanx1 oh lord...
Amazing work! This would make an awesome mini-series!
Yeah, I'm going to try and get a bit more design-y stuff coming in, possibly as feedback from user submitted stuff :)
Nice upgrade I like watching your thought process you follow while going through the redesign. The only suggestion I would really make is to lower the opacity over the granola image and increase the brightness of the font. It is difficult to see what is behind the purple. As always please take my suggestions with a grain of salt.
I'll play around with it when I'm coding it :)
nice work!
Recently started trying Figma which is basically similar to adobe xd. Using it for a layout idea for my own website.
Figma and adobe XD so comfortable for web design. Nice :)
What about inkscape 1.0 ?
@@patriotact3729 Inkscape is fine for creating graphics, but for now it lacks tools and features that you'd want for creating prototypes for websites or apps. For example responsive design capabilities, no built in prototyping, animating, and the alignment tools are behind most other commercial vector graphics software.
Awesome thanks
I like the design the only change I would make besides the spelling (We our) would be to switch the order online and the products section. To me that just makes more sense.
Thanks for the feedback George. I've already coded it up as it is here, but I see where you are coming from on this. I'll mention it to the owner and let him decide :)
Hello guys, i might be a little late for this tutorial but where can i get the text/content and images from the website to paste it on my HTML?
Hi Kevin, do you know if there is an extension for visual studio code that highlights html elements in live preview when you click on them like brackets does?
Thanks.
If there is, I've never used it.
Is XD beneficial for this kind of project? Watching this, I can't see that XD made the project any easier than, say, Illustrator (apart from the repeating columns feature).
I guess I just haven't seen a need to use XD yet, unless XD can output your design in code... Which would make it a must-use product.
XD's reusable components are a lot better than what Illustrator can do, though I didn't really use it for this one, I could have set up some buttons with it. You end up with a "master" which controls everything, but as soon as you change something in one of the copies, that one thing is "unlocked".
So say you end up with three sets of buttons with different background colours, but everything else is the same, if you went to your master button and changed the font size, changed it to uppercase, and increased the letter spacing, even though the text is different in all of them, those changes would all kick in.
There is also easy animation and state management. For something like this, as you said, it's very simple, so a lot of tools would work, but XD is getting better all the time and adding in some really awesome features. Maybe at one point I'll do a deeper dive into it.
nice
Will you also make a video for the mobile version in XD?
In this case, no. I will be doing more design content over time though, where I will look at doing both, as well as interaction and all that 😁
Great video, tell your clients not to use there current logo for there packaging though, it will never work on a store shelf.
In your finished design I feel the grey overlay doesn't fit well with the vibrant colors of the rest of the page. So connected to this - is the monkey image related to the company like a logo? Could part of it be used - perhaps the head in a circular shape in the top left area of the page? Could the showcase area where the monkey is have a different image more related to the food being created? Might still need an overlay but depending on the image it might lift the vibrancy of that area. Rest of the page I think looks good.
Thanks for the feedback Anthony. The monkey is sort of like a mascot. I agree, an image of the food would probably be better and make the entire thing more clear for someone visiting. I'll switch it for the final version, and then let them decide which way to go :)
is there any free alternative to adobe XD ? is it free? (on windows)
XD is free, there is also Figma. Both have limited free plans, but they're enough to get started :)
Hopefully, the site owners realize that "We our Northern Ohio's..." should be "We are Northern Ohio's...". The visual styling changes are a very nice upgrade, but the text for the site could really use an overhaul to fix all of the grammar mistakes.
So Adobe XD is similar to Figma?
Close. But i love figma better
I haven't used Figma. I'm a bit of a Adobe fanboy, mostly because I use so much of their other software already (Photoshop, Illustrator, InDesign, Premiere, etc)
@@KevinPowell That's why I asked. I work in print in the past and thought to be pretty familiar with Adobe but Adobe DX is new for me.
@@arioseno8320 I probably keep using Figma also, I like that just runs in a browser.
Do you actually use XD or Figma?
I used to use XD a lot, not I only use Figma
Never heard of _Adobe:XD_
Not keen on this if I’m being honest. I know you’re working with what you have but the colours are terrible. I’d also sack off that monkey and show some images of the actual product. This looks like a kids play group or something. Sorry. 🙂
I'm going to be doing that with the monkey when I code it up :). What is it you don't like with the colors?
very ugly design
I'd love to know what it is you don't like about it. It's great to say you think it isn't nice, but if without any feedback, we can't make any improvements!