Tag Archives: tubik

ios development interview

From QA to iOS Development: Life Story of the Career Switch.

Switching the career path and changing long-term ambitions is never an easy choice. Still, in many cases this step is feasible, living up the new hopes and professional growth. In the sphere of web/app design and development this sort of situation is, perhaps, even more common than in the others due to dynamic and rocketing progress of information and communication technology in the world. New professions and positions pop up like mushrooms after the rain, opening totally new perspectives and allowing professionals to set new ambitions.

 

Our today’s story is of this kind: Tubik iOS developer Maxim Pedko will share his experience of the career switch from QA engineering and project management to iOS development. Check out the interview and get inspired!

 

iOS developer tubik studio

 

How did you make the decision on your career choice?

 

Actually, I had quite extensive and various experience: before the first step in development, I worked as a QA engineer and project manager. Still, my big dream getting stronger and stronger was to create real products by myself. One day, working over current tasks, I realized that I have to change my life and try something new that will get me closer to my ambition. I had studied the basics of PHP, web development, CMS and it even let me earn something for a living, but didn’t give me real pleasure from my work. I developed simple plugins for CMS WordPress, but I didn’t feel it like the full-scale development as the plugins were focused mainly on correction of existing design according to client’s requirement, not more. That job wasn’t bad, it was just not the one for me as I didn’t get either aesthetic or professional inspiration.

 

Why did you choose Apple as the field for your career growth?

 

I deeply and sincerely fell for iPhones and other products by Apple after their first presentation. That distant day when Steve Jobs presented a new revolutionary buttonless mobile phone with beautiful photorealistic interface, called iPhone, they won me over with their design and usability. Since then, I have been a keen fan of Apple, although unfortunately I didn’t have a chance to get their devices for myself. Certainly, a lot of things have changed since the presentations of the first iPhone, iOS, iPad, yet I am still the supporter of this company products and philosophy.

 

Swift vs Objective-C. Why did you choose Swift?

 

Before I started programming for iOS devices, I had analyzed the well-known and established Objective-C and newer Swift. For me, the issues to consider were the following:

  • Swift is easier readable than Objective-C
  • Swift is easier maintained and supported
  • Swift requires less amount of code
  • Interactive coding is available at Swift Sandbox
  • Swift is the platform for the future, as Apple have outlined their intent of the full switch to this programming language.

 

ios development interview

 

Where does the way of iOS developer start?

 

To start developing iOS applications, first of all you need high motivation and wish to grow professionally. Without the great desire to self-develop and study the field in detail, it’s better not to start, moving yourself to the further search of the domain you are interested in. Starting the career in iOS development, you should be ready to some aspects that won’t let you do it from the very first day. For instance, you won’t be able to code iOS apps without a computer from Apple! You will need Xcode which works only on MacOS.

 

I have tried the software that is argued to enable developers to code for iOS on other operational systems: it took me ages to install it via virtual machines and tune the soft into more or less working condition, still it didn’t work efficiently and heavily overloaded the computer. There were even the moments when I got so frustrated that wanted to throw away my computer through the window and forget it as a nightmare. So, I had to accept the rules of the game that there’s no other way than coding for iOS on MacOS.

 

Another essential thing to mention is that to develop iOS apps you really need only Apple computer still it’s not required to buy all the existing devices like iPhones, iPads, Apple Watches etc. Xcode has simulators of all the devices with which the application will be potentially used so having developed the application for one of them, you can instantly test it on the simulator of the device.

 

ios development glossary

 

Anyway, if you have bought an Apple computer, set up Xcode and are ready to code iOS apps, you will need the reliable source of information, knowledge and practice in studying Swift. There are numerous materials on this topic shared via YouTube, such as video lessons and vlogs; also you will definitely find the text-based sources like blogs and forums for developers, but the most reliable, actual and truthful source of data for you is the official website for Apple developers.  Another useful resource is Swift website  presenting lots of tutorials and practice for studying Swift coding and I would also recommend the interactive course Developing iOS 9 Apps with Swift. No doubt, to keep up-to-date, iOS developer should never miss conferences and presentations  from Apple.

 

What are the other domains of knowledge needed in this sphere?

 

I have to admit that basic knowledge plays the vital role for professional growth in this field. Before you start to learn programming not being a native English speaker, you have to understand that without knowing English solidly you’ll get the experience when the best and the most reliable sources on not only iOS, but also programming in general are shut for you. That’s the reason to constantly improve and practice the language even if you think you know it well.

 

If you don’t own Apple computer working on MacOs, it’s not the reason to get in despair. You have to plan your steps and study everything that you will potentially need in the future. Before starting iOS development, I had studied operations in client-server applications, REST API, basics of OOP, databases, base operators, types of data, — everything that can be studied before starting real practice in coding on Swift.

 

Could you share your real experience that allows considering the possible risks?

 

As I’ve mentioned, to get real experience you will obviously need an Apple computer. If you don’t have it, try asking your friends or finding hubs where you’ll be able to try actual programming on Mac. It’s vital to understand if you really want to continue your professional way in the sphere as, you see, the start needs some basic capital, at least in the form of quite expensive hardware.

 

When you start getting real experience in development, don’t be afraid to start coding for real simple projects and get precious practice of both development and communication with customers. That’s important to make your name in this highly competitive sphere and open new perspectives for complex and interesting projects in the future.

 

If by any reason you are afraid of freelance platforms or frightened to be cheated, working over your own projects you should carefully plan the tasks and set the deadlines. There are many good sources where you can buy lessons or get them free, and there you are provided with the practical tasks which you are obliged to complete. You have to be persistent, try and study, be always open to new knowledge in development, — this is the only productive way to the day when you start creating efficiently working code.

 

As for me, to get the knowledge and practice of iOS development without having my own Apple computer, I did my best to get enrolled to Tubik Studio as an intern. To get more practice and have more hours of effective studying, I took the risky step having left my previous workplace and devoting the maximum of time to progress in what I saw my future. After two month the risk paid off: I got an offer of the full-time developer’s position in iOS department. Moreover, I’ve got the precious experience of working in team of professionals that opens the door to more complex, sophisticated and significant projects, shut for freelancers working solo.

 

tubik studio developers testing

 

And my message to those who start this way is the following: it’s not enough to buy the original computer, it’s not enough to narrowly focus on one aspect of the job without studying the others. It’s vital to realize that whatever is the sphere of development you see yourself in, you should get filled with new knowledge on a daily basis, and only persistence, hard work and self-education will bring you to being a productive and highly-skilled developer.


Welcome to read more articles on iOS and web development

copy content in user interfaces UI design

Tips on Applying Copy Content in User Interfaces

Words are a powerful weapon. They can bring both success and failure depending on how you put them together. They can motivate or confuse, strengthen or weaken, call or push away. That’s why designing a digital product, it’s vital to remember that high-quality copy is as essential as the details of visual performance.

 

In one of our previous articles, we’ve already considered the big role of textual content in UI design, covering the definition of copy and its functions in graphic user interfaces. Important point to remember from it here is the words cannot be fully replaced with the graphics whatever amazing, high-quality and professional they are going to be. Efficient and engaging copy content in user interfaces is defined by two equally significant basic criteria: the quality of writing and the appropriate look. Words and visual elements should mutually support each other, exist in harmony and provide organic consistency. So, every single piece of copy should be thoughtfully analyzed and created in a way corresponding to general design concept and enhancing positive user experience via successful interaction. 

 

Could you imagine an interface containing badly-written copy with the same type sizes, fonts, and colors? The chances are big that it would cost users great effort to solve their problems or get needed information with the product, so they would simply choose other product that is more user-friendly and less time-consuming. Let’s check what types of copy content designers and copywriters deal with creating websites or mobile applications, and think over the points needing special attention.

 

