Jordan Hudgens: In this guide, we are going to give you the set of requirements for this project.

What you're going to be tasked with building is a full user interface for your own portfolio application. You're not going to go code it, that is in another course, but we're going to focus on building this design.

Now, if you went through the user experience course, you built out things such as the sitemap and the wireframe and you modeled out what the experience looked like for a user accessing your site. This is the second part. This is where you take those low fidelity designs and those wireframes and actually make it look like something people would want to see. So there are going to be a number of things that you're going to be building here.

UI Project Requirements

• Style guide
  • fonts
  • colors
  • etc
• Full prototype
• Logo

Jesse Cook: What's going to make a successful deliverable here is going to be primarily--I mean learning the skills of actually doing the design is going to be something that we're going to be looking at. But you're going to start with the wrong foot if you don't first identify who you are as a brand. That is the product that you are going to be selling with this website: yourself. It's very important for you to understand who you are and why you should be purchased by any employer or worked with by any potential partner or picked up by any potential client.

Personal Branding is something that is incredibly important. And it's not just your website. Personal Branding is your ability to explain who you are, what your skill sets are, and it's also going to be the thing that gives you direction to pick those skill sets as you're going through these courses. You have the opportunity to focus on certain tasks, on certain skills, and on certain abilities. That should all build towards what you want to be, as a good product. Any good product has a clear direction. Any good product doesn't diverge in ways that don't fit into a single narrative. It's great to be a jack of all trades, and maybe that's what you want to be, and that's what you sell. However, it's also very good to be something to someone as opposed to being everything to everyone. As the adage goes: "If you're everything to everyone then you're nothing to anyone".

JH: Right, exactly.

JC: So identify what you want to be.

An example of this is me. I come from a very torn background where I had my dad who was an accountant; very good with numbers, very logical, very business-oriented. Then I had my mom who would carve bears out of chainsaws; we'd buy her chainsaws for Mother's Day. So I came from this very unique place where I loved logic and I loved design and I loved art. What did I end up going into? Creative direction and user interface and user experience. It's a perfect marriage of that, right? I identified what I was good at, what I loved, what brought me joy, and that is what I built my education on. I built it on logic and business mindedness while at the same time building out my technical ability as a designer. I knew what I wanted to go into. I knew the position that I wanted and that's what I built my skillset toward and then eventually I built my career all towards that point. You're not always going to do that perfectly, but I did want to make sure that I covered the importance of starting on the right foot, not just in how you're going to present yourself, but even before that when you build yourself as a product.

JH: Absolutely. So that really kind of encompasses so many different skill sets. There is almost a marketing component in that. And a lot of developers like to think that they're getting into development so they don't have to do marketing. It doesn't matter what profession you go into. You have to do sales and marketing at some point even if it is just selling yourself. And so if you want to go become a developer then you're going to have to showcase why companies really need to have you. If you simply list out: I'm a full-stack developer! They get all kinds of applications. Thousands and tens of thousands of those types of applications and resumes, and they go see portfolio sites that just say that. And what really needs to happen is for them to come to see your portfolio site and instantly know why they need you. And so being able to put that all together, there's definitely an art element to that in being able to do that. And so what you finish in this project will most likely not be the final time that you edit your portfolio. I'm constantly changing and updating mine based off of other skills and experiences.

JC: I just fixed something on mine right before we started filming. Hahaha. I pulled mine up and I saw something I wanted to change.

JH: Haha! And that's a great example of it! There are so many times where that will happen. I'll go on to my site, or someone will ask for my resume, and then I'll realize I haven't updated it in two years. And then I have to go update it, upload that, and make the changes on the site.

So you're constantly going to be doing that, but the focal point on this is not as much focusing in on the details, but more focusing on the branding side itself. That's a reason why we included building and designing a logo. The other thing I can tell you if you remember back to the UX course when we talked about my main goal for these courses was to create unicorns. To create that developer that can also be a designer. And I can tell you from experience in working for all kinds of clients and organizations: if you're a developer who can also do some incredible designs you are going to be very needed. Everywhere you go you're going to have a job and a very high paying job for a very long time. There are not a lot of developers that can really merge in those skill sets and so that is what this course and what the UX course was really all about is helping you actually learn those things because it's so easy to just focus on development, just focus on coding, and then forget that one of the most important parts is building that experience and building out applications that users actually love.

JC: Right. And it's very important to remember to use discretion when doing this. A very common thing, especially with students that come out and have just learned all these skills, is that they feel that their website needs to be a tool just to show their prowess as a developer. So I'm going to have parallax everywhere and I'm going to have all these hover effects everywhere because when someone sees it they're just going to appreciate how good I am as a developer. And that will do two things. One, you're going to spend a lot of your time just trying to make these things work, which gives you less time to design it. And, two, it's going to be really annoying. Those types of websites where there's just stuff happening everywhere? Like, man, I feel like I'm working with, like, a Flash website from 2001, right?

So definitely use discretion. Make a website for yourself that someone would want to use for a product that would actually be selling. And it goes along with the user experience side where I talked about creating the content and telling a story. This is the story you're going to tell. And the story of you isn't necessarily like, "I was born and then I learned how to develop." It's going to be a little bit more nuanced than that. It's just going to be talking about, here's my value propositions, the same as you would with a product, and this is why I'm a good fit for your type of company.

I've changed my website before going into job interviews to match the color scheme of the brand. Just using their fonts and colors and I use that in my interview. I said, "I really like your colors that you use, like hex value #b70370." And all the designers thought that was hilarious because they all had that memorized as well.

But the idea is that when you start designing this, use the inspiration that we talked about: Dribbble, Behance. There are so many examples of good personal websites, where people have good portfolio pages, they show the work that they can do--THAT's where you show your development prowess is on those portfolio pages, not the web site itself. The Web site itself should just be a frame around your work and around your value proposition. So, when you're designing it, go look at that those inspirational websites like Behance and Dribbble, you will find examples of other people who have showcased themselves, and then tailor it after that. Keep it simple. Use good whitespace. Use good typography. Make it look really pretty. And really pretty doesn't mean really elaborate and really exciting, necessarily. It means that it's using good type theory, it's using good color theory, it's using good whitespace and that things are directing to call the actions very clearly, sending the viewer to your portfolio, sending them to a contact me, or whatever it is that your website is going to end up doing. But definitely don't get caught in the weeds trying to use some crazy HTML5 animation.

JH: I think though that is all exactly the best advice for building out this type of project, it is being able to have that kind of focus. And the whole point of this project and why it has these set of deliverables is because it will force you to take everything that we've discussed and encapsulated all of it and to build it out. And the one very nice thing about it is after it's done, you will have a complete and total portfolio prototype and then you can translate it into code and use it however you need to. So great job going through this course, good luck going through the project, and we'll see you in the future.