Posted on

A Designers New Years Resolution

You’ll hear a million resolutions of “New Year, New Me” posts, blogs, tweets, messages, etc. What’s different about mine? None. The only vague difference is that I’m making them as a designer and a guy who runs a youtube page. There’s nothing special about this blog post that is any different than you’d see anywhere else. The unique flavor is that it’s me. If you know me, want to know what’s happening and what I’m hoping to happen, then keep on reading!

This year was a little more crazy than usual.  I won’t go into detail on the negatives, but here’s are some positive defining moments in 2018 for me:

  • I was published in .net magazine for a a small page about my youtube gaming channel
  • I broke out of my rut at work and just started designing what I wanted, and it worked heavily in my favor
  • I finished a 6k Spartan Obstacle Course Race
  • I completed a design challenge for .net magazine that will be published in 2019
  • I started on the path to learn AR

 

I think it was a pretty decent year, but I have some plans for the new year as well. When I look back on this post a year from now and I see 30% of it completed, I would of considered it a success.

 

Career Goals

Finish up some backlog courses on Udemy

I have dozens of courses I just buy on the cheap and sit on. There’s a ton of cool subjects that I wish I’d jump into, but I never have. The majority of it is development courses, but quite a few are Unity and game dev courses.  This brings me to my next design goals

Launch an AR app

I’ve been learning about it, but I think if I make a goal of launching something, i’ll probably be able to make it happen. I have an idea I’ve been working on, but never came to light due to technical stupidity I guess you’d say.

Update My Personal Brand

As a designer, we all say we’ll reinvent ourselves. I don’t plan on reinventing myself at all. I tend to be more consistent throughout my personal brand. This includes my website, portfolio, resume and online social presence. This is primarily to potentially get some freelance work this year.

Obtain 3 Freelance Clients

I’ve been out of the game and working in house for the past few years. I plan on opening my web design experience to helping other people build their business.

Get 1000 Subscribers on my Youtube Channel

I run a gaming channel over at www.youtube.com/thenowgamingzone  It’s a video game channel I run that hasn’t been getting as much love as I’d like it too. With the help of my family, I plan on creating a plan to get to the 1000 sub mark so that I’m able to monetize the channel again.

 

 

i could go on and on, but I figure this should be plenty enough to share with the world. If anybody needs an accountability partner for their design or development needs, then reach out to me on social media

Twitter: https://twitter.com/cliffn

Linkedin: https://www.linkedin.com/in/cliffnowicki/

 

Posted on

Designing a Splash Page in a Few Days

People have side hobbies and that’s pretty cool. My side hobbies include AR, VR, video games and a video game channel on youtube. On occasion I also stream games on mixer with friends or just when I get a new game. One of my favorite series is coming out soon for the Xbox One and that’s Forza Horizon 4. The Horizon series has been my favorite racing games since it’s based around a music festival and you drive in a HUGE open world area over different terrain. I was super stoked about it and even had the Ultimate Edition pre-ordered months ago to make sure I get to play 4 days earlier before it’s official launch.

My excitement didn’t stop there because I knew I was going to stream this game. I just downloaded the free Adobe XD program that I use for work, on my home PC and wanted to practice some site designs. I also wanted to see how our developers used it on a day to day basis after they take it from us designers. So this was my chance to try to design then collect and use XD to develop a site. I decided to create a website splash page announcing that I will be streaming this game and all are welcome to watch! I got started right away with some sketches to see what I wanted and how I wanted it to look. Here are some of the sketches created:

If you were following my on Instagram at https://www.instagram.com/cliffnow/ you got the sneak peeks of it all!

After I had all the sketching done, I broke open Adobe XD and went to town. I tested some ideas out and realized that due to asset issues of finding what I wanted in a good enough quality, I had to make some changes. I also began to look more into the development side of things and realized that there were a few things I was unsure of, or would take more than a day to put it all together. This was meant to be a quick weekend project, and I didn’t want it getting out of hand. Make it simple stupid!

The final design created was this:

 

The final design isn’t that far off from what I developed! You can view the design on my behance here. Once I was finished, I had to decide how to put this together. I wanted quick and simple, so my two choices were to use a quick pre-made grid framework from Bootstrap or Foundation. Why those two? Those were the two frameworks I’m familiar with and I’m not going to “challenge myself” when I need something done in a day. I went with Bootstrap since I’ve used it the most. Since I only needed the grid, the new Bootstrap 4 had a grid only css file, which worked great to keep load speeds at a minimum.

My original idea was to offset items, but then realized that wasn’t going to work for a mobile version. I was able to find some quick solutions to the problems. The process of using Adobe XD’s design spec helped to a point, but I found myself going back to the original XD file for correct sizing between objects which was kind of a pain, new respect for our teams developers. Batching out the images was super fast and easy and I’m glad that’s a feature! It took some tweaking here and there, but I got the images just right.

The next task was to figure out the countdown timer. I looked around for some simple javascript that I would be easily able to edit the CSS for to make it match up with my design. Could I of done it from scratch? Of course! Again though, timing. I could crack open a book or go through some online tutorials OR I could find a script. Not only did I find a script, but I also found one that perfectly matched what I wanted with great documentation. Win win! You can check out the script I used here. The only down side is that I was only able to go to the launch date, and not the time as of this posting. I’m in the process of asking some developer friends to see if there’s quick fix that my feeble javascript brain didn’t understand…or tried to understand at 2am. Bad combo.

Everything looked great on desktop, now it was time to add some media queries to it looked great on the phone. I didn’t have to spend too much time, which was great as it was a super simple page. After I tested on my Chrome browser, I did some testing on Firefox as well as my Pixel phone. Everything laid out nicely and turned out smoothly. I put it out there on the internet, and now it’s time to wait and see if anybody will watch me play Forza Horizon 4 on September 28th, at 9pm.

View the full complete site here.

It was a nice fun exercise in sketching, designing and developing within a few day span. I feel that the move to using Adobe XD for my full design process was not only a smart move, but a good one that helped my workflow rather than using Photoshop to layout a website.

 

Edit: Update 12:50pm. A good developer friend, Teresa, was able to help me solve my countdown clock Javascript timer issue. Thanks again!