Archives 2022

Making the height 100% according to the monitor’s height with css is sometimes an obstacle for some web designers, but actually the trick is very easy, they just don’t understand the trick. Or it could be that it doesn’t care about all the tags in the html.

Auto Height 100% Fullscreen CSS
Auto Height 100% Fullscreen CSS

There is a question on the forum asking him to make a very good design, it fits the monitor height on the screen 1366px x 768px, it looks very good, but because the website will be opened on a screen with a resolution of 3840px x 2160px so the height is not appropriate and the website so messy, leaving space at the bottom, even though the width is appropriate because it uses fluid or uses percent (100%).

So why the height is not appropriate?
Since it’s made at a resolution of 1366px x 768px it won’t fit on a bigger screen or it won’t work well on a smaller screen either.

The habit of web designers is not to think too much about the height of the html and body tags, even though therein lies the mistake. They only focus on the height of the tags (elements) that are in the body, such as headers and content for example, so take a look at the following structure.

Auto Height

Header

Lorem ipsum dolor sit amet, elite adipisicing consectetur. Perferendis, incidunt qui dolorem excepturi natus modi debitis voluptas nesciunt magnam adipisci possimus inventore doloribus amet quia voluptatum quas exercitationem obcaecati neque.

Lorem ipsum dolor sit amet, elite adipisicing consectetur. Placeat, laboriosam, officiis consectetur deserunt ipsam blanditiis laborum tempore ut esse exercitationem molestiae reprehenderit. Inventore, cupiditate similique vero culpa est neque fuga.

If you pay attention there if we want to create a fullscreen website using percent (%), we have to remember that all the tags have a height: auto property by default.
So if you want to make .header and .main fullscreen then we have to make the html and body to 100% first, then we set the tags inside the body as desired.

WRONG CSS: Usually many people use css as below so the results are not as expected, even though the height in .header and .main becomes 10% and 90%, it doesn’t work because html and body still have auto values ​​by default, not 100%.

If you have ever tried to change the background color or text color of social media profiles, blogger views, or maybe you are someone who is used to struggling with the world of web design specifically, you will often come across Hexadecimal color codes. This is a string of 6 characters – like “0066FF“, which we know is a color code, but few of us make the effort to understand the code.

In this article, Tutorial-WebDesign.com will discuss it a little so that we can better understand this RGB code.

rgb
Image by Kniveshot

Here is a simple guide to help you recognize website colors faster from their RGB codes. No more guessing or consulting color palettes.

Related article:

7 Tools for Creating Color Combinations
Learn Color Theory For Websites
color rgb

The RGB code is usually written like this #RRGGBB (RedRed GreenGreen BlueBlue), the first 2 digits show red, the next two digits are green, and the last two digits are blue.

Each number represents a certain color strength – FF0000 is just red (no green, no blue, because the last four digits are 0), 00FF00 means only green (no red, no blue). If all are present in the same strength as FFFFFF, you will get White, if no color is present, or all 000000, you will get solid black.

hexadecimal-base

Keep in mind that the hexadecimal number is a base 16 number system consisting of 0123456789ABCDEF, in color 0 means black, towards F means white.

If you want dark, you need to move the color to black or 000000. That means 880000 is darker than BB0000 which is darker than FF0000.

hexadecimal-darker

Similarly, if you want a lighter “lighten” color, you should move towards white or FFFFFFF. So FF8888 is brighter than FF4444 which is brighter than FF0000.

hexadecimal-more-brighter

The color combination is determined by the “strongest” color. So BB8844 is a reddish color, 33CC00 will be slightly green, and 777777 is gray (because it doesn’t have the strongest color)

hexadecimal-mix

Likewise, for example with the RGB color code for the blue color Facebook #3B5998 which is dominated by blue.

If you are not familiar with Hexadecimal arithmetic, you can use the standard Windows calculator in scientific mode to perform these calculations. Hex-decimal numbers use 16 unique symbols (0-F) as opposed to the decimal numbering system 10 (0-9), and the additional use of 6 characters in Latin letters A-F.

hexadecimal-base16

That’s it.
Hopefully it can help you understand how to read the RGB code of your website’s colors, see you in the next article from Tutorial-Webdesign.com, greetings web design & development Indonesia.

Often we are curious about the font used by a website, when we open a website and see an interesting typography we usually want to know the name of the font used by the website.

