u.x.

Introduction to User Experience Design

June 20th, 2017

User experience (UX) design is a relatively new field and only came around with the mass adoption of computers and digital technology. It has evolved over the years and is now an essential part of the digital product development cycle. The core mission of UX is to craft digital experiences that not only empower, but also delight users. In this digital era, innovation never stops and with it more and more opportunities for creating user experiences arise.

The question is how does one get into UX design. Is knowledge of coding essential? Or a degree in design? In reality it doesn’t matter, anyone with a keen eye for detail and a passion to make things better can be a UX designer.

But what is UX? UX is both the end result experience a product offers and a set of methods with which to craft experiences. These methods include various user research techniques, crafting user-flows, layout design, and user testing.

In this article I will give a brief overview of a few concepts that will help define the needs of the users, how to work with and adapt to constraints, what it means to create a story that shapes the experience, the innovation aspect of UX and that good UX comes from a lot of testing and being open to input.

Seeing Through the Users’ Eyes

The most important aspect of UX design is to learn that the ways users interact with a product and the experiences they have with it vary wildly depending on their backgrounds and life situations. In order to create a pleasing user experience considerations of the users age, background, physical location, interests, and of course comfort level with technology, need to be considered and designed around.

Read More

flexboxes

CSS Flexboxes

February 26th, 2017

Today I would like to tell you all about this awesome property that CSS got a while back, but is now finally fully supported by all browsers and should be used by all web designers and developers. This property is called Flexbox or display: flex.

Why should you use it, you might ask. The reality of it is, if you have ever tried to centre something vertically and horizontally in CSS, you know the struggle that it is, and you know how after swearing at the screen for 30 minutes, you’d just end up cheating and setting the pixels manually, cause nothing else works. What if I told you that flexboxes allow you to centre an item within a container with 3 lines of code, and it would consistently work across all browsers? Well it can:

display: flex;
align-items: centre;
justify-content: center;

Flexboxes use the concept of a container and items within it, and uses tools like: justify and align to determine the position of the items within the container. Furthermore, you can easily flip the direction (order) of the items using flex-direction, change the direction from row to column and  grow and shrink the items with just a few lines of code. Its that simple.

I have started using flexboxes at work exclusively, and have not even had to write another "margin: 0 auto" in months! Now I am in the process of fixing up the anime club sites with the same stuff, to make them more robust and the code cleaner and more manageable.

If you want to learn more about this, then here is a link to CSS Tricks, a great website for learning about various interesting css properties and selectors.

Also there is a flexbox game, where you can learn how to align elements in various ways. Unfortunately though, they dont show you the code, but you can work it out from the buttons you are pressing on their UI.

And here is an article (with GIFs), that goes over all the flex box selectors and explains how they work.

▹ or ▿ ?

September 7th, 2016

This title may sound a bit strange, but the question behind it is very serious and has caused numerous debates between UI designers.

When a folder or a menu group is collapsed should the arrow point to the right, or downwards?

This is an example of the arrow point to the right when collapsed and downwards when expanded. However not everyone believes in this standard, so UI designers fight that the arrow should be down when collapsed and up when expanded. As you can see in the article image above, the 2 options are both valid, however option 1 (on the left) has dominated the technology space as Microsoft (with Windows), Apple (in macOS) and pretty much all the Linux OSs all use this notation for folders, groups of contacts, and any other kind of grouped lists.

The web however is a different beast and a lot of designers come from print, so they know how things should work in the real world, but no so much how the standards have been set in computers for the past few decades.

Read More

sass

Web, the SASSy way

July 24th, 2016

I’ve been designing and coding websites for a good 4 years now, but only as a hobby in my spare time, nothing serious or professional. It was all basically just simple HTML DOM together with a CSS file defining the look of my sites. Sometimes I would experiment with certain JS features to have menu bars and various animations, but hat was about it. Last year, when I migrated my blog hosting, I had to learn how to set up a web server from scratch using LAMP. And I did, twice: jamiejakov.lv and utsanime.net. Looking back now thats not a great achievement, especially with all the guides out there, but hey, when you don’t know anything, even something as simple as setting up a LAMP can be hard.

And now I think its time for me to learn more about web programming, about the frameworks that are used, about the nifty things that have been developed to make our lives easier and create intuitive and beautiful user experiences. And the first think I am going to learn is SASS.

What is SASS? Its pretty much CSS on steroids. It allows you to declare variables, nest code, add mixins, inheritance and much more. But why listen to me, when they got a clear guide on all the great features up on their website: SASS-Lang. I am just going through the codecadamy tutorial on SASS and am planing on implementing it in my future AnimeSydney and [email protected] redesigns!

