Tag Archives: design

tubik-studio-architecture-firm

Web of Life. Creative Web Design Concepts.

Nowadays, World Wide Web could definitely be named the web of life. It connects people from all around the world whatever their aims and wishes are about. Personal and professional communication, ordering and delivery of goods and services, education and mentoring, searching for new information, advertising, watching films, tracking everyday stuff and accounting finances, and so on, and so forth—seems, there’s no sphere to which the Internet wouldn’t add its own two cents. No doubt, there are both advantages and disadvantages brought by technology and new ways of broader and faster communication of all kinds. Still, today we are going to focus more on the variety of perspectives for positive influence of the web on people’s lives of global society.

 

In the design glossary issue devoted to key terms of web design we mentioned that as a domain of human activity it lies on the crossroads of many sciences and practices. Among them the following should be mentioned:

  • drawing and composition
  • painting and coloristics
  • logic and schematism
  • analysis and statistics
  • visual arts
  • programming
  • user research
  • psychology
  • copywriting
  • branding and marketing etc.

 

Covering diverse aspects of a website functionality and appearance, some designers work in teams every member of which specializes in a particular sphere while the others can work out different of the mentioned aspects individually. Anyway, in vast majority of cases web design is the sphere of digital products which have to be functional and user-centered. As famous American designer Charles Eames said “Design is a plan for arranging elements in such a way as best to accomplish a particular purpose” and his words totally reflect the idea of modern web design.

 

Working over a website, designers have to concentrate on such aspects as:

usability (the website is convenient, clear, logical and easy to use)

utility (the website provides useful content and solves users’ problems)

accessibility (the website is convenient for different categories of users)

desirability (the website is attractive and problem-solving, it retains users and creates positive experience which they are ready to repeat).

 

Here in Tubik Studio we have felt all the power of web, both from the perspective of professional growth and positive user experience. If you take a virtual trip around Tubik Blog, you’ll see the case studies and articles devoted to the theme of creating websites solving users’ problems, providing natural and effective flow of human-computer interaction and positive experience. Being a team knowing the inside-out of web design and development, today we are going to continue the topic with the collection of practical design concepts presenting design solutions for the variety of websites with different objectives, target audience and visual style. Here you’ll find the concepts for particular web pages, animated web interactions, ideas for landing and home page design and the like. So, let’s get started!

 

Website on travel destinations in Iceland

 

tubik studio ice ui website

Presented concept features the set of interactions with a website devoted to the theme of traveling around Iceland. Working over the color palette, the designer chose the light background featuring the theme of Iceland and a contrast bold headline. Images are used in the scheme one-per-page so that they could support the theme but not overloading the page or distracting the user. Thorough attention was paid to typography and composition as key sides of user-friendly minimalism enhancing usability, navigability and visual harmony transferring the spirit of the presented place. Navigation features the right side menu with titles placed vertically still easily readable due to the choice of font, the rest of the navigation links are hidden in extended menu behind the hamburger button. Animation shows transitions between pages to give the feeling of general design consistency.

 

Design concept for online magazine

 

online magazine design tubik studio

 

The design concept of an online magazine features the page of a particular article presenting a famous person so an image showing the personality becomes the center of composition still doesn’t take too much attention from the text as the bearer of information. All the design is concentrated on user-friendly solutions around readability and stylish non-distracting looks as well. So, the concept is based around clear visual hierarchy applied in general layout of elements and also copy blocks. As for navigation, the page features the header including the title of the website as a central element of the top part composition, two active links to basic categories of publications, link to live mode and search field marked with a magnifier icon.

 

Web design for architecture blog

 

tubik studio design

 

Another concept full of light and air for readable text and stylish visuals. Animated interactions demonstrate the consistency of the flow while scrolling the page with the smooth move of visuals elements, headlines and copy blocks, imitating movement of physical objects while pulling. The presented design of a website has a fixed header which doesn’t hide while the page is scrolled. However, it follows minimalist principles featuring brand name lettering as a center of composition, magnifier icon marking search functionality and hamburger button hiding links to navigation areas.

 

Corporate website for an architectural company

 

website design UI

 

This concept is also devoted to the theme of architecture, still it has different objectives and core target audience: it is the corporate website for a company presenting the variety and potential of its services. The general performance of the webpages is following minimalist and functional approach. The layout is accomplished on the basis of priorities in presenting this particular business field. Taking into account that the nature of the company activity is deeply visual especially in terms of presentation to new clients, the designer selected the background and fonts that have to leave the immediate impression of style and sophistication. The key words brought out in capital letters become the integral part of stylistic concept being also informative and quickly setting the company ideas and approach to work. The visual effects are supported with smooth animation.

 

Landing page for the website of seafood recipes

 

landing page UI design tubik studio

 

This example presents a landing page for a website collecting recipes of meals with seafood from all over the world. As well as in the previous case, dark background is chosen to make the images of meals look even more delicious and also create stylish appearance for general visual presentation of the layout. The landing quickly provides general understanding of the website purpose and content featuring different sections that could be interesting for users.

 

website UI design

 

Website on Swedish ski resorts

 

tubik studio web UI design

 

Obviously, traveling is the great way to get inspired and we really believe it’s true. This concepts adds one more example on this theme. Here is the set of animated interactions for a website Slopes presenting Swedish ski resorts and enabling users to get full scope of information about them. Home page features the video background immediately setting the theme, and color palette based on strong contrast and concise color combinations also visually supports the idea of active winter holidays. The basic points are shown in header for quick availability while all the other variety of content categories is hidden behind the hamburger button to support minimalist design approach.

 

Web interface for design blog

 

design4users blog

 

This case shows the web interface for Design4Users, a content project created, designed and developed by Tubik Studio team. Design of the webpages is accomplished with a view to effective presentation of both copy and visual materials featured in wide variety.

 

webdesign tubik studio

design blog web UI

 

Web design for an online magazine about traveling

 

tubik studio web design

 

Here’s the design concept for a website which presents the online magazine «The Big Landscape». Its target audience is primarily people keen on traveling and learning more about the world. The interface is minimalist following the principles of clear visual hierarchy, good readability, intuitive navigation and aesthetic pleasure from visual perception.

 

Website for a design studio

 

tubikstudio ui animation website design

 

It is a promotional webpage of the particular product by design studio. Its purpose is to present the design object via descriptions and visual details providing users with the link to this item in online shop. Thus, this page, which is actually the part of a sales funnel for the e-commerce website, is in charge of attracting users and informing them about the product. Minimalist design full of air makes visual accents noticeable and engaging while general layout presents the actual direction of company services. Broader aim was to transfer the atmosphere and spirit of the brand by means of design solutions.

 

Web platform for an encyclopedia

 

tubik studio web ui design

 

This case realized the idea of web encyclopedia devoted to the theme of birds-of-paradise. The designer concentrated on main aspects of usability and utility of such a resource for readers and at the same time set the goal to make it attractive and giving clear message of the site features with general stylistic concept. Animated transitions make  scrolling interactions engaging and add style to general performance.

 