copywriting tips

 

Visual hierarchy

 

To organize content in interfaces clearly for users, designers apply a well-known technique called visual hierarchy. It is initially based on Gestalt psychological theory and its main goal is to present the content on the carrier, be it a book page or poster, web page or mobile screen, in such a way that users can understand the level of importance for each element. It activates the ability of brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc. In the aspect of creating copy content for web pages and mobile app screens, there are two aspects important to consider: page scanning patterns and typographic hierarchy. 

 

Understanding the importance of visual performance and readability of copy in digital products and its impact on user experience, numerous usability experts explore this issue comprehensively and collect statistics providing valuable data for designers. Lots of studies have shown that before reading a web page people scan it to get a sense of whether they are interested. According to different studies, including the publications by Nielsen Norman Group as one of the pioneers of this field, UXPin team and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns.

 

F-pattern is referred to as the most common eye-scanning pattern, especially for web pages with big amount of content. A user first scans a horizontal line on the top of the screen, then moves down the page a bit and reads across the horizontal line which usually covers a shorter area. And the last one is a vertical line down on the left side of the copy where they look for keywords in the paragraphs’ initial sentences. It usually occurs on text-heavy pages like blogs, news platforms, thematic editorials etc. How could designers employ this knowledge? First of all, placing the information of key importance or core interest on the most scanned spots and trying to use short catching headlines and bold headers to draw users’ attention.

 

Z-pattern is applied to pages which are not so heavily concentrated on copy. A user first scans across the top of the page starting from the top left corner, looking for important information, and then goes down to the opposite corner at a diagonal, finishing with the horizontal line at the bottom of the page, again from left to right. This is a typical model of scanning for landing pages or websites not loaded with copy and not requiring scrolling down the page, which means that all the core data is visible in the pre-scroll area. In this case, designers place core information in the spots of highest attention, such as top corners, and put the other points requiring attention along the top and bottom lines.

 

website design tubik studio

The Big Landscape

 

Here we can see the design concept for a website which presents the online magazine «The Big Landscape». The interface is minimalist following the principles of clear visual hierarchy, good readability, intuitive navigation and aesthetic pleasure from visual perception. The designer followed Z-scanning-pattern placing vital elements such as the logo and CTA button in the corners of the top line while the bottom line informs users about the website creators and provides with the ability to contact via social networks instantly. 

 

Typographic hierarchy

 

Typographic hierarchy is a system that organizes copy content in the best way for users’ perception first of all via modifications and combination of types and fonts. It is aimed at creating contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The contrast is created by regulating type fonts, sizes, and colors as well as their placement and alignment. Typographic hierarchy is presented with common types of copy content used in UI design.

 

Headlines

 

A headline is the first thing that users should see in any interface. It is a large, bold word or phrase which transfers and emphasizes the core informative message on the page. It’s essential for headlines to be catchy and short, so that they could draw users’ attention, and meaningful in order to inform users about the theme and benefits of the content of the page or screen. According to the research published by one of the popular social media sharing platforms Buffer, the ideal length of the headline is 6 words; Jacob Nielsen provides the study at which shows that headlines of 5-6 work effectively, not less than extensive headlines presenting a full sentence. 

 

Another point to remember: it’s good when headline is visually supported by other elements on the page or screen, still it also should be understandable and meaningful without such context.

 

website design for photographers

Photography Workshops 

 

Here is the landing page for a company organizing photo tours and workshops for photographers. Functional and stylish minimalism is the basic approach behind the web interface. The bold headline is placed on the left which makes it noticeable but the major accent still remains on the head picture.

 

landing page UI design tubik studio

Website on cooking seafood

 

tubik_studio_website_ui_bakery

Vinny’s Bakery

 

These are two examples of the websites concentrated on providing content around the same theme — food. They both have minimalist design with centrally located headlines. However, the headlines differ with the message they send to the users as well as nature of the websites differs in its core: one of them stimulates uniting users around the action (cooking seafood) while the other is focused in presenting the goods (bread and bakery). The first example presents a website collecting recipes of meals with seafood from all over the world, so its headline contains a CTA with a key element — action verb in imperative form “Let’s cook!”, which dynamically tunes users into the activity. On the other hand, we can see another concept — a website for a small bakery selling homemade bread. The lyrical headline makes users feel warm, sets strong positive emotional connection and lets them instantly imagine the smell of bakery products which are sold via the website.

 

Subheaders

 

It’s impossible to put all the significant information in a headline, that’s why you need subheaders. These are brief, concise and catchy phrases that are similar to headlines, although they typically mark out the key points in separate sections while headlines summarize the theme or message of the whole page. Following the principles of visual hierarchy, fonts chosen for subheaders are usually smaller than for headlines but bigger than the rest of the copy. Traditionally, they are also bold and short. 

 

Landing Page Animation Tubik Studio

Organic — landing page

 

tubikstudio travel gear landing

Travel Gear Landing Page

 

Subheaders play a big role in landing page design. These two concepts for landing pages above are good examples of how subheaders inform users about the data provided in different sections. Bold subheaders point out the main idea of body copy helping users find the information they need easily and quickly.

 

Body copy

 

Body copy is usually a part of text presenting the description or some essential information placed in a compact block, usually under a subheader or a headline. Fonts are thinner and smaller than in headlines and subheaders, sometimes they are presented in italic for even more prominent visual contrast.

 

There is no unified opinion about the best length of body copy. Some content creators support the approach that long copy is more informative and serious-looking, while the others claim that only short copy is effective because Internet users never want to read too much. Here in Tubik we support the approach that the length of effective and user-friendly copy depends directly on target audience: users as well as products are incredibly different, they have diverse preferences, goals and wishes when search for web resources or mobile apps. Both long and short copy have their own pros and cons, and each of them can be appropriate than depending on target audience of the product and its conversion goals.

 

Short copy is often effective for mobile interfaces and landing pages: their users are usually keen to see concise and highly informative copy content. Moreover, mobile interfaces have limited amount of space, so too much copy won’t look nice and will demand additional effort for reading, which can be the reason for poor user experience. Long copy is good for web resources that provide users with complex information on specific topics as well as presentation of the products which aren’t well-known for users and need additional informative support.

 

website design UI

Architecture Firm

 

Here is the example of a web page where long copy is useful. It’s a design concept featuring a website for architectural bureau following minimalistic and functional approach in creative practice and demonstrating it via website visual performance. The aim of such websites is to tell the company’s story, present professional level and achievements, so detailed copy works efficiently in this case.

 

tubik studio web ui design

Birds of Paradise Encyclopedia

 

This design concept also presents a website deeply based on copy: it’s an educational project setting the online encyclopedia about specific family of birds. Although it contains great amount of information presented in text, this type of content is logically divided into many brief and concentrated copy blocks supported with prominent headlines as well as bright and catchy illustrations. This approach makes interaction with the website more dynamic which is especially effective for a teenage part of target readers that presumably often perceive encyclopedias as boring stuff.

 

tubik toonie help screens interaction

Toonie Alarm tutorial

 

As we mentioned above, short copy is useful for mobile interfaces since they are limited in space. The interface of brief tutorial for Toonie Alarm app demonstrates the how copy is divided into short blocks in order to leave enough «air» on the screen and make copy readable.

 

Call-to-action elements with copy

 

The core elements that make UI interactive are those which contain a call-to-action (CTA). Some call-to-action elements may be represented with icons that don’t require copy using widely and instantly recognized icons such as a telephone receiver for a phone call or the envelope for mail. However, in cases when the image of an icon is not so obvious or can be misleading, it is more effective to use double scheme, when the icon, button, or link is supported with the copy.

 

