JAY OROS.CO (2018)
Hello World, Welcome to My Portfolio
Leading up to my college graduation, I bought a new domain and started planning my new portfolio. This would be my first project where I would implement my design process from start to finish. I’ve spent the last year or two learning about user experience and how it’s emcompasses ideas, web design/development, marketing, and business. I wanted to take everything I learned and use it to help me design my first professional portfolio and resume.
How It All Started
During my last semester of school (spring 2018), I was taking my last class, Portfolio Development, while working full time. The goal of the class was to learn how to design case studies for projects we’d worked on, along with how to apply/interview for jobs, and other related topics. It was an insightful experience. I spent most of the class developing a study for my work on a concept redesign of DatPiff Mixtapes.
After I graduated, I shifted my focus from passing a class to publishing a complete portfolio website with at least three case studies.
#Goals
On a few occasions, it’s been suggested to me that you don’t need a website to get a job; you need a portfolio. Job postings in the design field literally say your application will not be viewed without a portfolio.
When I thought about why any professional needed a portfolio and then honed in on my specific needs for one, I came up with a few goals on my iPad (Paper app). These goals helped me form a plan and get past designer’s block that was preventing me from making progress.
Goal A: Create Connections
I wanted people who visited my website to be engaged, and want to come back whether it be to read something I wrote, view something I made, get in touch, or share my website with a colleague.
Goal B: Build Online Presence
I’m learning more about marketing and branding, and it’s a known fact that building and marketing your brand online through different platforms can get more eyes on your product or site and get repeat business.
Goal C: Share My Design Process
Throughout my website’s development, I’ve documented my progress in various ways from sketches on my iPad to Stories on Instagram. Instead of just showing a finished product, I’m giving a closer look into the conception and execution of my work through different mediums.
Goal D: Get a Job, Start a Career
At the end of the day, I’m doing all of this to find a job where I can grow and continue to learn new things with other like minded people. Even if I’m just finding contract work online, the experience will hopefully guide my career path into something more permanent in the future.
While reading my case study, you’ll learn how I tried to manifest my goals through design and execution.
Getting Past Designer’s Block
Back in 2017, I had trouble trying to restart my website and produce an honest portfolio. When it comes to designing for myself, I tend to spend a lot of time on how it looks. I will go through multiple designs before I settle on something. In my most recent attempt I did some exercises to figure out how I wanted the site to be conveyed in a ideal scenario.
Youthful
Some of my goals are to create connections and eventually get work. I’m interested in connecting with young entrepreneurs and helping them bring concepts to life. As a way to reach one of my target audiences, I’ve been sharing my process developing this project on Instagram via the timeline and Stories section. I’ll post shots of wireframes drawings from my iPad, design commentary, talk about what I’m thinking, and snaps of the design. When you view all the posts in a story highlight, you get to see the design change and evolve.
Basically it’s like I’m posting a shot to Dribbble except instead of it being viewed by designers on their computers, it’s getting viewed by younger creative audience.
Engaging
I only have 10 seconds to capture a user’s attention, if even that. I want my website, and any project I take part in, to be engaging because users don’t stick around long unless you can capture their attention in the first moments of their visit. Animation was mentioned for the modern theme, but it plays a key part in delighting users when the site first loads and the way I’m using it is to call users to act (see: the menu bar on mobile). I also plan to start sharing things I read, view, experience in a blog of sorts and possibly an email list as a way to connect with visitors.
Colorful
Color is everywhere in design these days. Designs that exude bold color choices and make good use of contrast are the best looking in my opinion. Though I say that, my past portfolio designs have been very minimal and lacking of imagery. For my new portfolio, I included full screen backgrounds, a unique color scheme, and big image previews. I wanted users with big desktop displays to have a pleasant view too, since I was putting a heavy emphasis on mobile-first.
Modern
I looked at all the latest design trends to see what the industry is currently into and found some interesting themes. I found that big text was making waves trend as well as abstract grids, so I tried to incorporate those ideas into the design.
Animation is also being used more in web design since it’s gotten widely accessible and easier to implement. If you see my site, you’ll see little bits of animation that try and call the user to certain actions and call the user to act.
Naturally I came up with a few themes I didn’t want the site to be described as.. outdated, plain, and boring. These adjectives could be seen as generic, but by doing the exercise I realized I wanted the site to be like software. I would develop an initial version, and add on features and fix bugs as I found them or had time to address. In the past I’ve developed designs with minimal graphics, so I made a mental note to try and do more visually.
Let’s Sketch It Out
This year I finally got an iPad Pro (9.7). I’ve wanted one ever since the original tablet was announced back in 2010. Little did I know it would improve my design process considerably. With the Paper app from Fifty Three and a stylus I was able to not only write out all my goals and ideas, but I also sketched out the wireframes for the mobile and desktop layouts. If you look at the screens you’ll see notes tied to certain elements.
Mobile First
I started sketching out layouts for mobile first in an attempt to focus on the content. I thought about the 5 Ws when deciding what I wanted to present. Who would be me as in logo and quick bio. What would be my work. When would be the dated blog posts. That tells you if a site gets updated. Where would be ‘based in the San Marcos/Austin, TX area’. Why would be the case studies, the notes talking about my thoughts and process. Keep reading to find out how..
Design with Purpose
When sketching out new ideas, I like to add side notes to certain elements. It’s a reminder to myself why I designed something a certain way. As you can see I went with a familiar layout. I would later ditch the 2-column footer for 1-column all the way down.
Case Study Format
Above you’ll see a concept for a pop window I designed to present individual case studies. My idea was that if I went with a one-page website, I would eliminate the need to change pages by using modal windows. Though I nixed this idea for my project, you can still see how I wanted to format each case study. Each post would include the project title, my role, the copy, and imagery.
I have a habit of not designing all pages before I start coding because I never really stop designing, but I managed to design a minimal about page that would include more information than I’m used to sharing. There would be a lot of copy about my hobbies, skills, goals, design intent, etc. In the end the about page looked nothing like I originally laid out in my head and in the wireframes.
I sketched out a few different layouts, but aside from the one I went with, I almost went with a full-width, image-centric design. I personally didn’t like this other option because the potential of stretching images.
Hello Adobe XD
This year I finally took the plunge to learn a new design program. I’d heard/read a lot of good stuff about Sketch, InVision, and Adobe XD. I ended up with Adobe XD for a few reasons: it’s free, I can design and prototype, and it’s easy to learn coming from Photoshop. I plan to learn Sketch when I get back to a Mac, and InVision has Studio now but it’s currently Mac only but a Windows version is on the way, so that app may be next for me.
After playing with Adobe XD for a couple weeks, I decided it was time to use it on a real project, and what better project than my own. Referencing the wireframes, I designed the layout rather quickly. I learned XD had a lot of features to speed up productivity.
Prototypes
Final Design
Final Outcome
I’m very proud of the finished product I’ve designed. This was not only the longest project I’ve worked on, but I’m certain it was a pivotal point for me. I used new programs, kinda rebranded, I followed a design process from start to finish, and I tried out new methods I’m sure to use in the future. Oddly enough after working with this design for so long, I’m already a bit design fatigued. I just hope visitors will enjoy the design as much as I have.
But we still have to validate our design.
Slight Changes
I decided not to put a email sign up on the home page, and opted instead to use a Typeform popup page that would ask for the info. I also did this to save white space.
Going with the Theme
Now that you can see the final design, let’s go back to the themes I presented for this project.. youthful, engaging, colorful, and modern.
- With the illustrated logo, fat round fonts, use of emoji and gifs, I gave you youth.
- The site is engaging through the use of animations and navigation with call-to-actions. After viewing any piece of content, there’s a path to view my work, learn about me, or get in touch.
- I like blue/green so I used it as my main color. With the help of a color scheme generator, I was able to come up with a nice dark theme. I then copped a custom matching map background from Snazzy Maps, a repo for Google Maps style overlays.
- I kept it modern by using HTML5 tags, streamlining the workflow, designing for mobile first, using relevant tools, and more.
I can confidently say my final outcome was a success as far as keeping to the themes.
Goals Reached?
Looking back at the goals I created at the beginning, some of them I’ll have to wait and see while other goals have already been reached.
Goal A: Create Connections
I managed to reorganize my Twitter and Instagram profiles into business accounts. I started listening to the UX Defenders podcast and just by tweeting the host, I was able to quickly converse with someone who is connected in the industry and ultimately resourceful. I’ve also tried to rekindle some connections from my web past when I was more of a blogger and web host, but this will definitely be a goal to watch.
Goal B: Build Online Presence
By posting my progress to targeted platforms with vast reach, like Instagram Stories, I’ve been able to boost my following as I work to convert my once personal account, into another platform I can seek and share work from. I hope that it continues to grow and become a source of project leads as a freelancer one day.
Goal C: Share My Design Process
For sure completed. As I said, I shared a lot of the progress via Instagram Stories and thoughts through Twitter. As I get ready to launch the site, I’m having peers and former professors check it out to get their opinions, reactions, and suggestions.
Goal D: Get a Job, Start a Career (in 3 months)
I’ll start the timer for this one when the site launches. I’ve been waiting months to apply for jobs, just so I could have a working portfolio. At the time of my writing this, it’s December 11, 2018 and my next focus, after publishing the site, is to send out my resume, practice job interviews, and ask Santa for a job. I’m hoping to have a job within 3 months, so we’ll see how that goes. I’ll post updates at my blog once I launch it.
Looking Back I Learned
I learned so much working this project. I used more javascript than I’m used to, I added new tools to my workflow, tried to keep my design choices informed.
- One thing I learned using Adobe XD is that it’s not the be-all end-all program for web and app design just yet. I still caught myself going back to photoshop and sometimes Illustrator.
- Pay for Adobe Creative Cloud. For 4 months out of the 6, I was without the subscription due to money management but it’s so worth it to have. Access to unlimited XD prototypes and free stock photos are one thing, but access to the whole app environment is essential.
- The design process, when followed properly, can be a daunting and time-consuming task. In future projects I hope to streamline my workflow even further and continue to work on my time management skills.
Update Log
Version 1.0 published on 11.11.18
-initial publishing