Web design for photography workshops service

 

website design for photographers

 

Here is the landing page for a company organizing photo tours and workshops for photographers. Functional and stylish minimalism is the basic approach behind this web interface, visual elements inform users and provide quick harmonic perception of the nature of the services while animation is provided to show the transitions between content blocks.

 

Landing page for coffee delivery service

 

web design UI tubik studio

 

It’s not a secret that drinking coffee is the daily habit, sometimes even obsession, for many people, and different services speeding up the process of getting a cup “on the go” are getting more and more popular. This example shows you a design concept of a landing page which presents an experimental service «Coffee Wings» providing coffee delivery by drones. Landing was created in the manner combining traditional visual elements setting positive associations with coffee and images of innovative technologies involved to this user-friendly service. Copy blocks are not overloaded so that visitors could get the idea and benefits of the service quickly and clearly and obtain more information, if they want, following the calls to action.

 

Design concepts for 404 page

 

web page illustration

 

There are tons of design solutions for 404 webpage, which is strategically important for any website, and still this design object is always actual. This sample shows web design accomplished with some artistic approach featuring the original illustration of the penguin directing everyone back from the Pole where nothing can be found.

 

tubik studio web design

 

Another concepts shows different stylistic approach and features a page 404 for e-commerce website. It is based on harmonic interconnection of the background and actual layout elements such as header, CTA button and copy.

 

Today’s list is over but studio practice is full of many other interesting examples of design concepts for different purposes and needs of modern users. Don’t miss new presentations in our future posts.


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

Welcome to read UI/UX glossary on web design

mobile application testing

The Brief Guide to Testing Mobile Interfaces

Mobile technology and smart devices have already brought massive and significant changes in human behavior, communication, way of thinking and lifestyle. In fact, the boom of apps popularity can be seen in plenty of industries, among which we can easily sort out some noticeable ones such as Media (magazines and newspapers), Travel (maps), Medicine (patient records), Finance (apps for real-time trading), Education (translators and dictionaries) and Social (games and social media platforms). With steady and obvious progress of the sphere, mobile and web apps are definitely going to become more critical for personal, professional and business success and efficiency. So, creating and launching a new application, all sides of its production should test the solutions and environment and well as practical quality of design and development outcome. Extensive practice we have got here in Tubik Studio proves that this is the well-lit way to providing users with positive experience and helpful products.

 

Testing is vital for product quality

 

In our previous article, devoted to the full cycle of creating a mobile application, we have already mentioned the great part of testing in providing high quality products, able to solve problems and improve lives. As it was outlined in general terms, testing is one of the crucial phases of the entire app design and development process: it helps to reveal bugs before the app is brought out to actual users. Practice shows that in the majority of cases, users abandon the app if it has functionality problems, no matter how promising and engaging it seems. Vise versa, even the simplest apps can be successful for commerce, business, advertising and other aims if they work correctly and efficiently, according to target audience’s expectations and solving their problems.

 

Testing doesn’t mean that designers or developers do not provide the upper quality. To set the analogy, the fact that every book, magazine or newspaper issue goes through editor’s eye doesn’t say that journalists or writers are not talented and qualified. Different specialists have different goals and skills in the process to increase general productivity and efficiency, and it works the same way for design and development of mobile apps. Supposing that developers have done a great job and made no mistakes, the task of testing is not only finding errors. Quite the opposite, it helps to understand the quality of the app and find the way to improve via real interactions.

 

Peter Drucker once said “Quality in a service or product is not what you put into it. It is what the client or customer gets out of it.”  In the majority of cases, if users see that anything in the app is broken or it constantly takes large amount of time to load preventing them from quick accomplishment of the task at hand, the risk is really high that they will bounce it and never come back. That’s why testing phase is the hidden hero of mobile app development.

 

Today we are going to concentrate more on perspective of testing mobile apps, as websites testing has its own specific features worth another article. So, let’s review the basic steps and aspects important for effective digital product testing.

 

mobile app testing

 

Start with the type of the app

 

Mobile app testing has plenty of challenges based on multiple factors: there are some compromise decisions testers or developers need to consider and choices they need to make on combinations of different techniques and methods to be used. One of the aspects to think over is the nature of the app itself directly influencing the process and limits of testing. In this perspective, the following basic categories of the apps should be mentioned.

 

Native apps. The apps of this sort are created specifically for one platform, aka operating system of device. They can take full advantage of all the device features such as the camera, the list of contacts, the flashlight, the accelerometer, the compass or others, and are installed via an app store (Google Play, Apple’s App Store, Microsoft store, etc.).

 

Mobile web apps. They are mobile-optimized websites that look and feel like native apps, still they are run by a web browser.

 

Hybrid apps. This type representatives provide the mix of native apps and web apps. Like native apps, they are installed through app stores and can take advantage of the numerous features available on device. As well as web apps, they rely on HTML being rendered in a web browser.

 

Toonie Alarm UI design

 

The type of the app under construction directly influences all creative stages from UX wireframing to final check of all the code. Different operational systems set their own guidelines and recommendations on design solutions and performance, development tools and restrictions.  Neglecting those limitations and rules can bring to fail of submitting the app to open use and turn all the creative process into wasted time and effort.

 

Plan the testing levels

 

Starting actual work over the app, creative and production team needs to consider a testing plan combining different testing levels. Testing is not the process taken as one single stage or action: it is spreaded via different stages. Schematically, this process can develop in vertical and horizontal directions. Vertical dimension is presented with testing levels and usually deals with going deeper to the code and functionality from separate units to whole app, its connection with the server if its needed, and its technical correspondence to the requirements. Horizontal dimension deals with different aspects of app performance and user experience.

 

Taking the testing levels to account, their basis is variety of tests grouped according to the stages when they are used in the development process, or by the level of specificity of the test. The main task of testing levels is to identify missing areas and prevent overlap and repetition between the development phases. Let’s briefly describe the various levels of testing.

 

Unit testing. This testing is commonly done by the developers to make sure that their code is working correctly: they test the sections of code like classes, functions, interfaces, etc.

 

Integration testing. Integration testing is done when particular units are integrated with each other, with the aim to test the behavior and functionality of each unit after integration. This testing level is usually carried out by a software testing engineer. There are a few types of integration testing such as big bang integration testing, top down and bottom up.

 

System testing. Here the name says everything: at this level all the components of the app are tested as a system in order to ensure that the product at the pre-launch stage meets the specified requirements. As the app is almost ready, it can be tested in the environments really close to the actual in which users will get their experience once it is deployed.

 

Acceptance testing. The main objective of this testing level is to evaluate whether the app system complies with the user requirements and whether everything is ready for release.

 

ios-developers-tubik-studio

 

Define the types of testing

 