To find out the font used on a website, we usually look at the source code (view source) of the website page, then check the meta tags, or by unpacking the contents of the css file on the website and looking for the font-family property. Another way is usually by using firebug.

However, all of these methods are less effective and tend to be time-consuming, there is an easier and faster way to find out the font used on the website that we are currently opening, namely by using Fontface Ninja. With fontface ninja, we just need to put the cursor on the text we want to know, then the font name and font size will appear immediately.

Face Fonts

Installing Fontface Ninja

Fontface ninja is a chrome and safari extension (not yet available for firefox), to install it we must use the google chrome browser, then open the following link Fontface Ninja Extension.

Click the blue Free button
install fontface ninja
A popup will appear, then click the Add button
install fontface ninja 2
A notification appears that the Extension has been installed
install fontface ninja 3
To test it, we just need to open a website (in this example open tutorial-webdesign.com), then click the ninja icon in the top right, then hover over the text on the website page.
enable ninja fontface and testing
From there we can see that the font used in the website title of the Web Design Tutorial is KoolBean Regular
We can download the font used by clicking on the text that we highlight, then writing down the sample text, setting the font size, and pressing the download button.
Downloading Fonts
Distinguishing Fontface and Font in the image.
On the website page consists of text and images, sometimes in an image there is writing (text), we cannot know the type of font in the text that is in an image with a ninja fontface, to eliminate images on a website and so that we focus on the text only then we can press the MASK button on the top right when the Fontface Ninja extension is active.

In the process of creating a website there are several stages that will be passed in the process. In the early stages of this development, we will meet many clients discussing what the client wants with the web. Discussing features, content, images, appearance and so on. After the client explains what they want with the web and we accommodate it, then it’s our turn to pour what the client wants into the layout of the web page. Is it at this stage that we immediately put it in the form of a visual design? Open Photoshop and create a complete design with colors, textures, fonts, images and other design elements. Of course not, before entering the visual design stage, we need to put what the client wants into wireframes as an initial stage.

Wireframes
Wireframe Example

What are Wireframes?
Wireframe is the basic framework / blueprint of the web page that we will build. Broadly speaking, in this wireframe we place the important elements of the web page in their respective positions such as banners, body content, menu links, columns, footers and other features that will be on the web later. Visually the appearance of this wireframe only consists of boxes and lines that indicate the position of each element of the web page layout.

Wireframe Utilization Considerations

By creating a wireframe we help the client to focus on the main framework of the web page builder.
With wireframes we can lead clients to focus on features, elements and their position on the web without being distracted by color, typography or other design elements.
With wireframes that are just black-and-white boxes it will be easier for us to detect what is not working from the usability, functionality side. Like a wireframe house, it presents the layout of the house in the form of a draft where the position of the guest room, bedroom, bathroom, terrace, kitchen. So it will be easy for the client to see the functionality and usability side.
wireframe_sample2

Wireframe Making Tool

There are many tools that we can use to create wireframes including Cacoo, Jumpchart, Gliffy, Mockflow which have good toolset and features. There are also some who use Adobe Illustrator, can also manually use a pencil by sketching on paper.

Ease of Revision
With the wireframe, of course, it will be easy for us to fulfill revision requests from clients. We only shrink the banner box if the client feels that the existing banner is too wide. We only move positions from certain features to other positions if the client wishes to do so. If the client considers a certain button too small, it will be easy for us to revise it. Wireframe is very easy for us to make revisions without taking a long time.

Just because the color of the button that the client doesn’t like from the layout we design in the form of a complete mockup, the client may ask for a complete redesign, even though the layout is not problematic. We can face this if we are reluctant to go through the wireframe stage.

Save Time and Energy
By isolating the revision requested by the client only at the wireframe stage, it will certainly save time and effort. We can imagine that if we have to remodel the layout when the layout is ready in the form of a full color Photoshop mockup complete with colors, textures, typography, design elements or already in the form of an HTML/CSS page, it certainly becomes more complicated. Wireframes help us solve revision problems that allow us to focus on the next stage without being distracted by meaningful revisions.

Many people think that the job of designing a website is a complicated job that must be done by a designer in a short time. This statement is not wrong, but you can also become a designer for your personal website or blog. Of course I don’t mean website design from the start, but website or blog design by mixing and matching blog components to get a blog with a beautiful design.

