Production & Development

Multi-device adjustment, design testing, etc. merged into development process to create a quality output.

Web design and development

Armed with knowledge and experience that we obtain from developing website from different industries, we’re able to provide web system environment. with optimum planning & design starts from new website development to renewal of existing website.

Please contact us if you have any website related issues that you might have.

We create design concept that connected to logical strategy

Talking about design, people might think that taste and talent is highly required in this field. However, to create a great design, the most important thing that required is ‘Idea’. Especially on website development. We believe that logical website strategy for UI design will bring success to a website.

Item that need to be shown on concept design

Marketing strategies, target analysis, UX design etc. are strongly reflected in content that is told as a design concept. In the category of design concepts, this is a case-by-case how to deal with this, but the material design concept mainly defines the following themes

• Design Definition
• Design Role
• Technical trend explanation
• Basic Usability
• Target Characteristic
• Value & Psychological
• Brand Keyword
• Picture scale position
• Preferred image by target audience
• Color guideline
• interaction Definition
• Other element design definition

To create high quality visual design, we focus on concept and creation process

Visual design term in design refer to process where entire concrete design and visual design are finished and attract interest from many company. However, because of its high demand, highly visible and technique tend to be missed out, most of the time discussion advance with more visual impression. Based on that design concept, from previous discussion have to be present. Furthermore, Development process management are required. Because of that, i will pursue high quality design without losing the sight of what kind of design should be done to ensure our business requirement are met instead of ad hoc.

The followings are visual design development process:

Design Planning

Monitoring design concept sources and reference design, while implementing ideas to deepen the discussion. We’ll also create an environment where design will be assessed correctly with all the expertise required for design consideration, such as marketing guideline, trend technology and basic usage theory.

Design Submission

First off, I will create 1 – 2 on screen design and discuss it. Not to confirm the design at the same time. but to narrow ambiguous idea within the concept. We will deepen the discussion while creating variation with color scheme as needed.

Design Confirmation

Accepting feedback on the initial design. We will narrow down the design direction and refine it. Normally after 2 – 3 times refinement, the design can be confirmed.

Design Implementation

Based on the basic guideline that has been determined, we will expand design to other screen resolution.The target within this phase is main screen which has become the determined. If you’re considering responsive website, you’ll also see display for smartphone and tablet within this phase.

Design Development

After the main design format has been determined, we will create design that required for further into HTML. Icon button as well as varying pictures based on each page, will be developed within this phase

We do programming by considering performance savings and processing speed.

HTML and CSS coding is based on clear rules based on predetermined guidelines. The contents of the details depend on this case, but we will do the programming with the following policies.

HTML

Unless specified, as explained on HTML 5.0. UTF-8 for character code and CR + LF will be adopted as a standard. We intend to provide source code that appropriate with web standard and possess a logical document structure.

CSS

To separate information and design and realize logical and very versatile coding, design specifications are all done in CSS. CSS 3 is the standard for the description format, and the design philosophy that fits the project is adopted. It aims at general purpose design and is very scalable, and even when updating on the client side of the company, you can easily interpret the CSS structure, modify and update.

JavaScript

We will prioritizing implementation of Javascript and jQuery (third series) with syntax equal to ES grade 2015. We store functional source code expendable and error/bug-free. Aside from that, because webpack are used to divide files are used to separate processing method, the size of description file will be very small since our intention is to create a simple interpretation even when updating from client’s side company. Furthermore we will respond if there is certain library or framework required

Plug-in / Eksternal File

Basically, plugin will not be used. If PDF are required, icon will be used instead

Multi-Device Compatibility

Most of the case the issue is multi-device complaint and another case is responsive web. Furthermore, we will utilize flexible layout to realize independent design from screen resolution.

We modify wordpress and create similar function with advanced CMS

With our experience in handling CMS, it is safe to say that we’re familiar with WordPress implementation, especially realizing function similar to paid CMS based solution.There are a lot of plugin on WordPress, however we will only use a few that we have tested previously.

We will realize form that doesn’t drive interest to client website

This will include one form that affect the success or failure of a website. For example, request page and request information page is a destination of one website and landing page is conversion point. Even if you spend money, attract user and show them a great content, if you lose visitor from landing page, intention to attract user and content will be a vain effort

Simplified Entry Format

You can convert half-width and double-byte character correctly, inserting zip code and phone number automatically on server side with no concern on forcing the user to do the input. Specification that force input format to user should be totally eliminated.