All aspects of the app usage should be tested. Designers, developers and testers will need to check it across different devices as the points like screen resolution, processors, battery life and memory are different and can significantly affect on the efficiency and performance of the app, functionality, handling and loading time, as well as UX and UI solutions.

 

Among the variety of types, applied to test the mobile app at different stages of its creation, we should definitely mention the following list.

 

Usability testing. It is carried out from the early stages of app creation to verify if the app fulfills the established objectives and tasks getting a good response from users. The primary focus of this testing is on easy and quick use of an app, simple on-boarding and user’s satisfaction with the entire experience. For higher efficiency and productivity of general creative flow, this type of testing should start much earlier than any single line of code will be written, from the first schemes and transitions put into UX wireframes.

 

Installation testing. At the initial stage on installation, the app should add required software to the device automatically. And uninstalling, it should remove all the available content and databases from the device which are used by the app. So, this type of testing checks that the install/uninstall flow goes properly.

 

Functional testing. It is the most basic test for any app to ensure that it is working according to the defined requirements and there are no functions missed in the process of interaction. Functional testing mainly includes finding possible specific bugs of the device or navigation issues of the app. This type of testing should be done at the primary stages of development. In enables developers or testers to check and measure database or network queries with response times, crashes and memory issues.

 

Performance testing. Rather stressful part of any app testing is performance test revealing the omissions which left unnoticed during functional and user interface testing. This testing is required to be done on actual device only so it means the whole app is coded t this stage. This type covers client-side, server and network performance. For example, it checks the performance specifications and behavior of the app under certain conditions such as low battery, bad network coverage, low available memory and etc.

 

Interruption testing. An app may face various interruptions being in active mode, such as incoming calls or network coverage outage and recovery. This kind of testing shows what the app will do in this variety of cases. The common types of interruptions are:

 

  • Incoming and Outgoing calls, SMS or MMS and different notifications
  • Low memory warning
  • Cable insertion or removal
  • Network outage or recovery
  • Media Player on/off
  • The device power cycle, such as low battery notification.

 

Memory testing. This type checks that each app maintains optimized memory usage throughout surfing. As mobile devices have definite limits of available memory, this testing is crucial for the appropriate product functioning.

 

Security testing. It checks vulnerability of the app to hacking, authentication and authorization policies, data security, session management and other security standards. The fundamental objective of security testing is to ensure that the app data and networking security requirements are met according to standards.

 

Tubik Studio iOS development

 

Don’t forget to test design

 

One of the huge mistakes that could be done about testing it planning this part not earlier than the development stage starts. Obviously, the product getting live via code presents wider perspective of testing its actual functionality and performance. Still, we should remember that any digital product is not just code — it is the set on user interactions which should be thought-over and designed thoroughly with target audience in mind. Therefore, testing should take its first steps at the stage of wireframing to check if all the elements take their places, communicate to users, provide them with feedback from the system and what is more, achieve the goals and solve users’ pains.

 

Numerous prototyping tools enable to simplify and speed up the process of testing user interface so that developers obtained the verified version of design not taking major design alterations in the process of development. This is the efficient way to optimize the general creative flow and provide maximum efficient outcome at every stage. Prototyping gets testing sides, be it client, designer or even potential users, closer to real interaction with the concept of the future interface. Prototypes should not be seen as the analogue of the final product as they aren’t those. Their main aim is to check the correctness and appropriateness of the design solutions way before they will be transferred to developers.

 

The most effective point to involve prototyping for testing design is the step between UX wireframing and UI design.  The prototypes on UI stage can also be created for presentation of application general looks rather than for testing and improving its functional features. Still, it crucial that usability should be thoroughly checked first of all at the UX stage, otherwise it will be much harder to change inefficient solution after having accomplished a lot of work on UI and then development.

 

All the numerous aspects of design testing are definitely worth a separate article which will continue this topic in our blog very soon.

 

InVision for UI prototyping tubikstudio

 

Check the code thoroughly

 

When the design is transformed into code, the developers and testers need to make sure that all the quality and performance nuances are considered and included. Pointers in this area are testing on actual devices and simulators. Testing on devices is proceeded on the actual handset where app is installed, run and tested. Testing in simulator applies the software that can accurately imitate a mobile phone.

 

Simulator testing is useful at the primary stages of development as it allows quick and efficient checking the app, but it doesn’t fully measures performance and usability which should have their healthy doze of actual human testing. Still, automated testing got really popular now because it is effective, cheap and quite reliable. iOS Simulator as well as testing tools such as Appium, Frank, Calabash and others are available to support moving the app through the testing process and point out the issues requiring attention.

 

Continuous testing at all stages lays the strong foundation for keeping small bugs from becoming major issues later on. The final testing is conducted on actual devices so that crashes and hangings could be identified. Testing on device is obligatory for every app as it provides developers with actual data on the app behavior in different environments.

 

Test and measure after launch

 

Another mistake that should be avoided is stopping testing after the product is launched. Vise versa: testing will get even more diverse and comprehensive as it will inform the sides maintaining the app viability and efficiency about behavior, problems and preferences of real users. This information is the direct route to product improvements providing users the updates they really need and want.

 

testing digital product

 

Mobile technology is transforming the way of using devices. Smartphones and tablets of all kinds are rapidly becoming the valid method of interaction between consumers and businesses. People use mobile apps to connect socially, find information, order and track goods, book places and set appointments and do hundreds of other operations improving their lives regularly. It is important to build an app with all features and functionality that are required. Without effective testing plan, users are likely to come across unexpected bugs and errors. In the modern world with tough and growing competition in this field, the risk is high that they will quickly lose interest to the app while thoughtful testing and analysis is the solid way to avoid this risk.

 

Recommended reading

 

Diverse issues of applying testing at different stages of creating digital products have been an object of professionals’ attention lately. Here is the collection of recommended sources on further reading for those who would like to read more on the theme.

 

Testing Strategies and Tactics for Mobile Applications

 

Mobile: Native Apps, Web Apps, and Hybrid Apps

 

Beginner’s Guide to Mobile Application Testing

 

Mobile Testing: Complete Guide to Test your Mobile Apps

 

17 Strategies for End to End Mobile Testing on both iOS and Android

 

Levels Of Testing

 

Software Testing Levels

 


Welcome to read The Ultimate Guide to Creating a Mobile Application

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

toonie alarm time picker

The Ultimate Guide to Creating a Mobile Application

Most modern people would find it difficult to imagine their day using the smartphone «just for calls». Most mobile devices jumped far beyond the primary goal behind them — making phone calls and sending simple instant messages. Today even quite a simple mobile presents a platform to house various applications for everyday use that turns thousands of people into grateful users of more and more apps. Simple or complex, informative or entertaining, minimalist or packed with bright and catchy details, practical or joyful, meeting the user needing them, they make life better. The variety of apps available today enables users to do the great variety of things using their mobile phone only. Setting an alarm for tomorrow, calculating expenses for the next week or sending mum a selfie via messenger app, vast majority of users don’t even imagine how many people stand behind these simple everyday operations.

 