The copy for call-to-action elements consists of one or two words or a linked phrase in a body copy. Verbs in the imperative form are one of the frequently applied mechanisms of engaging users.  Designers are recommended to use various techniques of creating contrast, first of all via color, in CTA elements, so that they could stand out in the layout and draw user’s attention quickly.

 

tubikstudio swiftybeaver landing

Landing page for SwiftyBeaver

 

travel agency website UI

Travel Agency Website

 

The CTA buttons on these two landing pages are both centrally located, although they employ different types of copy. The first one consists of the four-word-phrase, while the other applies only one word. However, both look good and work effectively since they both contain the verb in the imperative form and inform target audience about appropriate action solving their potential task on this website.

 

good_sign_app_tubikstudio

Good Sign App Concept 

 

This is a concept for an unusual Good Sign app that gives you a new sign to look for, and you make your wish every time you see it in real life. Such an extraordinary app has also unusual CTA buttons like “Make a wish”.

 

book swap app tubik studio

Book Swap App

 

There’s no need to create CTA buttons exceptionally in bright colors — their main task is to be easily noticeable in the general layout. If the interface is bright and colorful, why don’t you make the contrast with light background which will make bright copy even more prominent, like in a concept for the Book Swap app above?

 

Captions

 

Caption is the short text under a picture describing its content. In web interfaces fonts are usually small and often italic, and in mobile interfaces the sizes of fonts depend on a size of a picture.

 

gym landing page fragment

Gym Landing Page

 

Here is a concept for the landing page of a gym. The captions here have bold fonts that make them easy to read. They are shown only when the picture is hovered which makes interaction more engaging for the users.

 

Points to consider

 

All in all, creating a quality copy content isn’t that hard if you keep in mind the typographic hierarchy principles. And here are some basic tips of presenting the copy:

 

  • Create catchy headlines. They draw users’ attention and often become the point of decision whether user continues interaction with the page or bounces it.
  • Make headlines short, but keep them highly informative. 
  • Subheaders relate to separate section, so they guide users through the content in the interface.
  • Use brief concise copy for mobile interfaces and landing pages.
  • Consider using long copy for web resources aimed at providing informative content.
  • Use verbs in the imperative form to encourage people to actions.
  • Use contrast colors for call-to-action elements, so that they could draw user’s attention more effectively. However, don’t forget to test readability of the text on the CTA elements: it has a crucial impact on usability and conversion rates.
  • A caption should preferably describe or add the data that isn’t obvious from the image.
  • Give strong preference to present tenses in captions.
  • Always ground your solutions on preliminary user research and don’t neglect testing different options.

 

Recommended reading

 

Here is the collection of recommended articles for further reading in case you would like to read more on the theme.

 

The 5 pillars of visual hierarchy in Web design

6 principles of visual hierarchy for designers

On Visual Hierarchy

F-Shaped Pattern For Reading Web Content

3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern

Effective Writing For Your UI: Things to Avoid

The Ideal Length of Everything Online, Backed by Research

Copywriting in UI. Words that Make Design Go Round.

 

Our next publication will continue the comprehensive theme of visual hierarchy and its effective practices in web and mobile interfaces. Don’t miss!


 

Welcome to see the designs by Tubik Studio on Dribbble and Behance

year in review tubik studio design

Tubik Studio 2016. Year in Review.

Bright, fast and furious, the year 2016 is over. For Tubik Studio it was dynamic, bright, rich in meetings, shots, interesting projects and non-stop professional growth. The company got bigger, more experienced and diverse. Traditionally, we start every new stage of our workflow remembering the most significant points of what has already been done, and today won’t be an exception. Let’s take a moment to turn back for a while and remember some outstanding things that marked 2016 for our team.

 

Being active on Dribbble, we published over 170 shots. Welcome to look through the set of top positions in the categories of UI/UX design, animation, branding and illustration. Following the links, you will be able to see all their detailed descriptions and full-size attachments.

 

Top Twenty UI/UX shots

 

tubik studio web design

Page 404

 

tubikstudio travel gear landing

Travel Gear Landing Page

 

tubikstudio library widget

Library Widget

 

tubikstudio ui webdesign

Comics Shop Home Page

 

graphic design tutorial tubik studio

Singify App Tutorial

 

Christmas graphic design tubik studio

Magic Christmas App

 

tubikstudio homepage design

Event Agency Webpage

web design UI concept tubik studio

The Big Landscape

 

tubik_studio_website_ui_bakery

Vinny’s Bakery

 

health care app UI design

Health Care App

 

website design tubik studio

Adventure Agency Website

 

landing page UI design tubik studio

Website on cooking seafood

 

tubikstudio graphic design illustration

Ryiadh Tour Guide

 

tubik studio design

Weather App Concept

 

mobile app design tubik studio

Moneywise App

 

travel app tutorial tubik studio

Travel App Tutorial

 

snake battle app UI design

Snake Battle

 

toonie alarm UI design

Toonie Alarm

 

online magazine design tubik studio

Daily Bugle Online Magazine

 

book swap app tubik studio

Book Swap App

 

Top Twenty Animated shots

 

tubik studio web ui design

Birds of Paradise Encyclopedia

 

landing page animation Tubik studio

Magic.co landing page animation

 

 

tubik_studio_book_swap

Book Swap App

 

Landing Page Animation Tubik Studio

Organic — landing page animation

 

tubik studio healthy food animation

Healthy Food App 

 

tubik studio application recipes and cooking

Recipes App

 

tubikstudio ui design

BuonApp

 

website design UI

Architecture Firm

 

Tubik studio UI animation

Museu

tubik studio ice ui website

Ice Website

 

tubikstudio ui animation website design

Bjorn Website

 

ui animation cafe app tubikstudio

Cafe Coupon App

 

apple even animation tubik studio

Apple Event Animated Graphics

 

gym landing page concept by Tubik

Gym Landing Page

 

tubik studio animated illustration

Lowrider

 

tubik_toonie_help_screens_interaction

Toonie Alarm tutorial

 

animation design

Night Run Animation

 

Contact List Concept Scrolls Tubik

Contact List Concept

 

animated tutorial

Social Network Tutorial

 

motion design tubik studio

Rocket Animation

 

Top Ten Branding shots

 

business cards design

Deetu Business Cards

 

logo design music app tubik studio

Switch-up logo

 

logo design tubik studio

fOxygenic logo

 

andre logo design tubik studio

Andre logo 

 

logo design branding tubik

Pickitout logo

 

lion browser logo tubik studio

Lion browser logo icon

 

snake battle logo for game app

Snake Battle Logo

horsy logo design branding

Horsy Logo

 

logo design by Tubik studio

Elephun logo

 

logo animation tubik studio

Realli logo

 

Top Ten Illustration shots

 

Rio 2016 Illustration tubik studio

Rio 2016

 

graphic design illustration tubik studio

Californication Bus

 

tubikstudio space wallpapers

Free Space Wallpapers

 

character illustration tubik studio

Indian Dreamcatcher

 

Christmas graphic design tubik studio

Christmas Spirit Illustration

 

game character design tubik studio

Ulf the Viking

 

tubik illustration jazz tales book

Tales of the Jazz Age Book Cover

 

tubik studio illustration graphic design

Muscles Magazine

 

star-wars-rogue-one_tubik_studio_illustration

Star Wars Rogue One Illustration

 

badges illustration tubik studio

PukaPal Badges

 

Top Ten Articles in Tubik Blog

 

2016 brought a great deal of new posts in Tubik Blog to share our ideas, case studies and experience. Here is the list of some articles which got shared and read by big number of readers.

 