Inline validation

The most constricting thing about input form is error message. After finishing all the input, error message will be displayed and letting user to do it over again is one factor that people are leaving behind. Make sure to apply inline validation on the form that we make and check the error where you place to ensure no retry form as much as possible.

Dynamic Input Change

In term of form where information change are based on choice, display/non-display item input are automatically activated. Based on that, we will only display fields that only required, decreasing psychological burden on input or avoiding unnecessary input as much as possible.

Utilizing Automatic Input

When entering zip code, you will be able to enter address automatically or you can automatically have Katakana inserted when you type more than 1 Kanji. By collecting this kind of intelligence, we will eliminate unnecessary as much as we possibly could.

Big Input Field

By providing a big input field as wide as possible, you will encourage user to input data psychologically. Furthermore, by using label attribute, radio button and checkbox, you will facilitate user to do repeated click

Pulldown From Radio Button

It will require to click to choose from, and everytime will be visible from the start, unlike pull-down menu where you can’t see every choices unless you click on it. Radio button that you will be able to choose will be entitled to users, with easily navigated UI. Based on the item selected, we will choose UI as minimum as possible

Item number remainder

Will explain to user how many item are left. To clarify how many items left that need to be filled will have a psychological impact on users constraint.

Deactivate Submit Button

Because the input is not finished yet, or you accidently pushed the submit button, you may allow users to feel psychological constraint by showing error message. If input doesn’t finish during the first place, do consider to deactivate the submit button to avoid constraint as mentioned above.

Providing information on confirmation screen

Depend on the product being sold, by providing information on the confirmation screen, you might be able to drive upsells, cross-sells or providing a useful information. Do consider your confirmation page if you want to provide useful information without disturbing user’s experience.

Flow line on confirmation screen

When user are leaving the page once they reach confirmation screen. However, you can increase their interest or drive upsells or cross-sells based on your usage. We will arrange flow from confirmation page accordingly

We will develop through step in security measure and create a website that totally safe.

Security is not a serious measure unless you only run an organization website. Despite that, there is a number of consideration for security such as login to CMS management page. We will take a security measure for website by doing preventive action on the following item

Use page with a lot of item check and try to keep error as low as possible.

It is said that hundreds of environment can be seen through website right now. It’s not something strange if variance within user reaching over 1000 even for website that has thousand of sessions. It is impossible to cause an display error or execution on website that being accessed by various device, operating system and browser. Furthermore, mistake happen within different probability regarding place that requires assessment visually because of inability to use the device and part that being developed.

Even though it’s hard for a website to prevent a 100% mistake like this, the possibility to decrease the frequency by developing production process and format checking. We do 100 item assessment with page check and three phase before, during and after production. By doing this, we try to decrease error from happening as much as possible.

Pre Production Check

Item that need to be done before starting the development, by not doing handover or extra work after the development, we decrease error probability. Page check are being used to determine initial confirmation about detailed specification. On this check, main item check will be explained.

Under Production Check

During production, we will check each pages separately. For part with different behavior depend on browser, check target browser type. During each item on the checklist are not modified or altered.

After Development Check

Web production have many phase that couldn’t be confirmed unless that’s visual inspection. Even if you’re checking using checklist, that will eventually happen and we tend to miss them. For this reason, we check each item that very crucial before production, production check and take out check system that will only bring critical mistake.

After Publication Check

If there’s no error on data delivery, perhaps not running well during production environment, or data delivery are not correctly stored or broken. Because of that, we always check the website even after publication.

We also provide measurement tag which required to measure website result

Based on the KPI determined on strategy phase, to review a website performance, It’s very important to set log analysis tools and adjust it with Google Tag Manager. To us it appropriately, you need to adequate information on tools, marketing and programming when doing a complex measurement.

As a tag manager, we will do the following steps. This is especially for google analytics. It is important to know that we’re doing the same steps toward other measurement tools as well.

• • google analytics profile setting
  • google analytics interface setting
  • linking to google search console
  • linking to google adwords
  • creating custom report that will be frequently used

Introducing website with special lighting that consider strategy, SEO and user behaviour

A core value from a website is in it’s content. Therefore, it’s very clear that we only need to post content that meet the strategy concept on a website. There is a  various selection of photo, illustration, picture and interactive assets on content representation, however, text selection still become a mainstream consideration. If this text quality is low, your key message will not be directed to users and it will be difficult for content to function in strategy. In conclusion it’s important to know that content is important.