Earlier in our articles we have already unveiled the typical steps of creating interface design for mobile applications. Today let’s go further and set the full path of creation for a mobile app, from setting the idea to its release in App Store.

 

As well as in any creative process, making a mobile application out of the thin air is a sophisticated process which has its individual peculiarities and features in every particular case. Still, on the basis of Tubik Studio extensive experience of creating diverse applications, it is possible to define several typical creative stages for this process, such as the following:

 

— setting the task and initial scope of works

— estimation

— user/market research

— UX wireframing

— prototyping

— UI design

— animation

— software architecture planning

— iOS development

— testing

— release

— updates.

 

Although you see the sequence of stages, it doesn’t mean that every further phase starts only when the previous one is completed. It’s impossible to imagine this kind of linear dependence as many processes and stages are interconnected even not being consequent in the presented list. Moreover, some of them like testing or estimation come up here and there being spread for all the process of app creation.  Now let’s go along this way step by step to see how a subtle idea becomes a real mobile app.

 

tubikstudio app ui design

 

Setting the task and initial scope of works

 

As we have already mentioned in the article considering logo design stages, the point of setting the task is the foundation of all the design and then development process. At this point the team of designers and developers should obtain maximum information from the client to mark the right way to the goal. The one who walks without a destination in mind, will possibly come nowhere. In product design it works the same way: to get the result, you should clearly set the goals from the very start of the path. It doesn’t mean that the goals should stay totally the same at the end of the journey: the proper level of flexibility has to be set as the objectives can modify more or less in the creative process, research and testing. Still, if the general goals are not set at the start, the creative process can get easily transformed in a mess.

 

Another vital tip, which we have seen through long practice, is that communicating with clients you should get not only their wishes but also try to get the ideas and reasons behind these wishes. If you understand why your customer wants to see particular colors, shapes or transitions, it will be easier for you (if necessary) to justify other methods of realization for these ideas which would give the result desired by the customer and at the same time user-friendly and thoughtfully consuming resources or enabling interactions.

 

The more information you get from the client, the better it is for setting the right direction. Design briefs, calls and Skype-conferences, chat in Slack, brainstorming sessions, mood-boards can all form the good starting line for productive work. In our case, this point of journey is started by sales managers and business analysts who take over the first line of communication with clients and are experienced on setting the bridge between the customer and creative team.

 

tubik studio clients service

Tubik Studio Head of Operations Kate uses all the means to communicate with clients and get into projects

 

At this stage, it is highly advisable to get the data about:

  • the nature of the product and its USP
  • the target audience
  • geographical targeting (if available)
  • the keywords with which the company represents its identity
  • preferred structure and functions clients see as vital in the app
  • preferred visual features (color palette, general style, special features, connection with other already existing digital products or brand strategy etc.)
  • potential technologies, devices and surfaces at which the app will be used
  • need of consistency with existing corporate identity (if available)
  • nature of data processing, need of server side and additional technologies
  • specific preferences

 

Obviously, the list is not completely full, still it contains the most important positions needed for setting a general design and development flow. The outcome of this stage is the diverse set of information blocks establishing the basis for further estimation of the project, planning logical milestones and sprints as well as working our efficient design and development solutions.

 

Estimation

 

The data collected at the previous stage enables business analysts and sales managers to provide the client with the first-level estimation of the time needed for the project and therefore the planned costs. As in any creative process, it is practically impossible to make one totally exact estimation which will stay the same during the whole project: this is the the data which should be got back to and reviewed after every stage of design process. Certainly, there can be some cases of products that are quite simple, have clear structure and do not include many screens or elements, so estimation will be quite exact from the very first stages of processing client’s data and wishes. However, the more complex is the project, the highers are the chances of estimation reviews and adjustments. One more vital thing to mention: this reviews do not necessarily mean growing pricing or timing, as in the creative process designers and developers can find the ways of optimization for design and technology solutions which can even shorten the initial estimation.

 

This flow is close to perfect in cases of full-stack teams: it means that business analyst can involve designers and developers into the assessment process from the earliest steps of analysis and estimation which is able to provide more real and exact planning of time and costs. Furthermore, specialists participating in discussion are able to contribute a lot of knowledge and experience on technical details and factors influencing time and resources needed for the app design and development.

 

Design Studio Tubik

 

User/market research

 

This is the stage when being based on the established task and aims, UI/UX designer starts the path with getting deeper into the environment in which the future application will function. The research stage usually moves on in two directions simultaneously: user research and market research.

 

User research means getting deeper into details of core target audience to understand their preferences and psychological peculiarities, the influence of different factors like colors, stylistic decisions and logic of interaction on emotions and experience of the defined group, the sources of information and creative performance ways which could engage users and make them active. Marketing research means exploring the market segment, primarily in the perspective of creative solutions used by competitors. Visual design presumes creating original and recognizable style that will make the product stand out of the crowd and draw potential customer’s attention.

 

Famous guru of advertising David Ogilvy emphasized the great importance of research for creating effective result: «Advertising people who ignore research are as dangerous as generals who ignore decodes of enemy signals.» Time has changed the means, goals and technologies, still vital role of research established even stronger. Neglecting the research stage and relying only on their creative intuition, experience and talent, designers risk failing this task as they will not know the conditions of the app functioning and will not be able to make it efficient, user-friendly and original.

 

tubik studio UI designers

 

UX Wireframing

 

It is the process of creating general structure of the designed application or website. It’s usually accomplished via the set of schematic screens or pages of low or middle level of fidelity. The aim of this stage is setting clear and orderly structure of all the layout, transitions and interactions on the basis of user’s problems and pains which the product is going to solve.

 

In one of our previous articles we provided a bit of metaphor on that. When we think about building the house, for example, we usually mean the process of physical appearance of the construction rather than tons of projects, drawings and calculations made on paper. And yes, physically it’s possible to build the house without any project as well as it’s possible to create the interface out of thin air. However, in this case you shouldn’t be surprised if one day the house will crack and collapse without any visible reasons as well as the app looking amazing and stylish won’t bring you any loyal users. If you want to have a reliable house, a durable mechanism, a powerful application or a highly-functional website, the recipe is the same – take your time for thorough planning and projecting. This is not going to waste your time, vise versa, it will save your time you would otherwise have to spend on redesign and attempts to find out why your product doesn’t work properly.

 

That is the aim of UX part of design process. UX wireframing stage should be heavily based on user research, competition research and analysis of all the data obtained. In the outcome, it creates the clear scheme whose complexity depends on the product functionality and reflects all the system of transitions and interactions as well as placement of all the elements of the interface based on their optimal use flow. In some cases, wireframing done in pencil sketching or rough drafts is enough, although preferably it is accomplished with the special tools and software optimizing design process and increasing performance.

 

tubik studio design process ux

 

Prototyping

 