Also it is important to note that SASS is a pre-processor, so the browsers themselves can’t interpret anything form a .scss file. So we must compile the SASS file first, which will transform it into a browser readable .css file. Most text editors for code have plugins for SASS compilation. I, for example, use Coda by Panic.Inc for all my web development and they have a great SASS plugin available for download.

So try it out, see for yourself who much more efficient you will be at coding when you can use variables and inheritance. Happy Coding!

Spotlight Search

June 19th, 2016

If you use keyboard shortcuts, macros and various other workflow automation techniques, then you might consider yourself a power user. However if you have never used Spotlight on macOS and iOS, you are missing out on a great productivity improvement. So what is Spotlight? It is the universal search implementation on Apple platforms. It can search your folders, files, information from within apps like contacts, mail, and even suggestions from the web. But I guess the most used function of Spotlight is to quickly open the application you need. So instead of looking of looking for that one app in Launchpad on your Mac, or numerous screens of your iPhone/iPad, you can just simply launch Spotlight search (cmd+space on macOS, swipe down on home screen on iOS) and start typing the name of the item you are looking for. This can greatly speed up your workflow and just help you find what you are looking for.

Now that you know the basics of Spotlight, here are some advanced tips and tricks (on macOS), which I learned from this article:

  • Cmd + D:  View search term in the built in dictionary app (opens the app).
  • Cmd + L:   Quickly view the term in the dictionary (via Spotlight UI).
  • Cmd + B:   Do a web search in your default browser (opens browser window).
  • Cmd + R:   Open the highlighted results folder in the app which it is in and reveal it in Preview.
  • Cmd + O:   Open the highlighted result in the default program for that filetype.
  • Cmd + I:     Show information about the highlighted result.
  • Hold Cmd:  Show the full path to the highlighted result at the bottom of the spotlight window.

Hope these shortcuts help you improve your workflow and make your life just a bit more productive.

My Home Media Server – PLEX

April 8th, 2016

Continuing on from my previous post about building a home media server, this time, I’ll tell you about a brilliant piece of software called PLEX.

So what is Plex? Its a media player system that automatically organises your media in a very lovely and intuitive interface. So say you got a folder of all your media (iTunes for example) and its jumbled up all over the place. So you would like to easily watch episode 5 of  season 4 of Game of Thrones? Good luck with that, you need to find the folder, then the subfolder wherever it was saved in, find the season, and then the episode. Now imagine that you are off at your  mate’s place and you wanna watch the episode together with him, well then you are out of luck.

Not with Plex. Plex has a number of irreplaceable features:

Read More

My Home Media Server – NAS

April 1st, 2016

Ever since I got my own computer and started watching movies, cartoons and anime, I’ve wanted to have a great collection, and back in the day the only way to do that was to save them on your computer hard drive and view them on that computer. Then I learned about the these really convenient little things called portable (external) HDDs, so I could store my media on that and then view it on a different device, and that worked great… at the time.

Read More

The Apple vs FBI debate

March 16th, 2016

You have probably heard about this case, but for those that haven’t: the FBI have ordered Apple to create a version of iOS that would allow the FBI to access a terrorists smartphone in hopes of finding some valuable clues to the case and possible links to other terrorists. What they affectively want is for Apple to compromise their own security “for this one case” and then “un-compromise” it again. Let that sink in.

Read More

WikiWand Extension

February 13th, 2016

Today I would like to introduce you to a browser extension you never knew you would need, but will not be able to live without. Its called WikiWand and it will change the way you interact with WikipediA forever!

Basically whenever you open a wikipedia.com article, it will automatically style it with high res images, body margination, a great navigation pane on the left, and just general improvements all over. There is a shortcut for searching (ctrl twice), settings for text size/serif font, favourite language options and more. These additions might sound like not that big of a deal, but when combined together, they make for a much more refined wikipedia browsing experience.

So if you use wikipedia a lot, or even once in a while, I would highly recommend you get yourself this extension and enjoy a new way of wiki-ing.

Ringo Juice

JamieJakov Blog 4.0 – りんごジュース

February 1st, 2016

There has been a lot of stuff happening in my life recently – got a new job, moving to a new place, last semester of uni soon, started playing Hearthstone seriously, etc. So I decided it would be a great time to update my blog.

The main thing you will notice is the new theme! I call it りんごジュース (Apple Juice) because its orange and orange juice is delicious (I know that made no sense, but cool things never do). The colour scheme is once again lighter, now with more white and less orange; images are more prominent on posts, cause I really want to show off my great photos; the pages have been renamed and sections moved to more appropriate locations. This opened up potential for a new page which I call Timeline. I have yet to finish coding that page, so bare with me, as it is gonna be completely different from everything else, and thus requires much more time to put together. Also the sidebar is gone, it’s been retired in favour of a fixed top navigation bar. Decided to use a different font as well – PT Sans. (Why this one? Cause its Russian! Also, if you are wondering, Ringo is still around you just need to find her.

Read More