tubik blog article

Visual Perception: Icons vs Copy in UI

 

Tubik Studio Interface Animation

UI Animation: Microinteraction for Macroresult

 

toonie alarm time picker

The Ultimate Guide to Creating a Mobile Application

 

book swap app design

UI Animation: Eye-Pleasing, Problem-Solving.

 

lion browser logo tubik studio

Logo Design: Creative Stages.

 

tubikstudio ui ux design

UI/UX Glossary: Steps to Usability.

 

web design tubik studio

Home Sweet Home. Strategies of Home Page Design.

 

tubik studio ui design dark

Dark Side of UI: Benefits of Dark Background.

 

ios-developers-tubik-studio

Review of Popular Trends and Tools for Developers in 2016

 

UI design trends

Review of Popular Design Trends for Interfaces in 2016

 

Top Five Tubik News

 

Growing diversity of services

In 2016 we formed the full team of specialists able to create and maintain a digital product from scratch to release: today we are a comprehensive full-cycle digital agency, with experienced specialists in the domains of branding, UI/UX design for websites and applications, graphic design of any complexity, motion design, iOS and web-development, QA testing.

 

collaboration-process-app-design

 

Variety of outsource projects

2016 brought us the great bunch of outsource design and development projects for diversity of businesses and organizations. They established broad experience of collaboration with different customers, including big and well-known clients. One of the latest projects of 2016 was a «year-in-review» video for Opera.

 

 

In-house iOS application: Toonie Alarm

In 2016, to get closer to our outsource clients, we have set the purpose to create in-house studio products helpful for their target audience and adding some social value as well as giving us comprehensive experience of full path for creating and promoting digital products. In the domain of iOS app design, the product created and released by Tubik in 2016 is Toonie Alarm, entertaining and funny free alarm app for iPhones rewarding users for waking up with cute stickers. 

 


 

In-house content project: Design4Users

Design4Users is a blog devoted to diverse design issues solving users’ problems. It is organized via the basic categories such as «Branding» «Product» «Print» and «UI/UX» and plenty of more detailed tags in the mentioned domains. This resource was started with the aim to provide designers, customers and all those who are interested in this sphere of human activity with a wide variety of useful and interesting content supported with attractive and functional design. The blog is designed, developed and curated fully by Tubik studio team.

 

design4users blog

 

Free e-books by Tubik team

Additional big news was the start of Tubik Magazine, the set of free e-books from us about different aspects, approaches and tips on design and development. The first issue called Design for Business presented a variety of business points and terms important to consider for designers working over goal-centered design for companies and brands. The second ebook called Logo design was devoted to creative stages and strategies of efficient logo design. Both books are supported with practical cases. Welcome to read them or download totally for free.

 

tubik studio free ebook design for business

 

Bright moments of work, rest and creative search were traditionally shared with our followers on studio Instagram page. No doubt, we also didn’t miss the chance to share our ideas, news, tips and experience via Medium and Quora as well as kept everyone updated with studio news via Twitter, FacebookTumblr and Flipboard.

 

new-year-photo

 

Even this quite brief review makes obvious that 2016 was full of everything for our team. And we are ready for new challenges, perspectives and projects in 2017 which will definitely open many new unforgettable creative pages. 

 

 

Warm greetings for everyone from Tubik Studio, we wish you amazing and successful year 2017!

video speeches for ui ux designers

15 Must-See Expert Speeches for UI/UX Designers

The year is counting its last days. As we could see in the article devoted to design trends in 2016, it’s been a bright, dynamic and diverse year for global design community. In addition to new trends and interesting digital products, it strengthened one of the core features of creative and career growth in the field of UI/UX design for digital products: to be highly professional and flexible for new challenges of the modern high technology, designers have to learn and improve themselves in non-stop mode. 

 

The domain of user experience and user interface design is so young, but already well-established: that’s amazing to see how many people, who started their career when the positions of UI and UX designers didn’t even exist in the list of specialities of higher educational institutions, now have grown into experts able to open the stunning area of knowledge and practice. And that’s a real luck for professionals all over the world to be able to share their findings via both real and online conferences with a view to getting the global design community stronger and more flexible for the sake of creating user-friendly problem-solving problems.

 

Today we would like to share and recommend you the collection of videos featuring deep and informative speeches from recognized experts in the sphere of creating digital products. They are devoted to different aspects of design for users and will definitely bring helpful and useful professional tips to UI/UX designers working over websites and mobile applications. So, enjoy watching, absorb knowledge and get inspired!

 

Hooked: How to Build Habit-Forming Products

by Nir Eyal

 

 

Designing Meaningful Animation

by Val Head

 

 

The Top 10 Things You Need to Know about Perception

by Susan Weinschenk

 

 

Designing Emotional Experiences

by Aarron Walter

 

 

Mind tricks & 7 Secrets of Behavioural Economics for UX Designer

by Lanny Geffen

 

 

How product design can change the world

by Christiaan Maats

 

 

How to manage for collective creativity

by Linda Hill

 

 

The complex relationship between data and design in UX

by Rochelle King

 

 

The art of innovation

by Guy Kawasaki

 

 

Why UX is not only the Responsibility of the UX’er

by Janne Jul Jensen

 

 

The Cognitive Abilities of Human Beings — Why Some Things are so Darn Hard!

by Janne Jul Jensen

 

 

Building a Winning UX Strategy Using the Kano Model

by Jared Spool

 

 

User eXperience

by Jesse James Garrett

 

 

Designing Better Conversations

by Justin Davis

 

 

Empathy: your secret weapon in designing for the web

by Nathalie Nahai

 


Originally collected for Design4Users

Welcome to check out 20 TED-talks for Designers

toonie alarm UI design

Case Study: Toonie. UI Animation Development.

In most cases, when users deal with animation in the interface, it takes short seconds and feels as natural as a breath. Being far from design and development routine, it’s almost impossible to imagine that these brief and simple interactions take long hours of thorough work presenting mix of science and art. 

 

In our previous articles we had numerous chances to show you diverse UI animations solving users’ problems and enhancing usability, still they were mostly presented in design perspective. Today’s  case study will set the link between design and development for iOS mobile applications: it will show you collaboration of UI designers, motion designers and iOS developers working over animation for Toonie Alarm. Previous case studies already let you see the creative process for user interface and mascot design, but this time you will come along step-by-step guide on how animation was created for the app. 

 

Time Picker animation

 

Time picker in the alarm application is actually the core part of interaction with the app and the primary element at which motion design and development play the vital role for establishing both usability and visual harmony. Let’s see how science, calculations and code are able to transform into beauty and style.

 

toonie alarm UI animation

 

All the content of animation is placed on custom subclass UIView, for this case we call it AnimatedDayView.

 

layers_scheme toonie-ui-animation

 

The bottom layer is Infinite UIScrollView (1 on the scheme above). It is the endless scroll view that includes the copies of the image below.

 

toonie scroll animation

 

There are numerous ways of realization for endless scroll. The main idea of replacement in scroll view is to recalculate the size of the scroll view and replace the invisible previous image showing the new one and adding the one for the future.

 

In the case of animated time picker for Toonie, we took the starting point as 6 AM, therefore the middle point is 6 PM and the ending point is 6 AM of the next day.

 

The next layer is Stars UIImageView (2). This UIImageView is added over the scroll view and goes round its centre; during this process the Alpha of the layer is changed. It means that in the daytime it is transparent while in the evening time it gradually appears.

 

stars_ui-view_scroll_animation

 

The next layer is CALayer for the sun and the moon— SunMoonBackgroundLayer. It isn’t seen on the scheme as it has the same size as AnimatedDayView. It also rotates around its centre which is below the visible frame of the screen (5).

 