The original concept behind the term ‘prototype’ is the sample model of the product that gives the ability to test it and see if the solutions and decisions made about the product are efficient. Prototypes should not be seen as the analogue of the final product as they aren’t those. Their main aim is to enable a designer, a customer and a user to check the correctness and appropriateness of the design solutions.

 

The value of prototypes in the sphere of app and webdesign has rocketed for the last few years. Actually, it is easy to explain as even the low-fidelity prototype gets the designer, customer and tester much closer to the looks and functions of the future product than the most elaborate schemes, drawings and wireframes. Certainly, that doesn’t mean that schemes and wireframes could be eliminated from the process as they are essential in the process of creating design solutions. However, when you want to feel their efficiency and check if nothing has been missed in the design process, prototype will be the great help.

 

Considering the fact that a lot of customers see the prototype as something very close to the final version of product design aka “UI in action”, in practice this approach is not effective. Prototyping is much more efficient and useful as the step between UX design and UI design. So, here in Tubik Studio we support the workflow having the sequence «UX – prototype – UI».

 

The prototypes on UI stage can be created for presentation of application general looks rather than for testing and improving its functional features. And this is the trap in which it is easy to get confused. Prototyping all the details on the final stage of UI in most cases is not so reasonable as it could seem. It will be too time-consuming and in this perspective, it would be better to spend the same time on coding a demo-version. Moreover, usability should be thoroughly checked first of all at the UX stage, otherwise it would be much harder to change inefficient solution after having accomplished a lot of work on UI. Certainly, it would be amazing to create prototypes both for UX and UI, but by far not all the designers and customers agree to spend so much time on design tasks and want to test and improve the design much faster and cheaper.

 

invision prototyping tool tubikstudio review

 

UI (User Interface) Design

 

User Interface is actually a finalized interactive field in which the user interacts with the product. It includes all the tools of increasing usability and satisfying target users’ needs and wishes. All the features of visual perception as well sound and tactile feelings influencing the product use and interaction with is should be analyzed and optimized here to the purpose of the app or a website is designed. For example, such aspects as color palette, types and fonts, shapes and forms, illustration and animation and so on and so forth are able to affect the performance of the final product greatly in both positive and negative way.

 

In general terms, the UX research and wireframing stage is about how the website or application works while UI is how it looks. Both these stages include work on successful interactions, but UX deals more with logic, connections and user behavior while UI stage provides visual representation of all the concept. It means that ideally designer should first work on UX part with concentration on layout, making it more powerful, thought-out, clear and easy to use. Without this vital work you highly risk creating pure mess out of the user interface.

 

After the UX part is tested by prototype, agreed upon and the concept of layout, transitions and features are accepted, the designer starts the UI design part. This is the time when a newborn heart and brain of your product is clothed with its skin and bones. Here the product gets its real color scheme, forms and features of the layout details, styles, animated elements and so on.

 

All the UI solutions directly influence the positive or negative user experience, so the processes of UX wireframing and UI design should mutually support each other and follow the same strategy otherwise the efficient solutions of one stage will not work on the other.

 

Tubik Studio

 

Animation

 

Telling about the details and benefits of interface animation used in mobile apps, we mentioned that the most efficient way is to consider this aspect through all the creative stages. However, the high time to apply it in practice is when UI design is basically accomplished and general stylistic concept is agreed upon.

 

Like everything that is put into the interface and process of interaction with it, animation must be a functional element, not just a decor. Considering motion elements while planning user journey around the digital product, designer should deeply analyze its potential for increasing usability, utility and desirability of the product before making a decision to apply it in the layout or transitions. Animation in UI requires thoughtful approach and always needs to have a clear purpose set behind. Advantages and utility of using it in interaction process have to be obvious and outweighing possible disadvantages.

 

tubikstudio ui design

 

After this stage is accomplished, the visual details approved and agreed upon, designers transfer the assets to developers who are going to do the magic of making them alive. Also, this is the good time to review the estimation once again and plan the clear sprints on development on the basis of thought-out design.

 

Software architecture planning

 

A noteworthy detail is that scalability is one of the most important things for a mobile application. Planning of software architecture can take place as a stage parallel to design. This is a complex process: it usually includes a lot of iterations, with a constant feedback loop between design team and development team. The main goal of architecture planning is to create constructive and integral plan for the software architecture of the app (front-end and back-end). At this stage developers decide on the most efficient technical and technological solutions for actual realization of the app and maintaining its operability. The decisions depend on various factors, for example the nature of the product and data it processes, complexity of design solutions, necessity to save data and availability of log-in functionality etc. Back-end development sets the bridge of the app with the web and supports synchronization of data in both directions.

 

iOS development

 

The actual process of coding the app here in Tubik is done in Xcode as the effective and flexible platform with broad functionality for iOS developers. As it is defined on the official website, «Xcode is Apple’s integrated development environment (IDE). You use Xcode to build apps for Apple products, including iPad, iPhone, Apple Watch, Apple TV, and Mac. Xcode provides tools to manage your entire development workflow—from creating your app to testing, optimizing, and submitting it to the App Store.»

 

Xcode only runs on Macs and has everything developers need to build iOS apps. There are no official ways to launch it on a Windows or Linux PC. This means that if somebody wants to develop an iPhone, iPad, Apple Watch, Apple TV and Mac apps but doesn’t have a Mac, he or she will need to buy it.

 

Two basic and most popular programming languages for iOS development are Objective-C and Swift — we considered benefits and drawbacks of each in our earlier post. Since 2014, Swift language has been used by Xcode for coding more often than Objective-C, which is a difficult language for developers to learn and code. Still, Objective-C is a good fit for early iPhone hardware which has less RAM and slower processes and it is also effectively applicable for maintaining and updating the apps initially created in it. Swift keeps step with modern hardware and it is also faster in the process of coding, it is more easy-to-use, shorter and secure. For creating iOS 10 apps, Xcode 8 and the iOS 10 SDK need to be installed, also available from Apple. There are significant changes to the Swift language and the SDK in this version of Xcode.

 

iOS development swift objective-c

 

In this phase of mobile app creation, iOS developers think over the architecture of the app, write the code, integrate functionality to created UI, edit source code, debug and finally export the app to the App Store. Also, writing unit tests and running integration testing are relevant steps in this phase. The Interface Builder is one of Xcode features and it is alternative to hand coding the client-side part, allowing developers to put the app code together visually. This feature allows dragging and dropping different visual controls into the app code. AutoLayout helps to control the app presentation based on the size of the user’s screen. With Storyboard, developers can see what each screen of the app actually looks like, while Preview Mode delivers a prior acquaintance of what the app will look like when it is done.

 

Lots of mobile app developers are of opinion that a text editor is generally necessary, even though it is theoretically possible to do the entire coding inside Xcode. Handling long and complex codes can become particularly confusing, unless programmers use a text editor that supports all relevant programming syntaxes.

 