Because its importance, we will actively support copywriting. Unlike what customer refer to advertising copy, Web copywriting is all about ‘how to express’ instead of ‘What need to be expressed’ by considering characteristic the corresponding each website media, we will copywriting based on the following item:

• • Adopting keywords used by user, not the one that used by in-house developer
  • Including keyword search in category and page name
  • Creating page name that easily attract click result on SNS
  • Emphasizing headline so the content transmitted through heading without reading the body text
  • Considering logical tag such as H1 and H2 and including useful information to the text body
  • Prioritizing long translation with rich information instead the shorter one that less informative
  • Phrases that will be included have to be in the right volume and density
  • Labeling tag that will become ‘to do’ phrase

Regarding translation, we don’t need to actually create it due to we have a pattern. However, we will respond flexibly based on characteristic and project request.

• • We will provide a full manuscript
  • We have rough draft and will perfect it
  • Receiving original manuscript, revising it extensively
  • Scope on creating a new text

We provide translation manuscript such as English and Japanese.

With market globalization, website that required to handle multilinguization increase. Aside company that grow globally, website that require translation in addition to Bahasa Indonesia are increasing. In multilinguization, there are a number of option. By considering strategy, content efficiency and budget, we will propose an optimum method.

In multilingualization, there are the following choices. Taking into account the strategy, content content, efficiency, budget, etc., we propose an optimal method.

Mirroring type

This is an multilinguization website that connect one-to-one with Japanese website. Aside from the specified language, it has similar to Japanese website. This is adopted in a business where business material, strategy and content are similarly the same in Japan and from global location. Normally used by software development company or relatively manufacturer.

Content Extraction Type

Primary website structure with Japanese website, however its a form of multilinguization site that only localized a number of content and provide a partial original file. Basic strategy are the same, however this method will only adopted if product varies from one country to another

Different Website Type

This is multilinguization site that developed as a stand alone from Japanese website. This type will be chosen if the product and services are the same from one country to the other but with variety of strategy. Because of its marketing strategy are reflected within each country, in most case we’ll leave the strategy to the country related.

Small Website Type

Even though only grow aboard. This is the type of multilinguization that only have less than 5 pages which adopted from small scale test expansion which has not become a full project yet. Because it’s not a good idea to add expenses, this web stored as minimally as possible, with information spread as cheap as possible.

Automatically Generated Type

By using automated machine translation without any human involvement. There is a huge disadvantage.in term of cost, rough translation, non translated image only offering the same content. The only advantage is small initial cost.

Furthermore, when translating manuscript it’s required for multilinguization to decide and obey external company that assess the content expertise. In regards of multilinguization including translation, we will continue with the following steps.

1. 1. Website definition and its content that obey multilinguization
   2. Content definition from multilinguization target
   3. Web structure definition from multilinguization website
   4. Web structure definition from a web page multilinguization
   5. Organization information about multilinguization target website
   6. Translation request to translation company
   7. Translation manuscript reflection on website

More importantly, we will do it together, including the character code and language layout.

We provide high quality photo and video source based on content and application

Not used to handle picture, illustration and still image on a website, we will consistently produce a creative work

Picture and illustration are very important to design a website, in recent year, video production has become more easier and this is a great decision for content representation.

For photo, we use high quality picture but with affordable price. In case of taking picture with immaterialize object and hard to picture, we will create design with appropriate photography material. However, based on the theme used, we can use paid picture from the internet but pleased remember that picture on the Internet might be used by another company. To avoid such issue, we advise you to conduct photography session.

For materialize object, the service will be difficult unless you have a picture with real image on it. Image will be needed in hiring real working website.The result depend on the picture taken and entry number might change.

In case of illustration and picture, we will propose our need after considering strategical needs. user need, content characteristics etc so its not going to be a stepping stone for expression. For the picture need, photographer, videographer and illustrator will be outsourced and i will help you with the selection process.

Production process illustration.

Illustration of production is carried out with the following process.

1. 1. illustration requirement consideration
   2. Creating initial design
   3. Illustration specification detail (production point, ,motive, etc.)
   4. Illustration draft
   5. Illustration selection (actual number)
   6. Illustration illustration
   7. Rough sketch
   8. Creating outline
   9. Coloring
   10. Data loading
   11. Converting into design