Good vs Bad Design
Good vs Bad Design

1. Theme
   The theme provided in the blog service is usually the chosen theme from the many themes on the internet. You can just use an external theme for your blog on blogspot, but the theme you can choose from within the blogspot itself is actually good enough for you. Both in terms of compatibility, responsiveness, and support for SEO. Meanwhile, if you are a wordpress user, themes taken from the official wordpress catalog will be regularly updated. If the theme you use is a theme from outside the blog service, you will not necessarily get this benefit.

Some things to consider:

Trend theme (trend 2014 is a flat design blog theme)
Theme responsiveness
Type of blog (text blog, photo blog, magazine blog)
Blog theme (which can affect the blog color, font type, etc.)

2. Widgets
   Just like themes, there are lots of widgets that you can use to beautify your blog. But filling a blog with lots of widgets will slow down the loading process of your website, especially if the widget is taken from outside the blog service.

A few things to consider:

The fewer widgets, the faster the blog will load
Widget function (clock widget, for example, doesn’t need to exist because everyone who opens your blog obviously already has a clock on their computer or smartphone)
Music widget (everyone has their own favorite song, don’t force your blog visitors to listen to your favorite song)

3. Fonts
   Since launching the new interface for the dashboard, those of you who use the blogspot blog platform can replace all the fonts on your blog with the font of your choice. Starting from standard fonts such as Arial, Tahoma, and Verdana, to such complex fonts. It’s not wrong for you to use any font for your blog, but it doesn’t mean that your readers will like the font too. If you want to change the theme’s default font, make sure that the replacement font is easier to read than the previous font.

Some things to consider:

Target blog (Use standard font for info and news websites, comic sans font for blog vent for example)
Comparison of the size of one font with another font
The fewer fonts used in a blog, the faster it will load

4. Flash
   HTML5 is rumored to be a strong replacement for flash which is heavy and requires a lot of loading time. But today there are still many websites that have a flash component in it. Maybe the widgets, maybe the ads, or maybe the whole website itself is flash.

Suggestion : Minimize all widgets that are flash widgets. If the entire blog is flash, change your blog service, because at this time Google can’t index flash.

5. Advertising
   The more websites that have a target to earn money from the internet, then many ad scripts are installed on the website. Unfortunately, many who place these ads do not pay attention to the design of their own blog. Starting from pop up ads, to click traps. Using ads in this way can get you banned from the advertising services you follow, it can also damage the beautiful design of your blog which results in visitors running away.

Here are some things to consider:

Follow Google Adsense rules (maximum 3 ads in one page)
Don’t use pop up or floating ads
Place the ad in a spot that is easy for visitors to see and access

The five points above can be a direction for all blog or website owners to design their blogs easily. What must be remembered, the appearance of the blog does not have to be full of all the knick-knacks of personal favorite, because not necessarily the visitors who come need all the knick-knacks 🙂

There are still many who question the scope of work of web designers and web developers, especially what I have observed, namely in our country, Indonesia. In forums, in real life, whether it’s at the office or in stalls or cafes when web workers are talking, the topic of a web designer’s scope of work and what a web developer’s job is is still an exciting conversation.

The main problem is actually only one, web designers only want to make designs in Photoshop and don’t want to touch things that smell like code, while programmers only want to touch code and don’t want to know about design matters. the end is either with PHP, Ruby on Rails or Java.

Web designers don’t want to touch web editors, Web programmers don’t want to touch applications like Photoshop?

WHAT IS THE SOLUTION?

If you both don’t want to give in like that, how about we just add one more job term in this web world, we’ll call it:

PSD to HTML & CSS SLICING WORKER
So he is the bridge between web designers and developers who are both selfish. HAHAHA It’s too naive. It’s superfluous if you just do the slicing, someone else has to, considering that the term web designer is actually very clear.

Some web designers usually limit their work only to focus on making designs. What design? web design or layout design for brochures, posters, banners, pamphlets, invitation cards or business cards? all of which will be printed later?

When in fact the scope of work is clear, wikipedia writes like this

The web designers are responsible for the visual aspect, which includes the layout, coloring and typography of a web page. Web designers will also have a working knowledge of using a variety of languages ​​such as HTML, CSS, JavaScript, PHP and Flash to create a site, although the extent of their knowledge will differ from one web designer to another ~ Wikipedia