ios development tubik swift objective-c

 
In most cases, while part of developers team is building client-side part, the other part are coding, integrating and linking to the front-end server-side components of an app such as database, APIs, middleware and etc.

 

It also should be noted that planning the workflow and the number of people involved into the development process depends first of all on the complexity and urgency of the project. For small projects, one iOS developer may be able to create all components of software architecture for the app. For multilayered complex projects, at least a couple of programmers should be engaged, having experience in software architecture and good expertise in both client-side and server-side development.

 

The main task of this phase is to make a fully working app which is scalable and integrated to all required server-side components like a database, APIs, and other related infrastructure it needs to run. If clients aren’t ready to build the original server-side infrastructure, they can buy a Backend as a Service (BaaS) software bundle or other products. The bundles include a variety of storage options and features, but they aren’t completely “turn-key” as well as they  often do not provide the options of deep and comprehensive analytics. It means the client needs a developer who understands back-end engineering to integrate it into the app.

 

web development

 

Testing

 

“Quality is never an accident; it is always the result of intelligent effort”, John Ruskin once said and it’s definitely true when it comes to a digital product testing.

 

Testing is one of the crucial phases of the entire app design and development lifecycle, it can help to find bugs before the app is brought out to actual users. App Store will not accept any apps that have compiling errors and bugs, so the mobile app being prepared to submitting has no chances with those kinds of issues. In the majority of cases, users abandon the app if it has functionality problems, no matter how promising and engaging it seems. Even the simplest apps can be successful for commerce, business, advertising and other aims if they work correctly and efficiently, according to target audience’s expectations and solving their problems .

 

Testing doesn’t mean that developers do not provide the upper quality. To set the analogy, the fact that every book, magazine or newspaper issue goes through editor’s eye doesn’t say that journalists or writers are not talented and qualified. Different specialists have different goals and skills in the process to increase general productivity and efficiency, and it works the same way for design and development of mobile apps. Supposing that developers have done a great job and made no mistakes, the task of testing is not only finding errors. Quite the opposite, it helps to understand the quality of the app and find the way to improve via real interactions.

 

mobile app testing

 

Automated testing got really popular now because it is effective, cheap and reliable. iOS Simulator and other testing tools such as Appium, Frank, Calabash and others are available to help to run the app through the testing process and point out the issues requiring attention. Continuous testing at all stages helps to keep small bugs from becoming major issues later on.

 

In the process of testing, developer usually goes all the way through the app on a device or in the iOS Simulator of Xcode, screen by screen, to ensure there are no bugs or errors and everything works properly. Fixing or debugging can be done right in Xcode.

 

All aspects of the app should be tested. Developers will need to check it across different devices (iPhone, iWatch, iPad, iPod, etc.) as the points like screen resolution, processors, battery life and memory will be different and can significantly affect how the app runs. They also test functionality (Do all the functions work well?), handling and loading time (Will it slow down if traffic increases?), and UX (How easy is it to use?). In addition to above-mentioned issues, developers review crash reports to see what should be fixed.

 

tubik studio developers testing

 
Here are some types of testing applied in the process of mobile app creation:
 

Functional testing. It is the most basic test for any application to ensure that it is working according to the defined requirements and there are no functions missed in the process of interaction.

 

Performance testing. This type covers client application performance, server performance and network performance. For example, it checks the performance specifications and behavior of the app under certain conditions such as low battery, bad network coverage, low available memory and etc.

 

Memory testing. This type checks that each application maintains optimized memory usage throughout the user surfing.

 

Interruption testing. An app may face various interruptions while working, such as incoming calls or network coverage outage and recovery. This kind of testing shows what will the app do under these conditions. The common types of interruptions are:

 

  • Incoming and Outgoing calls, SMS or MMS and different notifications;
  • Low memory warning
  • Cable insertion or removal
  • Network outage or recovery
  • Media Player on/off
  • The device power cycle, such as low battery notification etc.

 
Security testing. It checks vulnerability of the app to hacking, authentication and authorization policies, data security, session management and other security standards.

 

Usability testing. It is carried out from the early stages of app creation to verify if the app fulfills the established objectives and tasks getting a good response from users. As Joyce Lee, the representative of Human Factors Design at Apple mentions: «Usability answers the question, “Can the user accomplish their goal?»

 

Submitting / Release

 

Finally, there comes the day when the app is alive and ready to be introduced to its users. In order to be submitted to the App Store, it needs to join the iOS developer program. Apple reserves the right to review and approve the app before it can go live. In any case, it is advisable to plan around a week or so to have the information reviewed and approved by Apple. If the app will be used for commercial purposes, additional step to submission via filling in short surveys will be included in the process and will need the separate approval which is usually expected within a day. Process of  the app release in the App Store takes a few steps, including configuring the code, creating a profile, creating a listing, then submitting it through Xcode for certification. It might involve a few fixes and re-submissions, so it is helpful for iOS developer to know the ways and what to expect.

 

As you can see, the way, which a mobile application goes through, is quite complex and includes variety of steps ensuring its functionality, beauty and quality of performance. Don’t miss our next articles that will provide deeper insights into each of the stages as well as tools and tips for better design and development process.


 

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

copywriting tips

Tips by Famous Writers for Good Copy Content

Creating high-quality content for the digital product is the issue of the same importance as thought-out design and careful bugless development. Copy is what makes design even more powerful breathing deeper life and sense into the webpage or app screen. Copy is information. And information, as it is known well, is the tool of incredible diversity and the key to many doors.

 

William G. Pollard once wrote: «Information is a source of learning. But unless it is organized, processed, and available to the right people in a format for decision making, it is a burden, not a benefit.» Working with copy content for digital products, writers get even closer to the issue, as the texts they usually write are aimed at supporting the goals set behind a particular product, mostly solving problems or improving lives. Good copy strengthens design significantly, poor copy is able to kill great design solutions and hours spent creating code for the app of website.

 

One of our previous articles here in Tubik Blog was devoted to the topic of copywriting for UI. Today we would like to continue this theme with the set of practical and useful tips on writing from famous and recognized authors. They performed successfully in different genres of literature, mostly fiction, still many tips they give generally about organization of writing process, creative approaches and self-critique are applicable and useful for copy content of all kinds. Let’s review the first set and chalk them up for creating high-quality and user-friendly copy.

 

copywriting for digital products

 

You can’t wait for inspiration. You have to go after it with a club. (Jack London)

 

In one of our articles with tips for designers we have already unveiled this aspect of creative job, and the ideas which were offered are also fair for writers, especially those, who are working within particular tasks and products rather than in free creative flow. Creative people often say that they cannot work without necessary inspiration: they are just waiting for the muse which will help them to find the best solution. Like it or hate it, but muse which doesn’t arrive on time is not the reasonable explanation of broken deadlines or inappropriate result. Therefore, if you want to have the serious name and get respected by the clients, if you set the goal to have constant flow of projects and earn more and more, find the ways to call your muse when you need it, not waiting when it wants to come. By the way, the process of research and writing drafts is one of great ways. Appetite comes with eating, muse comes with working.

 