On the SunMoonBackgroundLayer, there are two more layers — for the moon (3) and the sun (4). The layer of the moon rotates to the same angle as SunMoonBackgroundLayer but in the opposite direction. The sun rotates to the higher number of radians.

 

The issue of great importance here was to thoroughly calculate at which number of degrees should each layer be rotated and how far should the scroll go on. The scroll presents the easiest part. The input variable is always time, that is the hour and minutes which user chose on UIDatePicker. With this data, it’s quite simple to calculate the scroll view shifting. Initially it will be zero, which in our case is equal to the time of 6 AM as we set above. Imagine that user has picked the time 9.10 AM. We can understand which number of pixel the view has to shift down or up when we calculate the difference of the time in minutes (190 minutes) and transforming them into pixels. All the scroll ground presents 24 hours, so its height presents 24 hours, therefore 1 minute=image_height/minutes_per_day (60*24). Knowing the value of 1 minute, it’s not difficult to calculate how many pixels are set into 190 minutes. The only thing left to do is to move the scroll on the required number of pixels, which can be also negative in cases when the new time is less than the previous setting.

 

The next important parameter is Alpha of the stars. It can be calculated with understanding at which particular place on the background image we are at the current position. It means that at 6 AM in the top part of the image the stars should have Alpha 0 value because the morning starts. And the stars are ignored, aka kept in Alpha 0, up to 6 PM, and then Alpha value should be gradually increasing so that at midnight Alpha reached 1. The calculation of dynamics and intensity here can be different depending on desired visual effect. The core thing is that we have the basic parameter which we can rely on: the current position on the background image. And it can be easily calculated knowing the time set by the user. With alteration of Alpha motion, attractive visual performance can be effectively reached.

 

To calculate the angle of rotation, we take 360 degrees for 24 hours. So, 0 degree = 6 AM. We calculate the difference in minutes, find the number of degrees per minute and set the degrees required for shifting.

 

Another element of animation is clouds. They appear due to NSTimer. It adds one of the graphic variants for clouds (the app uses three graphic versions) with random coordinate of Alpha (transparency) beyond the limits of the screen on the right side. After that animation of movement (changing the centre) starts from right to left. The timer is launched with the random interval.  After the animation is finished, the cloud is gone.

 

toonie alarm time picker

 

Sun switch

 

Another piece of animation that required attention and creativity was the switch on the Alarm Screen, the actual element of interaction showing that the alarm is set and active or not. Design solution supporting general visual performance of the app was to make the toggle look like the animated sun when alarm was in the active position.

 

toonie switch UI animation

 

Looking over the accomplishment of the presented motion via code, we see that this is the UIView which contains several layers.

 

toonie-ui-switch_animation

 

The first layer is the background of the hole in the switch (1) which has a rectangular shape. Above it, there is the circle — the toggle of the switch (2) which is the centre of the sun. It can move leftwards or rightwards. Another layer is the sun rays (3). They are set as the separate layer because they have the endless animation of rotation.

 

When the switch is off, the rays change their Alpha to 0 and animation stops. Over all the mentioned layers, the largest layer is placed which is the background of the switch (4). This is also the rectangular layer which has a mask CAShapeLayer drawn with two UIBezierPaths.

 

 

The mask cuts off the layer of the required shape and switch gets a look of the final view. For interactive controlling, two Gesture Recognizers are added: UITapGestureRecognizer for pushing and UIPanGestureRecognized for pulling the toggle.

 

This practical case shows that making animation which will realize its problem-solving potential looking attractive and natural is a demanding task requiring thoughtful approach and collaboration of designers and developers for users’ sake. If you want to test everything described above in real interaction, just set Toonie and see how it works. And don’t miss new cases telling more stories of creative process.


Welcome to set up Toonie Alarm via App Store

Welcome to read case studies about user interface design and mascot design for Toonie Alarm

Welcome to see the designs by Tubik Studio on Dribbble and Behance

ruby on rails web development

Ruby on Rails Development: Benefits and Pitfalls.

Any driver in the world knows: it doesn’t matter how powerful, innovative and high-tech is your vehicle if you have no chance to try it on the good road. This small everyday situation easily shows that lots of things, concepts and activities are deeply interconnected and mutually influence each other. In digital design and development it works the same way: there’s a huge lot of factors having an impact on final result. Bad design will spoil well-written code as well as badly developed code can bury the most sophisticated design solutions. Every side plays its big role in the final outcome which should present a user-friendly product.

 

Earlier we have already given closer insights into the definition, processes and tools for web development. Today’s post is going to continue the theme presenting considerations on a particular tool for web development Ruby on Rails and reviewing its benefits as well as possible pitfalls that need to be taken into account.

 

Brief background

 

Let’s start with a tiny bit of history. Ruby is dynamic, object-oriented, open source programming language with a focus on simplicity and productivity, created by Yukihiro “Matz” Matsumoto and first released in 1990s. It powers famous websites such as original version of Twitter, Hulu, Living Social, Basecamp etc. Many companies use Ruby in some capacity: BBW, Cisco, CNET, IBM, JP Morgan, NASA, and Yahoo. Moreover, Ruby has framework which supports high level of flexibility for developer in the process of creating code for particular aims.

 

“Ruby is named after the precious gemstone; it’s not an abbreviation of anything. When I started the language project, I was joking with a friend that the project must be code-named after a gemstone’s name (àla Perl). So my friend came up with «ruby». It’s a short name for a beautiful and highly valued stone. So I picked up that name, and it eventually became the official name of the language.” said Yukihiro «Matz» Matsumoto, the creator of Ruby, in his interview about the roots of the programming language.

 

Ruby on Rails is an open-source web application framework for the Ruby programming language optimized for programmers’ sustainable productivity. David Heinemeier Hansson extracted Ruby on Rails from his work on the project management tool Basecamp at the web application company also called Basecamp. Hansson first released Rails as open source in July 2004. Major brands like Amazon and eBay even have Rails projects.

 

“Rails (Ruby on Rails) was extracted from my work on Basecamp—a project collaboration tool from 37signals. So it was motivated by needs, not predictions. And I believe that’s a big part of why we’re currently enjoying such success. I didn’t try to imagine what some programmers might need for a fantasy job. I just built what I needed to get my work done with a smile.” says another interviewee David Heinemeier Hansson, the creator of Ruby on Rails.

 

ruby on rails web development article

 

What is Ruby on Rails?

 

Ruby on Rails often just called “Rails” is a development tool to give web developers libraries providing structure for all the code they write. Actually, it is a server-side web app framework that extends the Ruby programming language. Ruby presents the operating language for Rails the same way as PHP does for Symfony and Zend or Java does for Struts. Rails combines Ruby programming language with HTML, CSS, and JavaScript to create a web app. This framework uses Ruby to dynamically assemble HTML, CSS, and JavaScript files. Rails helps developers to build websites and web apps abstracting and simplifying common repetitive tasks.

 

Rails apps operate upon a model–view–controller (MVC) pattern. Many other web frameworks use this pattern, such as AngularJS (JavaScript), Django (Python) and CakePHP (PHP).This means that the apps are divided into three parts: models, views and controllers. These components have the following roles:

 

Models. They are used to represent forms of data used by the app and contain the logic to manipulate and retrieve that data. In Rails, a model is represented as a class. These forms of data are not low-level like strings or arrays.

 

Views. They are the templates (typically formed of a mix HTML and Ruby code). Views are used to build up the data that users of web app see in their browsers or through other clients. They can be rendered as HTML for web browsers, XML, RSS or other formats.

 