WEB DESIGNER TASKS
When it comes to web designers, it is clear that their job is to design a website, the design will be opened or enjoyed on a screen such as a computer screen, mobile phone screen, tablet screen, web design is not a design that will be printed such as brochures, posters, banners, or others. magazine cover because that’s the job of a graphic designer. Of course, this is very different, the media is also very different, the graphic designer’s work is more dominant in making designs for print media, while the web designer’s work will be opened on a monitor screen.

Designing a Layout Concept (Wireframing)
Wireframes
Image by Eddie Lobanovskiy

The web designer’s first task is to design a website layout, these layout designs vary, some just make wireframes with doodles on paper or with tools to create other wireframes such as balsamiq or Mockingbird, some just imagine in their brains and immediately make them on the screen. photoshop, some are directly in the browser.

Blueprint

Designing Layouts Visually
After making a layout design in the form of a wireframe, then of course making a visual form, can be in photoshop, firework or gimp.

UI Design
Image by Paresh Khatri

Here web designers can channel their ideas in making every element on the website, giving color, placing images and others.

The web designer must of course have explanations about the design he made, usually this is fully documented, why he chose a certain color, what font to use, and so on.

Convert Visual Layout to HTML and CSS
Visual appearance alone is not enough, to be considered as the design of a website, the visual display must be able to run and must function properly when opened in a web browser. For that, of course, it takes a conversion process from Photoshop, Firework or Gimp files into HTML and CSS forms so that they can run properly in a Web Browser. Usually known as Slicing, because most web designs are made with Photoshop.

In this section the web designer cuts up the visual design that has been made into image pieces. The point is, of course, so that the images used on the website will not be large and burdensome, besides the use of cutting the images, namely in order to be able to determine which parts are either text or images that can later be made dynamic and which parts are only static.

Creating Layout Markup (HTML)
The task of the web designer after the slicing process is to arrange the layout of the elements on a website according to the visual form that has been made previously, to arrange the layout, of course, knowledge of markup language is needed, namely HTML (Hypertext Markup Language).

Who is responsible for how long the delay of a slideshow is? Of course the web designer, so the web designer will determine how long the delay (pause) for the appearance of the first and second slides will be.

Who is responsible for displaying the website on a mobile screen? Of course, a web designer, so he must understand the use of Media Query in CSS if he wants his website to appear responsive. Or he has to understand the term Fluid Layout if his website wants to have its own mobile version.