Write drunk, edit sober. (Ernest Hemingway)

 

That is another absolute truth for writers of any kind. Certainly, drunk is not meant literally here, still any writer knows that feeling of being a bit besotted by the idea under writing. When you caught the necessary state and vibe, you often see and feel the whole piece of writing in your mind and will wish not to stop until the last line is dropped on paper or screen. That’s the stage of pure creativity and it would be a big mistake to interrupt it: don’t hesitate, get dip into the process and write until the last full stop is reached. Still never ever show the result to the public: always take time to review and edit with sober and concentrated mind. This will let you see the small mistakes, misprints, duplication, poorly structured sentences and phrases. This will enable you to provide your reader with high-quality well-structured copy, which is the highest form of respect. So, in other words, write with hot heart, but edit with cold head.

 

The first draft of everything is shit. (Ernest Hemingway)

 

One more rule by Hemingway clearly echoes the previous tip. Always take the draft as just a draft. Any piece of writing needs revision, not only in the aspect of minor errors or technical alterations, but also reviewing the text thoughtfully after the first wave of inspiration has washed away and common sense comes into play. Review allows enhancing the initial idea with analysis, enables to feel the integrity and unity of general performance, estimate the appropriateness of stylistic elements and hierarchy of the elements etc.

 

The main rule of writing is that if you do it with enough assurance and confidence, you’re allowed to do whatever you like… So write your story as it needs to be written. Write it honestly, and tell it as best you can. I’m not sure that there are any other rules. Not ones that matter. (Neil Gaiman)

 

It’s quite easy to imagine this state of things for fiction writers, who mostly choose the theme and genre by themselves, but there will be many people saying that it’s impossible for copywriters: they write what they are told to write. Still, in this sphere the impact of sincerity and creative passion hasn’t been cancelled. Certainly, a great professional master will create copy for sometimes highly diverse themes: the trick is that in most cases this amazing proficiency level will be supported with the writer’s natural diversity and curiosity as well as broad outlook. People, knowing a lot, with lively and constantly learning minds, are able to get sincerely inspired by various issues and tasks. The best bloggers and copywriters are the ones who write on topics they really believe in and have something to share about — in this case, they have that great courage to write honestly and feel what the readers need to get from them. Finding your themes and strengthening in them has a huge benefit of getting tasks and being paid for writing on topics you really feel yours.

 

design4users blog

 

Always carry a note-book. And I mean always. The short-term memory only retains information for three minutes; unless it is committed to paper you can lose an idea for ever. (Will Self)

 

Certainly, in present-day reality notebook can get transformed into a laptop, the tablet, the simple app for taking notes on the mobile phone — it doesn’t matter.  What does matter is being able to take a note any moment a fresh thought important to remember comes to mind. Sometimes it happens you come up with a brilliant solution or word combination, the brand name or great headline being far from your workplace and that is not the reason to lose it. As well as it doesn’t mean you should stop anything you’re doing if the good thought on work issues occurs to you suddenly. A small note, a couple of words taken down anywhere will really help. They will save the thought, will set the small tag to enable the writer pull it out and use at the moment when it’s convenient. Many writers know this small secret is an effective step to creative productivity.

 

Always be a poet, even in prose. (Charles Baudelaire)

 

The tip can seem a bit unrealistic for non-fiction writing. However, it definitely works. Words are the great tool transforming not only sense and information, but also voice, tone and mood. One of the big mistakes about copywriting is thinking that it doesn’t present such a wide field of expressiveness and imagery as writing fiction or big publicist works. Vise versa: in vast majority cases, copywriting requires high and intensive creative word processing as texts are mostly concise and restricted with many limitations and still they need to inform users, create necessary mood, transform information and often — persuade or touch some sensitive layers of perception. Lots of mechanisms and methods used by fiction writers and poets can be applied in copywriting: synonyms, idioms, metaphors and metonymies, alliterations and assonance, hyperbolas and litotes, anaphoras and epiphoras added thoughtfully and properly to the copy let it reveal new shades of the textual content. They can make the copy more creative, more vivid, more human-like and original. Furthermore, they enable the author to set the unique style of writing that will get recognizable, which is in particular need for those who create quite big texts for websites and blogs, advertising materials or presentations. Being a poet means adding an original creative spark to what is written.

 

copywriting tips

 

 

When you can’t create, you can work. (Henry Miller)

 

Copywriting is not only creativity. It is also analysis and learning, obtaining knowledge about object and spheres the copy is created about, researching and testing the created copy, editing and proof-reading. There is always plenty of work, even for the moments, when you do not feel yourself flying on the strong wings of inspiration. One more thing to mention: creativity gets stronger with practice. If your mood today is not creative, then set the practical tasks for yourself and make your skills better for the moment you muse comes to help you.

 

You can fix anything but a blank page. (Nora Roberts)

 

In creative work, sometimes the only thing which is needed is taking the first step. Have you ever experienced the moment at an exam or test when you see the task and feel the surge of panic: «I know nothing on that! That’s total failure! Nothing to say! No single word!» and then after a minute or two, getting calmer and colder, you bring out the best of your potential and give the good answer? Supposedly, many people went through that. And this is the part of creative routine, in particular working with copy, which can go through the variety of stages, from «I don’t know anything on this topic» to «There are tons of texts on that, how can I create something unique and original…». The secret is simple: start writing. Any result of the process will stimulate your creative force. Perhaps, you will create something horrible that will obviously need rewriting, and that will be the result also: you will know what is definitely inappropriate for this task and feel how to fix it. Just turn the key with the first line to start the ignition.

 

Writers do not merely reflect and interpret life, they inform and shape life. (E. B. White)

 

This is particularly true for copywriters. In most cases, they don’t have the luxury just to reflect the life as well as their own thoughts and feelings. Their key professional aim is to inform people, sometimes to educate and give instructions, guide and help, solve problems and persuade, to shape values and stimulate opinions. This is not the set of pathetic expressions, this is a real ground for the great responsibility a copywriter bears every day. Considering it and forming the professional approach with deep respect to the readers provides useful and thoughtful copy.

 

tubik studio free ebook design for business

 

Do not … address your readers as though they were gathered together in a stadium. When people read your copy, they are alone. Pretend you are writing to each of them a letter on behalf of your client. (David Ogilvy)

 

This secret from the guru of copywriting has survived through several epochs of information and technology revolutions without any slight change. Readers still are keen to read something which they feel helpful and sincere, which appeals to them and brings a pinch or loads of actual usefulness or enjoyment.  As well as they do feel hypocrisy and purely technical approach to creating texts.

 

On the average, five times as many people read the headline as read the body copy. When you have written your headline, you have spent eighty cents out of your dollar. (David Ogilvy)

 