Controllers. Controllers provide the logic that binds together models (their associated data) and views. They process input, call methods and deliver data to the views. In Rails, controllers contain methods known as actions that, generally, represent each action relevant to the controller, such as “show”, “delete”, “view”, etc. The framework can be used with various operating systems such as Windows, Mac OS X and Linux; various databases such as SQLite, MySQL, PostgreSQL and others; various web servers such as Apache, Nginx, etc.

 

Talking about operations via the platform, developers usually mention several core principles. Among the main ones, convention over configuration (CoC) should be mentioned. It means that developers don’t have to spend a lot of time configuring files in order to get setup, Rails comes with a set of conventions which help speed up development.

 

Another important principle of software development in Rails is don’t repeat yourself (DRY). It encourages developers not to make duplications in their code and isolate functionality in small functions or files. The principle helps to make code modular, easier to understand, read and debug. When code is duplicated, the outcome becomes more complex, making it more difficult to maintain and more vulnerable to bugs.

 

Ruby on Rails uses Representational State Transfer (REST) architecture that rests around the relations between the client and the server. The architecture helps to create logic around the app and code that developers find highly intuitive and functional.

 

Another key feature is RubyGems, a package manager that makes it easy to create and share software libraries (“gems”) extending Ruby. RubyGems provides reliable and simple system to install “gems”. Anyone can upload them to the central RubyGems website, making the “gem” immediately available for installation by others. The RubyGems website is where developers obtain the most recent version of Rails.

 

ruby on rails web development

 

Benefits and drawbacks of Rails

 

As well as any tool or software, Ruby on Rails has its strong sides and pitfalls that need to be considered. Let’s briefly review both aspects on the basis of various feedback from developers.

 

Benefits for developers on Ruby on Rails

 

Large Community. Generally, Rails is more than development tool, it is also large community. The members share their works, often use the same tools, and support each other. The informal community provides diversity of jobs, recruiters, meetups, conferences, examples of businesses building websites with Rails, and clients funding startups. It is no surprise that Rails is popular on social coding resource Github. This aspect is particularly helpful for beginners.

 