Make sure the code is correct (Validation)
Of course the quality of the code must also be considered, whether the code made meets the standards or not, so the HTML codes that have been created must be validated with existing tools such as W3 Validator (http://validator.w3.org).

Revision or Update (Version Control | GIT)
Git Branch
Image by Drew Neil

Sometimes when the display is finished and has been done by a web programmer, it turns out that the design is not perfect, there are errors. And the web designer must correct the design. For collaboration between web designers and web programmers, usually a team uses software such as Git, so changes that have been made by designers are pushed with Git, so that later if something goes wrong again it won’t be difficult to manage. So web designers must also understand the use of software such as Git.

Done…

After becoming a complete HTML and CSS template, complete with the effects used such as slideshows, dropdown menus, then it is recommended to web developers to be processed into a dynamic website so that later a website that was only a few HTML pages can finally become a large-scale website. large that has thousands to millions of pages.

So it’s clear that a web designer’s job is to make a layout design for a website and that layout must work well if it’s run on a web browser, all of the work above doesn’t have to be done at all, sometimes some start from wireframe, some start directly from Photoshop. without making wireframes because all the ideas are already in the brain, some even make designs directly from the browser (design in browser) without having to design in photoshop because web technologies such as CSS and HTML are now more sophisticated, everything is fine, wherever you start , the point is that the job must be able to run on a web browser. But of course it would be better if the steps were followed properly.

In the next discussion we will discuss the Jobs and Duties of Web Programmers…

The growth of mobile device users has seen a tremendous growth in recent years. According to data from IDC in 2013, smartphone vendors shipped 1 billion smartphones worldwide. Smartphones have a share of 31.4% of the total mobile phones worldwide. What was surprising was that in 2012 there was a growth of 300 million units with an average growth of 38.4%.

Currently personal computers (desktops and notebooks) no longer dominate in accessing web content. Mobile devices such as tablets and smartphones also have a large population in accessing website content, browsing, socializing, shopping, transacting. Players in the world of information technology such as news portal sites, blogs, social media, corporate web sites flock to go mobile.

RWD_vs_mobile

According to the Mashable website in August 2013, 17.4 percent of global web traffic comes from mobile devices and this number will continue to grow until 2014. This means that almost 1/5 of global web traffic comes from mobile devices, will this trend continue in the future? keep going or slow down. No one can know for sure, what is clear is that this trend is ongoing.

In this paper, I want to share about the phenomenon of the extraordinary growth of this mobile device which is related to the website, namely responsive websites and mobile websites. Discuss the advantages and disadvantages between the two. The source of my writing is taken from several blogs that discuss responsive web design and mobile websites.

What Are Responsive Websites and Mobile Websites
Responsive Website
A responsive website is a website that can adjust its layout based on the viewport size of the device used, starting from a smartphone, tablet or computer screen. A responsive website can provide an optimal experience for users with minimal resizing, scrolling and panning. The development of mobile device technology so rapidly gave birth to mobile devices with different screen sizes with so varied brands. Smartphones produced by various vendors have size variants. With a responsive website, the website can adjust to the viewport size of the accessing device.

Mobile Website
Mobile websites in principle are the same as websites in general, which are made with HTML, CSS, javascript, PHP. But the difference is that the mobile website is made to be optimal for the screen size of mobile devices such as smartphones or tablets. When we access a web that is made for a computer/laptop desktop screen using a mobile device, there will be horizontal scrolling and zooming which of course disturbs the user’s comfort (bad user experience). With a mobile website, of course, there will be no more problems with horizontal scrolling and zooming.

With the phenomenon of the growth of mobile devices, content providers feel the need to create separate websites, namely websites for desktop users and mobile web for mobile users. However, since the idea of ​​responsive web design by Ethan Marcotte, there has been a new trend in the form of the idea of ​​one website for all devices. Although it is inseparable from the pros and cons of the idea of ​​one website for all devices among web professionals, here we will look at the advantages and disadvantages.

RWD_vs_mobile2

Advantages
Responsive Website

Having a responsive website means that you only have 1 website but it can be accessed by various devices with different screen sizes
Having only 1 website means ease of maintenance
By only having 1 website, it is certainly more cost-effective
By only having 1 only need 1 domain address
By only having 1 website, you don’t need additional efforts and costs for marketing, it’s different if you have a responsive website as well as a mobile website
Mobile Website

Creating a mobile website is not as complicated as making a responsive website
For news and website publications, we can customize so that the most updated news, only important news is displayed on the mobile website
Designed from the start to be accessed via smartphones with relatively small screens, so that users will get the maximum user experience
Deficiency
Responsive Website

Longer loading time than mobile web, because responsive web must load all existing images and scripts
Disturbing the placement of ad banners, the position of the ad banner will obviously be affected by the responsive nature of the web that adjusts its layout based on the screen size of the device. As we know many blogs, web news that rely on revenue from advertising
Responsive website development requires higher costs due to the complexity involved in responsive websites
Mobile Website

With a mobile website means that it must have two different URLs. For example, a mobile website has a URL that starts with the letter m. We can take an example: www.

How do web designers design a website so that the website provides maximum benefits to its users? so that users can consume the information on the web comfortably, users can use the web efficiently, users can get what they are looking for on the website quickly. In other words, users can get a pleasant experience from the website which is called user experience (UX).

Many things can be discussed related to this user experience because the scope is so broad. However, one that I will discuss related to user experience in this article is the layout aspect, namely the grid — Web design uses a grid.

Grid

What are grids?
Grid is a structure consisting of horizontal lines or a combination of vertical and horizontal lines that meet each other that is used to arrange layouts or interfaces. With this grid we divide a layout based on columns, then with these columns the content is arranged and placed.

Grid is not something new in the graphic design world, it is used as a tool to design print media such as book layouts, brochures, posters and so on. Grids provide guidelines to designers where design elements should be placed in a layout.

Benefits of Grid in Web Design
One of the goals of a web designer is to create an interface where users are easy to understand, easy to navigate, easy to read the content and also assist users in following the flow of information conveyed through the website. For this reason, an efficient design is needed, namely a design that does not take up the user’s time but is also effective, namely a design that successfully delivers messages to its users.

Grids help designers map out different design elements to be placed on the layout and connect the elements that make up the layout of the web page. So that it gives the impression of order on the web page, which in the end visually produces a clear and organized layout structure.

Goals achieved with Grid
Whatever the method or technique used in designing a website, of course the main priority is the user, not the owner or the designer himself. How to design a web that makes it easy for users to access it, comfortable in finding the information they need, there are no things that interfere with user comfort, navigation is not confusing, everything is clear and orderly. The key word is user experience, it is important and becomes the main consideration for every decision in the design process.

Thus what is the role of the grid in achieving the above stated objectives? So that users can get a pleasant experience from the website. The role of the grid here is to help designers design a web that is structured and organized in terms of layout, the grid system helps designers place elements that are different but still harmonious and balanced. This results in a design that is efficient, effective but still visually appealing.

Also Read:

Creating HTML Grid Layouts with Less
Application of Grid in Web Design
The use of grids in web design is by making vertical lines on the website layout that will be created. These vertical lines will form columns with the same width with the distance between columns with the same width. We do this process when the new design stage is at the wireframe draft stage or it can be at a further stage, namely when making a design comp.

Also Read:

Take advantage of Wireframes as an Early Stage of Web Design
grid

Image 1

grid2Picture 2

In the example above (Figure 1), we use the 960 grid system which is popular among web designers and developers. In the example above using 12 columns with a total width of 960px, the width of each column is 60px. Columns are represented by pink vertical blocks. By using this grid system we align the design elements that we create based on these columns.

We take the example of navigation elements (menus), let’s say there are three menus (menu1, menu2, menu3) on this web. These three menus will take up 12 columns in total, meaning that each menu will take up four columns equally. To see the results of the grid on the design, see (Figure 2). In (Figure 2) we can see that the grid helps the designer to make the design more organized, more structured with the width of each element balanced.

Conclusion
To get a good user experience on a website there are many things that must be done. This is because the user experience includes everything on the website itself, such as typography, interface, information architecture, content, readability,

Reviewing the Responsive and Adaptive New Design of Okezone.com – Rarely do we see surprising news about changes in the appearance of large websites in Indonesia, a few months ago what attracted attention was the redesign of the Kaskus website. However, today there is a redesign that caught the attention of tutorial-webdesign.com, namely a change in the appearance of the okezone.com website which is arguably very good. And quite different from other well-known news websites in Indonesia which still use a fixed layout.

website redesign okezone

As we know okezone is a well-known and well-known news website in Indonesia, of course it has very large data because their news updates are practically every second. But the courage of their leaders to make the legal website responsive or adaptive is really interesting. Their leaders who previously led Yahoo! Indonesia, namely Roy Simangunsong, has his own view regarding the design of the Legal website, according to him, in this new version of Okezone, Roy intends to focus his services on users and not solely for advertisers. “Content, technology and sales are the three main pillars of the new Okezone,” said Roy as quoted by TWD from dailysocial.

Roy said that this new design is not without reason, “all components in this new design are based on feedback from Okezone visitors over the past 4 months”. Over the past few months, Okezone has really collected as much information as possible about how visitors consume content on Okezone, and uses that information as a reference for a new design. Wow, it turns out that feedback that is listened to well can produce very good changes, yes 🙂

Responsive Design.
Responsive design is indeed a separate solution in the era of very rapid development of tablets and smartphones, Legal sees this quite seriously, they apply it to the new design of okezone.com, the new Okezone website is designed optimally for tablet devices which according to Roy is one of the best. device that is most comfortable to use for browsing. But Roy also added that the new Okezone site also supports smartphones as well as desktop sites, and to provide an equally engaging experience for different screen sizes is a challenge in itself.

Roy wants to make Okezone a news site that is Vibrant and Young, vibrant which means it is continuously updated and follows the existing technology trends, but is also passionate like young people. “We deliberately made the concept of Vibrant and Young, not the other way around. We may not be young people (by age) but we are still excited to bring and implement new technologies that can add value to Okezone,” said Roy.

Fixed Menu.

If we look at the okezone website, it also uses a fixed menu to make it easier for visitors who want to choose another news category when we scroll.

Also Read: Creating Fixed Menu When Scrolling With CSS3, Jquery & HTML5

The new okezone responsive layout was created using twitter bootstrap.

Single Sign-On
In addition to the new design, Okezone also launched its own Single-Sign On (SSO) called OkezoneID. Later, OkezoneID will be implemented in various online properties under the MNC media group, although Roy admits that currently OkezoneID can only be used to leave comments and subscribe to one news channel. With the rise of existing SSOs such as Facebook, Twitter logins and others, Roy admitted that he wanted to provide an integrated experience, and that would be difficult to do if he didn’t use his own platform.

Ambition to be the Top 3 News Websites in Indonesia
With the launch of this new design and concept, Roy and the Okezone team have quite high ambitions. “We want to be in the top 3 local news sites by the end of 2016,” he explained. According to Alexa’s ranking, currently the top 3 local news sites are still occupied by Detik (#9), Kompas (#10) and Liputan6 (#13), while Okezone is at number 35, ahead of Kapanlagi (#36). This target is not impossible to achieve, especially with the power of the MNC conglomerate behind Okezone.

For those of you who are curious, let’s just enjoy the responsive web design ala okezone.com

Hopefully it will inspire other big news websites in Indonesia to make their website design cleaner, more modern and of course responsive 🙂

Greetings web design & development Indonesia..

Source of Inspiration for Web Designers – As a web designer, inspiration becomes an important thing in the design process. Every designer must have experienced a deadlock in getting ideas to be poured into their work. Meanwhile, web designers themselves face time constraints in their work process, namely deadlines. Not infrequently ideas actually come at crucial moments, but unfortunately we can’t force ideas to come closer to what we want.

Often we don’t have ideas, but what we can do as designers is to stimulate those ideas with the inspiration we can get. We can get this inspiration from many things around us. But don’t be in a hurry by opening an online web gallery with the aim of getting inspiration, then easily copy-paste styles on certain websites on the website that we will create. Of course that’s not what inspiration means, but by capturing that inspiration then managing it into further ideas to be poured into a design.

Inspiration for web designers
Image by Justin Meissen – flickr.com

In this article I try to explain what we can use as a source of inspiration that is around us outside the website.

Magazine
Magazines are print media that are full of graphics such as advertisements, layouts and photos. We can make a lot of inspiration from the above. In general, magazines and websites are designed using graphic design principles. So even though magazines are print media, the web is online media, it does not mean that the two media are completely different. In some ways they are different, but in many ways they have something in common. In magazines we can find inspiration from the layout, font selection, color combinations, composition, focal points, negative space.

We can also learn why one magazine is more visually appealing than another, whether it’s because of its attractive cover, whether the font combination is right, whether it’s a more organized layout, or because it’s equipped with good photos. We can use this as a case study for us to apply in web design.

mag1

Sports Illustrated

Games
Games have become a big industry with big consumers too, whether it’s game consoles like XBOX, Play Station or computer games. The graphic development in the game has been extraordinary in the last 10 years, both in the characters in the game and the supporting graphics. We can explore the characters in the game one by one starting from the face, hair, costumes, accessories, weapons, vehicles used. What makes one character appear more attractive than another, appears more dominant than another.

game1

Dragon Age: Inquisition

Film
Almost everyone likes to watch movies. Watching movies is often used as a favorite entertainment activity, treating boredom, and filling spare time. There are many things that we can use as inspiration from the films we watch. There are many things that we can observe and use as inspiration from the costumes of film players, both in terms of style, color and texture. It could also be the property in the film which includes buildings, cars, interiors of houses/buildings and their contents.

Especially for science fiction films, we find unique forms in vehicles, weapons, buildings, equipment, to characters in the form of creatures or animals that we do not encounter in the real world. Regarding the dominant colors in the film, it can also be used as inspiration. We will get to know vintage colors in films with 60-70 settings, youth-themed films with light colors, or dark and dramatic colors in themes. epic movies like 300 or The Hobbit. All of them are very good references for us

movie3

The Hobbit

Photo
Photos are an important element in visual communication, including in web design. It’s hard to imagine a website without a photo/image either as a product image or as a message conveying element. One image/photo can represent 1000 words, which means that a photo is a very important element in conveying a message.

Quality photos from the photography side will inspire web designers to determine what kind of photos will fill the websites they create. They will know better in choosing photos that can convey messages to website visitors effectively.

image1

National Geographic

billboards
Billboards are objects that are relatively easy to find, especially in provincial capitals. They are at T-junctions, crossroads and other strategic places. They exist as advertisements for a product ranging from instant noodles, telecommunications providers, beverage products, vehicles, property, or as cash