The principles of visual hierarchy have set strong rules for writers, journalists and editors for many decades, being transformed and revised for copy content created for digital products. It’s vital to remember: the text on a webpage or screen should be easily scannable and skimmable. And the first thing scanned by users is headlines. They need as much (if not more!) attention as the rest of copy. No wonder: in most cases headline is a crucial element of making the decision, it stimulates the reader to spent more precious minutes on further reading and creates first vibes of tone and style.

 

tubik studio home page design

 

If you’re trying to persuade people to do something, or buy something, it seems to me you should use their language, the language they use every day, the language in which they think. (David Ogilvy)

 

Writing for readers, know your readers. Using inappropriate style and language is able to destroy the chances of creating the text that will get target readers interested and wishing to read more. Surely, that doesn’t mean going to oversimplification and making your copy primitive aka clear for everyone. It means keeping the balance and making the text you create natural, first of all for the core target audience. So, definition and research of target readers is the important part of copywriting routine, preferably on pre-writing stage of working out a particular task.

 

If you want to be a writer, you must do two things above all others: read a lot and write a lot. (Stephen King)

 

It’s not a secret that practice makes perfect. Reading a lot, you get passive practice; writing a lot you level up you active writing skills. Both are crucially important for broadening professional horizons and setting up creative sails for every wind.

 

tubik studio reading list design

 

Use the time of a total stranger in such a way that he or she will not feel the time was wasted. (Kurt Vonnegut)

 

People, reading the copy you write, trust you the most precious of their resources: their time. Consider that,  respect their time and effort, make use of that time and do it in smart and elegant way — your readers will be grateful and happy while you will get this respect back in professional recognition.

 


Welcome to read the article about copywriting for UI

Welcome to read the free e-book by Tubik team Design for Business

tubik studio web development

Front-End Development. From UX Design to Code.

User interface serving the aims of positive and problem-solving user experience is one of the key aspects of creating digital product, still it’s web development that enables users to get real and live surfing experiences. With the course of time, more and more businesses are going online, so there appear some loose ends that need to be cured through user experience. In business struggle, everyone wants to please their customers and engage them to return again. Today, businesses realizing the value of thought-out and professionally built user experience are able to take the best from digital technologies and products. Full-cycle UX design gets its live version via web and mobile development transfroming step by step from subtle idea to real digital product.

 

Getting down to cases, online businesses are all about user experiences and of course the products and services they are selling. Have you seen websites like Amazon, eBay, AliExpress? They are convenient and helpful for their users even being huge websites that offer millions of products and thousands of services. The value of thought-out UX and efficient UI is irreplaceable. How could this result be achieved? This is the point when the power of front-end development comes into play to not just enhance the look and feel of website but also take the major role in increasing the level of user experience.

 

Tubik Studio design team

 

What is front-end?

 

All websites consist of structure, data, design, content, and functionality. Creating user-facing functionality is the task of front-end developer. Using a combination of markup languages, design, client-side scripts and frameworks, they create everything that users see and interact with: content, layout, and functional elements.

 

Three main parts of every website are: the client, the database, the server. The client is simply the web browser a person is using to load a site, and it’s where client-side technology is unpacked and processed. In a general way, a server is a computer, a device or a program that is dedicated to managing network resources and data. The server is at a remote location anywhere, it is holding data, running back-end of a website, processing requests, and sending response to the browser. The client is anywhere the users are loading a site: mobile devices, laptops, or desktop computers. Server-side scripting is executed by a web server; client-side scripting is executed by a web browser.

 

front end develoment tubik studio

 

Let’s have a closer look at this process.

 

The Server — this part of website is responsible for holding data, running the website’s back-end architecture, processing requests, and sending response to the browser.

 

The Client — requests pages from the Server, and displays them to the The User. In most cases, the client is a web browser.

 

The User — uses the Client in order to surf the web, fill in forms, watch videos online, in other words and interact with webpage.

 

web development server

 

To see how it works in practice, let’s take the flow of interactions with Tubik website for example.

 

The User opens his/her web browser (the Client), then loads http://tubikstudio.com/. The Client (on the behalf of the User) sends a request to http://tubikstudio.com/ (the Server), for our home page. The Server then acknowledges the request, and replies the client with some meta-data (called headers), followed by the page’s source. The Client receives the page’s source and renders it into a human viewable website. The User types «Case Study» into the search field, and presses ‘Enter’. The Client submits that data to the Server. The Server processes the data, and replies with a page matching the search results. The Client, once again, renders that page for the User to view.

 

Processes running in web browser are the following: when the page is in process of loading, scripts are embedded within and interact with the HTML of a site, selecting elements of it, then manipulating those elements to provide an interactive experience. Next, scripts interact with a CSS file that styles the way the page looks. It dictates what work the server-side code will accomplish and returns data that’s pulled from the site in a way that’s readable by the browser.

 

For example, when we open home page of Tubik Studio website, the back-end is built to pull specific data from the database to Client, while front-end scripts render this data into readable for human view webpage.

 

Front-end languages

 

Widespread client-side languages which front-end developers use regularly and have to know include:

 

JavaScript: With its frameworks and libraries, it’s the core of front-end development, and beyond. It is called the first client-side language and is still the most common client-side script on the web.

 

HTML: Every front-end developer has to know this language. It dictates a site’s organization and content and all interaction. HTML elements can annotate footers, headers, how text is displayed , how media and images are appeared, and more.

 

CSS: Cascading style sheets (CSS) is broken into modules and comprises the code for every graphic element—from backgrounds to font—that make up the look and feel of a website.

 

programming languages fron-end

 

Front-end frameworks

 

A framework is a hierarchical directory that encapsulates shared resources, such as a dynamic shared library, nib files, image files, localized strings, header files, and reference documentation in a single package. Here are some popular frameworks that are usually used.

 

AngularJS: This framework and several other JS frameworks, like Backbone.js, Ember.js, Express.js or ReactJS demonstrate the capabilities of JavaScript.

 

jQuery: It is a fast, small, JS object library that streamlines how JavaScript behaves across different browsers.

 

Bootstrap: This leading mobile-first framework includes HTML, CSS, and JavaScript to facilitate rapid responsive app development. With Bootstrap, website is compatible with all modern browsers and looks great on any size screen, from tablets to phones, from laptops to desktop computers.

 

Foundation: Responsive front-end framework is used by sites like Facebook, Yahoo!, and eBay.

 

Semantic UI: It is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

 

Yeoman: It is a generic scaffolding system allowing creating of any kind of app.

 

Pure.css: It is the set of small, responsive CSS modules that you can use in every web project.

 

Skeleton.css: As Skeleton’s developers stated: “A dead simple, responsive boilerplate.” It is the set of small and easy, responsive CSS modules that can be used in every web project.

 

web development framework

 

The next posts about web development are coming soon for those who are interested and in them we are going to tell you more details about different aspects of the job: the closest ones will tell about specific features and tools for back-end, web developers work flow, and trends for front-end development. Don’t miss!


Welcome to read the article about basic terms and tools of web development

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