Variety of gems. “Gem” is the software package that contains a package Ruby app or library. Commonly it is used to extend or modify functionality in Ruby apps. Some “gems” provide command line utilities to help automate tasks and speed up developer`s work. They are all publicly available at RubyGems.

 

Cost-effective. The process of building functionality with Rails is fast because it has the collection of open source code available within the community and set of conventions. Ruby on Rails also runs on a free operating system and works with mostly free databases and web servers. These features provide less number of working hours, quick development process and low overall cost.

 

Code Quality. Rails uses Ruby programming language whose code has a high level of readability. This aspect increases productivity with the lower need to write out separate documentation or comments, making it easier for other developers to pick up existing projects.

 

Tester’s perspective. Rails has been developed with a focus on testing and has good built-in testing frameworks.

 

Diversity of tools. Rails provides fantastic variety of tools that help developers to deliver more features in less time. For example, it has a standard structure for different web apps in which all the common patterns are are available for programmers.

 

Flexibility. It is one of the biggest pros of using Ruby on Rails. For example, Rails interacts perfectly with technologies and frameworks like AngularJS. This factor offers developers opportunity to separate layers of the app and use multiple technologies.

 

web development ruby on rails

 

Potential Ruby on Rails problems and limitations

 

Performance. Some developers complain that Rails apps are not as fast as Java or C. The statement is generally true, but for the majority of apps it is fast enough. Rails web app may become a little slow and bloated when it is large although a high-skilled programmer has the means to tune the performance up whenever it is necessary. There is also the option of running the app under JRuby, so it will show the same performance characteristics as Java.

 

Hosting Issues. Not all website hosts can support Rails. The main reason is that Rails can be more resource intensive than PHP, a fact which deters some providers. Alternatively, there is a number of hosts (Virtual Private Servers) such as Amazon EC2, EngineYard, Linode or Rackspace, which can satisfy Rails developers’ needs.

 

Popularity. The number of Rails developers is growing year by year as more people switch to it from other programming languages. Yet, Rails is still not as popular as Java and PHP. Probably, one of the reasons for this is that the language is relatively difficult to learn especially compared to PHP. However, one of the main differences between the Rails and others in this aspect is the big amount of open source code (“gems”) which is publicly available. “Gems” are helpful for beginners because they appreciably simplify the process of web development.

 

Lack of documentation. It can be hard to find good documentation for the less popular “gems” and for libraries which make heavy use of mixins. Developers often end up finding the test suite playing the role of documentation and they have to rely on it to understand behavior of the written code. This aspect isn’t bad in its essence, as the test suite should be the most up-to-date representation of the system; however, it can still be frustrating having to dive into code, when sometimes written documentation would have been much quicker.

 

web development

 

Let’s draw up the balance. Rails is a huge web app framework with a great number of built-in features. It can be used to create either small or large apps, but it tends to use more memory and resources than the other frameworks and performance can be a bit lower. In the majority of cases, Rails apps will be composed of many tens of files and have tight structure of models, views and controllers. Anyway, nowadays the framework is popular because it is powerful, standardized, reasonable and well-established.


Welcome to read more articles on web development

web development and programming

Back-End Development. Foundation of Digital Product.

Seeing an elegant building, we often don’t even imagine that its shape, height and loads it carries are possible due to solid and powerful foundation hidden from the field of vision. The same happens with digital products: when we open the website that downloads the history of our interactions with it in split seconds, or set the application connecting us with friends and saving our data on any device, when we do simple everyday operations like sending emails or downloading files, most of us don’t know that those interactions are possible due to back-end development which establishes the foundation for effective front-end and enables steady functionality of websites and applications.

 

A lot of internet users and clients ordering services for creating a website or an app think that web development is one-stage process. In fact it is divided into two parts: front-end and back-end development, and for people standing far from this sphere of professional activity, it might be really hard to understand the difference. In our previous articles we have already described general directions of web development and gave a closer review of front-end development issues. Today the theme we raise deals with back-end development, its essence, tools and specific nature.

 

What is back-end development?

 

In general terms, a website or dynamic web application is a number of files containing structure, design, content, and functionality. The technologies and codes that enliven a site, the area of web development which  makes the site run invisibly to users is called back-end. It consists of the server, the database, and the server-side applications. Back-end is the far side of the webpage or screen functionality; to set the analogy, it could be imagined as the brain or the engine of a website or app.

 

For example, when users navigate their web browser to http://tubikstudio.com/, they actually turn to the server where Tubik Studio website files are located and send a request to see them. It should be also noted that loading a website, users aren’t looking at that website directly on the server. The server sends the files to the web browser, which then looks at them locally, on user’s computer. In fact, back-end sets the basis on which front-end development is able to come into play. Back-end developer programs core computational logic of the system including software, website and information.

 

back end development programming

 

What are the objectives of back-end?

 

The key tasks of back-end are accessing the data that users request through the web browser or app, combining and transforming it, and returning the data in its processed form to the requester.

 

Accessing the data that users request
Any time of day or night, there’s always the chance that users will ask for data surfing the website or using the app. Taking it into consideration, back-end should be available on demand being ready to react and respond users’ requests.

 

For practical situation, let’s imagine someone launches an e-commerce startup before their website or app is prepared for a considerable number of users to log in and shop, especially in high season of celebrations like Halloween or Christmas campaigns. In this case the launch is done on shaky ground. What will happen? One day, the website or app will crash. Make no mistake, not being able to get the respond from the website, users will get angry and quickly find deals from the competitors. This is how the invisible foundation of back end directly supports not only digital product, but far more — brands, companies and clients.

 

Back-end always works with data. Developer has to understand it is vital for back-end to be developed on the basis of security practices. This is even more significant when the data interacts with secure information, such as medical, personal, or financial data.

 

Combining and transforming the data
The data that is required for website or app can come from a variety of sources called databases. The task of back-end is finding information the user needs within the databases, which contain enormous amounts of data, and then combine it in a way that provides useful and required results.

 

Imagine that someone downloads the app for travelling or opens the website aimed at this theme and wants to know how to arrive to a particular destination. The website or app will need to get access to the information from the city transport databases, taxi companies, Google Maps and so on and so forth.

 

What happens if the questions, which back-end has to respond, change over time? The structure of back-end is always optimizable which means that developers will be able to respond new requests within its code.

 

Returning the data
Eventually, as soon as back-end gathers and combines all the requested information, the data should be sent to the user. How many internet users can read the information in code produced for back-end? Perhaps, a small handful of chosen. What should others do? To solve this problem, here come the famous APIs playing the role of back-end “translators” transforming pure code into a language legible and edible for humans.

 

For the efficiency of a digital product performance, it is perfect when web designers, front-end developers and back-end developers can work together from the earliest stages of any project and have a constant feedback loop. It provides the ability to choose the best design and development solutions and techologies so that the final result could look great and operate properly.

 

What is the structure of back-end?

 

Back-end includes three parts: server, databases, and APIs.

 

The server is a computer, a device or a program whose purpose is managing network resources and data.

 

web development

 

Alternatively referred to as a databank or a datastore, and sometimes abbreviated as DB, a database is a big amount of indexed digital information. It can be searched, referenced, compared, changed or manipulated with optimal speed and minimal processing expense.

 

APIs (Application Programming Interfaces) are the tools that transport the data sent from back-end to front-end of the website or app. This data, in particular, can include elements of the layout such as buttons, menus, controls, tabs, images, copy, etc.

 

Back-end presents a combination of the databases and the applications written in a server-side language running on the servers.

 

Server-side languages

 

PHP. It is an HTML-embedded scripting language. The main aim of the language is to allow creating dynamically generated pages quickly. PHP is easy to install and deploy, it is staying competitive with lots of modern frameworks, and is the foundation for a number of content-management systems (CMS). PHP powers famous web sites and platfroms such as WordPress, Wikipedia, Facebook etc.

 

Python. It is an interpreted, object-oriented, high-level programming language with dynamic semantics. This programming language is fast, making it effective for getting things to market quickly. Python is simple; its syntax is easy-to-learn, readable and therefore reduces the cost of program maintenance. It is the oldest of the scripting languages, and often referred to as powerful and effective. Python powers famous sites such as YouTube, Google, The Washington Post etc.

 

Java. It is a programming language designed for use in the distributed environment of the Web. Java is similar to C++ language, but it is simpler to use than the latter and enforces an object-oriented programming model. It can be used to create complete applications that may run on a single computer or be distributed among servers and clients in a network. Java powers famous sites such as Twitter, Verizon, AT&T, Salesforce.

 

Ruby. It is dynamic, open source programming language with a focus on simplicity and productivity. Great for building complicated logic on the database side of a website, Ruby connects the back-end and database functionality that PHP and SQL can offer. It is characterized as the language of easy maintenance and high-traffic demands. Ruby powers famous sites such as Hulu, original version of Twitter, Living Social, Basecamp etc. Moreover, the framework Ruby on Rails for this programming language has extensive libraries which support higher level of flexibility for developer in the process of creating code for particular aims.  Here in Tubik we also use this programming language as the basis for back-end development.

 

C#. It is type-safe, object-oriented language that enables developers to build a variety of secure and robust applications that run on the .NET Framework. C# can be used to create Windows client applications, XML Web services, distribute components, client-server applications, database applications, etc. It also can be used to build iOS and Android mobile apps with the help of a cross-platform technology like Xamarin.

 

С++. It is an enhanced C language typically used for object-oriented programming. C++ is effective for complex applications also built on the .NET Framework.

 

Erlang. It is a general-purpose programming language. Erlang has built-in support which increases its level of competitiveness and distribution. It is used in several large telecommunication systems from Ericsson.

 

Server-side frameworks

 

ASP.NET. It is an open source web framework for building modern web apps and services with .NET. It creates websites based on HTML, CSS, and JavaScript that are simple, fast, and can scale to millions of users.

 

Ruby on Rails. It is an open source Ruby language framework for developing database-backed web applications. Ruby on Rails is also full-stack framework which includes everything needed to create a database-driven web application, using the Model-View-Controller pattern.

 

Django. It is a high-level Python language web framework that encourages rapid development and clean, pragmatic design. Django is also free and open source.

 

Node.js. It is a JavaScript runtime built on Chrome V8 JavaScript engine. Here are some examples of Node.js frameworks:

  • Hapi.js
  • Socket.io
  • Express.js
  • Mojito
  • Meteor
  • Derby
  • Mean.js
  • Sails.js
  • Koa.js
  • Total.js

 

Relational database management systems (RDBMS)

 

In order to work properly, every website needs a database to store its code, images, files and other data. The following relational database management systems (RDBMS) are the most popular for web-based applications:

  • MySQL
  • PostgreSQL
  • MongoDB
  • Microsoft SQL Server
  • Oracle
  • Sybase
  • SAP HANA
  • IBM DB2

 

web development

 

Let’s draw up the balance. Front-end is the part of the website or app which users see and interact with. Back-end is the engine behind the interface, allowing data validation, processing and storing.

 

Recommended reading

 

Server-Side Scripting: Back-End Web Development Technology

 

Web Development. Basics of the Job.

 

3 Web Dev Careers Decoded: Front-End vs Back-End vs Full Stack

 

The Languages and Frameworks You Should Learn in 2016

 

I Don’t Speak Your Language: Frontend vs. Backend

 

Basics of Back-End Development

ios development tubik swift objective-c

Swift or Objective-C? Tool Tips for iOS Developers.

In creative process, there are always some points of choice and contradictions. While UX designers are debating about Photoshop vs Sketch theme and give their opinions on efficient prototyping tools, iOS developers also have their own big debate. Today we are going to pitch in and add some of our thoughts to this global discussion of which programming language is better, Objective-C or Swift. We asked Tubik CTO and experienced iOS developer Maria Nazarenko to share her opinion with Tubik Blog readers.

 

Brief background

 

Let’s start with a tiny bit of history. The first and therefore the eldest in the discussed pair of programming languages was Objective-C. Primarily it saw the light of the day in early 1980s and was created by Brad Cox. So, one of the points that could be definitely applied to this programming language is that it’s really tried-and-true and tested by several generations of developers.

 

At the moment Objective-C is commonly described as the general-purpose, object-oriented programming language adding Smalltalk-style messaging to the C programming language. Before Swift came into play, Objective-C had been the main programming language used by developers for OS X and iOS operating systems, and their APIs.

 

Swift, introduced at Apple’s 2014 WWDC, brought its own dose of revolution. In general description, Swift is a general-purpose, multi-paradigm, compiled programming language broadening the previous scope of operating systems as it was developed for iOS, OS X, watchOS, tvOS, and Linux. Swift was designed to enable work with Apple’s Cocoa and Cocoa Touch frameworks as well as the large body of Objective-C code already written for Apple products.

 

Initially Swift was intended to be more resilient and safer than Objective-C, and also more concise and developer-friendly. It was built with the LLVM compiler framework including in Xcode 6 and using the Objective-C runtime library that enables C, Objective-C, C++ and Swift code to run within one program.  Therefore, it enhaces broadening professional horizons for developers making their work more efficient.

 

That was the milestone when developers started their discussion of what is better, tradition or innovation.

 

tubik ios development

 

What is better: Objective-C or Swift?

 

Some time ago expressing our opinion in the hot global discussion about the choice between Photoshop and Sketch we mentioned: “The answer we would like to give is really simple. There is no any vs. There shouldn’t be any war between the options which can complement each other. Obviously, now there is no any perfect and ideal software for design: if it existed, everybody would use only this ideal choice and there wouldn’t be any need for fight.»

 

It seems that in iOS development the situation of today is really similar. The choice is not so obvious as it could seem even after reading about all the extended functionality of Swift in comparison with Objective-C. In practice Objective-C is checked and tested over the years while Swift is young and new. Huge bulk of products have been developed in Objective-C so transition to the other perspective is definitely taking some time and effort.

 

Briefly characterizing the programming languages according to her extended practical experience in iOS development, Tubik CTO Maria mentions that although Objective-C is older and common, Swift could be described as more simple in syntax and stable in work process.

 

Swift Objective-C development tubik

 

Which programming language is more useful to know?

 

Due to Xcode which is the integrated developing environment (IDE) with a set of software development tools iOS developers can work applying either Objective-C or Swift in fact using the same developer tool.

 

As long as Objective-C exists much longer, it’s natural that plenty of simple and complex applications have already been accomplished with this language. Not knowing Objective-C and starting straight from Swift can limit developer’s professional flexibility. It can be especially obvious in case when developers have to update existing products.

 

Sometimes it happens that developers, knowing only Swift, recommend to rewrite existing (perhaps big or even huge) piece of code from Objective-C to Swift, the customers logically do not see this acceptable and certainly do not accept the necessity to pay for this work.

 

Considering this, the best option is knowing both languages. That gives developers natural professional flexibility for any task and environment they have to tackle with in current projects. There are two strategies which mostly depend on the time available.

 

In case if there is considerable amount of time between studying basics and applying them into real practice, our advice is to start with Objective-C. Although it is often described as more complicated, it establishes a solid foundation of basic principles and routine of creating applications for and using iOS system. On this basis, learning another iOS language such as Swift which is syntactically simpler will not seem too hard.

 

However, there can be also another strategy, a bit more dynamic than the previous one and applicable for those who don’t have enough time in their disposal needing to start actual work asap. In this case, you can start with Swift as it is easier in syntax and more similar to other programming languages so it will take less time to start practical coding. Getting the basics of development in this way, don’t forget to add Objective-C to the practice and polish skills in both languages. It will definitely give result if approached thoughtfully and rigorously.

 

iOS development swift objective-c

 

Here in Tubik Studio we believe that the only single thing that a designer and developer should think about is the high quality of the final product. The highest. Quality. Possible. Period.

 

Any tool and method chosen for this aim is a good way as long as it provides the efficient product to the client and the final user.

 

Don’t miss our next articles on iOS development giving practical tips and case studies of coding complex design decisions.


Welcome to see designs by Tubik Studio on Dribbble and Behance

Case study Ribbet Designing illustration

Case study: Ribbet. Designing illustration.

It is not a secret that the fast-paced and dynamic development of web and app design brings new trends into other spheres of creativity in non-stop mode. No doubt, illustration is one of the fields which is constantly and significantly affected by all the numerous changes and currents in the Web. Working on different projects and preparing various shots for Dribbble and Behance, Tubik Studio designers get regularly updated on how multipurpose and versatile can illustration be. So, today we would like to present you the new case study, this time about illustration for a web online editing service.

 

Earlier we have already presented here the case study telling about creation of a logo for the on-line editor Ribbet by Tubik Studio designer Arthur Avakyan. This article continues telling about the collaboration with the same customer. This time the assingment was concentrated on illustrations for the site created by the other designer Evgeniy Tomashevsky.

 

Tubik Studio designer

Evgeniy Tomashevsky working on sketches

 

Task

Designing thematic illustrations for the specific feature of online photo editor Ribbet.

 

Tools

Pencil sketching, Adobe Illustrator

 

Process

Undoubtfully, most — if not all — the illustrations in the web fulfill several functions instead of one. They should be not only decorative stuff but can also become important features of user interface and in cohesion with other elements of the layout help to guide a user and make using the site faster, easier and more enjoyable.

 

The illustrations accomplished by Tubik Studio for Ribbet were no exception. To be more particular, the task for the designer was to create a pack of thematic illustrations that would reflect the ideas of popular annual events. The images were intended to work as fancy cards which could be used for instant creating invitations for birthdays, weddings, parties as well as nice postcards and other pretty stuff.

 

So, given to the task, the whole pack of illustrations needed to have the same format and style providing the feeling of consistency. Moreover, it was important to make it corresponding to the general design of the site. This requirement was eased due to previous studio work: Tubik Studio designers had worked with Ribbet on new design of the site and new logo, which soon are going to be presented on the site itself and are already widely seen in Ribbet social networks accounts. So, starting work on illustrations, the designer had already got the general concept of the editor design. It influenced on general style of the images as well as selection of appropriate colors and shades.

 

Case Study Ribbet Tubik Studio

General design of the web-site and logo for Ribbet by Tubik Studio 

 

In process it was also vital to remember that the images had to obtain high level of adaptability and be recognizable, bright and clear in all sizes possible to be seen at. Moreover, they had to be ready to save their beauty and style in printed version as well. As you can see, the designer had to keep loads of things in his mind.

 

The first stage of the work required making choice about the general stylistic decision which would satisfy all the parts of the assignment. Although there are numerous stylistic trends for digital illustration nowadays, in this case search of the style was not really long and the decision was made to create all the pack of illustrations in flat design stylistics. It matched efficiently with general stylistic concept of the site and was obviously defined as trendy and diverse.

 

After deciding on general style, the next stage witnessed the most creative and elaborate part of the process which was classic old-school pencil sketching. The designer worked hard and devoted a lot of soul and passion to creating catchy details, pleasant-looking backgrounds and bright characters that would be easily recognizable, capturing, stylish and fancy.

 

Illustration in sketches

 

Illustration in sketches

 

Illustration in sketches

 

Illustration in sketches

Tiny part of sketching stage

 

When all the ideas were completed and agreed-upon, the sketches were converted into their digital body by means of Adobe Illustrator.

 

One more part of the task included sophisticated and thorough work with color. The reason was that it had to correspond not only with the general design of the site but it was also vital to reflect color associations which users typically have for specific holidays, events and special occasions. This kind of multipurpose solution could make user experience even more effective and pleasant. So, the designer accomplished this work with a deep research of common color assosiations about holidays and only afterwards selecting the colors that would fulfill both association and general consistency sides of the editor idea.

 

Having processed each image thoroughly, the designer presented bright and catchy images for the pack of thematic fancy cards, some of which you can see below:

 

Independence Day

Independence Day card

 

St_Patrick_s_day

St. Patrick’s Day card

 

Thanksgiving

Thanksgiving Day card

 

Remembrance_day-01

Remembrance Day card

 

NY_eve

New Year card

 

Mother_s_day

Mother’s Day card

 

Father_s_day-01

Father’s Day card

 

Valentine_s_day

Valentine’s Day card

 

Wedding_day-02

Wedding Day card

 

As it can be seen, the images covered the wide range of religious, public and family holidays.

 

The customer, fully satisfied with all the work presented, has already been using the images actively in their social network accounts as the promotional materials for new features of Ribbet service.

 

Case study Ribbet Designing illustration

The set of cards from Ribbet Facebook page

 

This assignment was full of creativity and inspiration. It has become one more case proving how much sophisticated and rigorous work should be done to create bright multipurpose digital illustration. It also showed that doing preliminary research can help to make the result even more efficient.


Welcome to see other works by Tubik Studio on Dribbble and Behance