Create A Website In 10 Easy Steps

create a website design a website how to code websites how to create websites step by step website web web design web design process

Create A Website In 10 Easy Steps

SEM 09.40 Komentar

Creating a website is a complex process but like any process you just need to take it step by step

This article discusses the 10 steps involved in designing and creating a website. While the web design process is a more theory based guide to approaching a web design project, this 10 step guide is more practically focused. Even if you are a total beginner, web design novice or web design student you can use these steps to successfully create your own website.

1. What is the aim of the website..?

All websites can be allocated into just 3 types...

Information:  

These type of websites simply supply information on a specific topic or topics that they hope people will find useful, sometimes just a bio and contact information of a business. The information is usually provided for free (but not always) and you can then monitise the website  through placing ads. This website is an example of an information focused website.

Entertainment: 

These type of websites provide entertainment for the visitor usually through videos, music or games. YouTube a is a prime example of an entertainment focused website. The information is usually provided for free (but not always) and you can then monitise the website  through placing ads.

Transaction: 

The name says it all really! These websites allow you to buy and/or sell goods online. Amazon and eBay are probably the most well known buy & sell focused websites. These websites usually have little or no ads as they make their money from the sales. Any ads are often for their own products.

Once you recognise what the purpose of your website is you should research existing websites of the same type to see what the competition are doing. After your research decide what the key aim of the website is. This may be for the visitor to click on a specific link, to make a sale, to contact you etc. Whatever it is you need to decide. You can have more than one aim for your website but you should still specify the key aim.

2. Plan The Layout (based around the key aim)

The layout of your website will be key to directing the visitor towards the outcome you want to achieve.

Whatever the key aim you decided on in the previous step now is time to plan out how best to achieve it. This might be through make a certain element pop up, be larger than others, be strategically positioned or colored, be animated, be framed etc. It could even be through multiple methods. Whatever you decide, create a sketched layout to display where you intend to place the different elements of the website.

There are even web design theories on how best to achieve this. The F Layout and the Z Layout  and the Gutenberg Diagram are the 3 most common.

3. Select An Appropriate Style 

Once decided upon a strategic layout for your website and armed with a sketched layout to work from you will next need to decide on an appropriate style for the website. By style I am referring to the colors, fonts and imagery that will be used in the website. It is very important to select a style appropriate for the website and not one based on your favorite colors or fonts as these may not match well with the website's purpose.

Colors...

You should create a colour swatch for your website design project

• Color emphasizes, highlights, and leads the eye to important points or links.
• Colour identifies recurring themes (i.e. titles and subtitles are usually the same colours).
• Conversely, colour can differentiate, such as different colours in pie charts and bar graphs.
• Color symbolizes and triggers emotions and associations.
• Create color schemes at www.paletton.com

Fonts...

With so many fonts to choose from it can be hard to pick one

Legibility and readability refer to how easy a font is to see and also read as a block of text. Sans serif fonts are easy to read than serif fonts and mono-space are very legible but not very readable. For more about sans serif, serif and mono-space read this.

Appropriateness of fonts is similar to appropriateness of colors, choose a font based on it's suitability to the website and not based on your personal preferences. For free fonts go here.

Pairing fonts is a difficult business but in terms of websites the key tips are to never use more than 3 fonts (too cluttered) but never use less than 2 (too boring). Your body text should always be a relatively simple sans serif font while your headings can be any appropriate fonts once they are legible. For more advice on pairing fonts check out http://fontpair.co/

Font size is a very important aspect that must also be taken into consideration. When choosing a font size, one should keep in mind that choosing sizes closer to one another for various levels within your site will output a more professional and elegant webpage. 

Font emphasis is also an important factor as not only will font emphasis aid in search engine optimization, it also alerts viewers to what is important on a page or where the links are located. Search engine spiders look for phrases that are either in bold, highlighted or between header tags. These phrases are deemed as important. One can therefore control keywords by placing them in bold or italics.

TIP: Always use a minimum of 2 and a maximum of 3 fonts in your website

Images...

There are now millions of free images available to web designers 

Professional: Don't even dream of using any out of focus, blurry or just generally amateur photos and don't get me started on clipart, suffice to say it's not a good idea. There are plenty of quality and free stock photos and graphics available at website such as Pixabay, Pexels and FreeImages.

Appropriate: As with the colors and fonts be sure to choose a photo based on it's suitability for the website not just because it is a "nice" photo. Also try to stay clear of the dull, lifeless stock photography which litters corporate websites the world over. The use of icons or graphics instead of photos is now a common practice and allows users to "read" the website more easily and quickly.

4. Gather and Create Website Content

A website is made up of a wide range of content types like text, images, videos and udio

This one is pretty self explanatory. Once you have decided on the style of the website design you want the next step is to get organised by finding or creating all the content you need. When I say content I am referring to text, images, video, audio, custom fonts, files for download etc.

As well as gathering and/or creating the content you will also need to Optimise the content in terms of file names and file types. The file type of audio and video in particular can effect is they will load on a particular browser and also how quickly they do load. Read more on that here. In general MP4 for video and MP3 for audio are your best options.

"An image tells a thousand words" or so they saying goes, however they are also big files which can be slow to load and therefore damage your websites' load speed and user friendliness. Softwares such as Photoshop have specific tools to optimise the size and file type of the image for you. Free alternatives like Gimp and online editors such as Pixlr are also great options.

Depending on the method you choose for the actual creation of the website you may need to store content in order to link it from your website. For images Flickr or Picasa are best, YouTube or Vimeo for videos and Google Drive, One Drive or Drop Box for files.

5. Learn HTML and CSS (the basics at least)

HTML and CSS are the building blocks of all websites

Whatever method you choose to create a website through you will still need to know the basics of HTML and CSS in order to make the most of your website (No matter what you have been told!).

Even WYSIWYG website builders like Wix and Weebly (more on those in a moment) use HTML and CSS in the background and if you want to tweak the design or add custom widgets you will need to know basic HTML and CSS.

We have a nice and simple 10 step guide to learning HTML and another for CSS. You can also visit the W3Schools website for information on specific aspects of HTML or CSS.

6. Create the website (5 methods to choose from)

There are 5 main ways to create a website

So now that you have the basics of HTML and CSS it is time to create the actual website. It may seem silly to say this but if you have flicked through the article straight to this section I really recommend going back to the beginning! So many people jump straight in at this stage and waste a lot of their time because they have not completed the previous steps. Don't say you weren't warned.

With that little rant over, lets look at your options for creating the website.

Programmed from scratch: 

If you have good HTML and CSS skills or perhaps you are really enjoying the W3schools tutorials I recommended earlier then this is an option for you. It is also the most cost effective option but also the most time consuming. Komodo Edit is an excellent free code editor which you can use to make programming your own website a little easier.

Start with a template:

If you want to program the website yourself but need a little bit of a helping hand getting started then perhaps a website template is the way to go, just be sure to get a responsive template to ensure your website is as user friendly as possible. You can choose from an amazing 100 free responsive website templates here. A template is a great idea, especially for new web designers, just be sure to customise it!

Website builders:

Website builders advertise themselves as the easiest and quickest method to create a website. Companies like Wix and Weebly are the best options for this approach and they both offer a starter package where you can get online with a free sub-domain name and free hosting. However, in my opinion, this is not a good option.

Website builders always seem to result in very rigid web designs, the free domain name is not a full domain and they tend to overcharge you for a full domain name. You often need to upgrade to a paid account to go to a custom domain too and the monthly or yearly pricing structure is usually quite expensive. Bandwidth restriction, custom ads and storage space are other things that often need to be paid to unlock. In summary, this wouldn't be a choice I'd recommend.

Content Management Systems: (Recommended Option)

CMS for short, content management systems are similar to, and often confused with, website builders. The difference being a CMS website design and structure is often created by a web designer first before being handed over to a client who only has access to a front end to make basic updates.

However, especially if you have learned some HTML and CSS, you can take charge and create the website design and structure yourself using systems like Blogger and Wordpress. Which one is better is constantly being debated online with my personal preference being Blogger (read why). Whichever you choose this is a great option which offers you templates to get started, widgets to drag and drop in while still having access to the HTML and CSS to make advanced or specific changes and tweaks.

Hire a web designer:

If you don't have the time to learn how to build a website, need to have complex functions or a very specific look... and you have a budget, then you will want to outsource the work.

Be careful who you hire, though. A poorly developed website can cost you money, drive away customers, and hurt your reputation. Following a few basic steps will increase your odds of hiring a creative, technically savvy, and cost-effective design firm or freelancer.

7. Purchase a Domain Name (and hosting)

Select your domain name carefully

Depending on the method you chose to create the website you may also need hosting space for the website but all methods require teh purchase of a domain name. There a far too many domain name sellers to list and too many good ones to compare so what I generally advise is buy local.

Choose a company from your own country as if anything goes wrong you only need to make a local call instead of a national one and smaller companies can often deal with any issues you have more efficiently.

If you can afford it, I would also recommend purchasing a national and an international domain name extension to maximise the impact your website has in search engines in your own country.

8. Launch the website

Once the website is created and you have a place to put it and an address where people can go to view it then you are ready to go online. If you used a website builder or a CMS you may have already been online so there is not too much to say here.

Most web hosting platforms will have their own instructions and methods to upload the files to launch the website so I will not go into that either. I'll just say congratulations!

9. Perform SEO

Search Engine Optimisation is key to having a successful website

It may seem silly to be performing Search Engine Optimisation after you launch your website but realistically you need to anlayze your websites' online performance through Google's Search Console (webmaster tools) and Google Analytics before making any tweaks to your websites content.

SEO is a tedious task and requires attention to detail, a selecetive use of language and the optimistaion of all web content. You can read our top 10 SEO tips to help make it a little easier.

10. Market the website

"Build it and they will come" does not apply to websites! They must be marketed

Once SEO has been performed you should see an increase in traffic to your website but you will also need to market and promote the website through other methods to maintain and more importantly increase traffic.

The use of social media platforms is the most cost effective method of advertising your website to a large audience but don't try to use every single social media method as you simply won't have the time and an out of date or inactive account will only put people off. You will be better off choosing 3 or 4 methods and being as active as possible on those platforms to build your audience and keep them engaged. I would recommend Facebook, Twitter and then 1 or 2 others.

If you are regularly creating new content for your website, through a blog for example, then sending email newsletters is also a good way to remind people about your website and encourage them to return to access the new content. Mailchimp is definitely the market leader in this area.

Finally, you can always try to get other people to do it for you! By using share buttons or similar on your website you will encourage visitors to share your content with their contacts. It's a great method if it works but relies on you providing quality content otherwise it will not be shared. Addthis is an excellent option to easily integrate social sharing into your website.

Baca selengkapnya

Graphic Design Styles

design genres design styles graphic design graphic design styles graphic design types graphic styles graphics

Graphic Design Styles

SEM 09.31 1 Komentar

Which Graphic Design Style Is Right For Your Project?

At the start of any graphic design project, you wonder what style should I choose? what style do I like? what style is best for the topic? what style will I feel comfortable with? Whether you're designing a single image or a full house style / company brand the style you use will be dependant on the what is most appropriate for it.

The following list of graphic design styles is not a definitive list but rather a selection of some of the most common or popular graphic design styles, more styles exist and more are being created all the time. You should use this list to gain a basic understanding of common graphic design styles and what is involved in each of them, how they differ and how to create them.

Victorian Style Graphic Design:

Samples of Victorian Style Graphic Design

The Victorian era of Britain was the period of Queen Victoria’s reign which ran from 1837 to 1901 and was a time of strong moral and religious beliefs. The Victorians loved complex and ornate objects and this influence filtered through to all areas of design including architecture, furniture, interiors, fashion, typography and commercial art. 

The Victorian style was deeply influenced by their nostalgia for objects from the past. The Victorian design style almost always filled the entire page with images and type. Typical design elements of early Victorian style were the use of outer decorative borders and elaborate typography. Symmetry was also used heavily in layout and design.

Later Victorian style tended to use the decorative borders less but still used ornate type and romantic imagery. Typography through the Victorian era generally appeared in a curve or wave and was commonly encompassed in a banner.

To Recap, the main characteristics of the Victorian graphic design style are...

• decorative outer borders
• elaborate typography
• symmetry
• highly ornate and 'busy' imagery
• very few straight lines or edges

Back To Top

Arts & Crafts Style Graphic Design:

Samples of Arts and Crafts Style Graphic Design

The Arts and Crafts movement was an international movement in decorative and fine arts that began in Britain and then flourished in Europe and North America between 1880 and 1910, later re-emerging in Japan in the 1920s. It stood for traditional craftsmanship using simple forms, and often featured medieval, romantic, or folk styles of decoration with heavy use of textures and illustrated initials.

Arts & Crafts advocated economic and social reform and was essentially anti-industrial. It had a strong influence on the arts in Europe until it was replaced by Art Nouveau and Art Deco before being eventually displaced by Modernism in the 1930s.

To Recap, the main characteristics of the Arts & Crafts graphic design style are... 

• reused traditional/older style features
• simple forms
• illustrated typography
• lots of textures

Back To Top

Art Nouveau Style Graphic Design:

Sample of Art Nouveau Style Graphic Design

Art Nouveau is a style of decorative art, architecture, and design prominent in western Europe and the USA from about 1890 until about 1920 and was characterised by intricate linear designs and flowing curves based on natural forms and an 'earthy' colour palette.

These identifiable flat, outlined illustrations and hand-drawn typefaces leads to Art Nouveau sometimes being confused with Art Deco, but there is a clear distinction between the two. Art Nouveau looks hand drawn and prefers natural lines and shapes to the highly geometric shapes that define the Art Deco style.

To Recap, the main characteristics of the Art Nouveau graphic design style are... 

• intricate hand drawn style
• linear based designs
• use of natural forms
• regularly features female form

Back To Top

Futurism Style Graphic Design:

Samples of Futurism Style Graphic Design

Futurism was not only an art movement but also a social movement that developed in Italy in the early 20th century. Although it was largely an Italian phenomenon, there were parallel movements in Russia, England and elsewhere. It emphasized speed, technology, youth, and violence, and objects such as the car, the aeroplane, and the industrial city. It was a movement that particularly despised not just certain aspects of classical antiquity, but everything that was not totally new - the antithesis of Arts & Crafts 

The painters of Futurism were particularly successful and they often broke light and color down into a series of dots or geometric forms through a process called divisionism. Futurism influenced many modern art movements of the 20th century which in turn influenced the development of contemporary graphic design.

To Recap, the main characteristics of the Futurism graphic design style are... 

• eclectic style
• featuring or using new technology
• offset text
• some cubist influences
• no traditional features

Back To Top

Art Deco Style Graphic Design:

Samples of Art Deco Style Graphic Design

Art Deco had it's heyday in the 1920's and 30's but, as a term, it was not coined until 1925. Art Deco uses sharp, aero-dynamic shapes, Egyptian zigzags, motion lines and, in more modern times, an airbrushed / grainy look. Perfect examples of the Art Deco graphic design style can be found in period comic books, old car show posters, book covers and movie posters.

These images are defined by geometric shapes, bold curves, strong vertical lines, aerodynamic forms, motion lines, airbrushing and sunbursts  Unlike the Early Modern style, Art Deco highly exercises its use of illustrations and graphic representations of everyday objects. But these features do not do justice to the spirit of the Art Deco style which was bold, positive, industrial and often futuristic and one which emerged from a world rising from the ashes of WW1.

The Art Deco style itself has also seen a rebirth in recent years, having become increasingly popular over the last decade.

To Recap, the main characteristics of the Art Deco graphic design style are... 

• bold geometric shapes
• use of motion lines and sunbursts
• high contrast in colours
• flat (in terms of depth)

Back To Top

Heroic Realism Style Graphic Design:

Samples of Heroic Realism Style Graphic Design

Heroic realism is a term which describes art and graphic design used as propaganda. Examples include the Socialist realism style associated with Communist regimes, and the very similar art style associated with Fascism. Its characteristics are easily identifiable from the name; realism and the depiction of figures as ideal types, heroes or symbols, often with explicit rejection of modernism.

Heroic realism designs were used to propagate the revolution in the Soviet Union during Lenin's time. Both socialist art and Nazi art were explicitly ordered to be heroic and romantic, and were in consequence idealistic rather than realistic in form and style.

To Recap, the main characteristics of the Heroic Realism graphic design style are...

• realistic imagery 
• usually featuring one person
• promoting an ideal
• strong message in the text
• clear, bold font

Back To Top

Early Modern Style Graphic Design:

Samples of Early Modern Style Graphic Design

Early modernism was a time when artists and designers broke from tradition to create a new style of design which would influence all artists and designers around the world. Early modern artists were described as new or experimental, as they changed the way others saw design and art.

Following on from some of the ideals of the Italian Futurists the Bauhaus was creating a new design philosophy, putting a design's function before its form and rebelling against tradition in preference of anything new and different. This style became known as "modern" and was the start of the rebelling against tradition that has carried through time influencing all the other art and design styles of the world.

To Recap, the main characteristics of the Early Modern graphic design style are...

• geometrically based
• minimalistic approach
• clean type
• more photos, less illustrations

Back To Top

American Kitsch Style Graphic Design:

Samples of American Kitsch Style Graphic Design

The Art Deco influence of rounded streamlined forms and enthusiasm for modern ideas continued to inspire design of all kinds for many years after the 1930s and American Kitsch design of the 1950s took futuristic styles even further with dramatic curves and space-age forms. Kitsch design was also characterized by its script fonts, informal shapes, and cartoon-like illustrations.

Kitsch is a German word meaning "in bad taste". In design, kitsch had been used to describe art or design that is pretentious, vulgar and displays a complete lack of sophistication. On the other hand, the idea that something is so bad that it’s good is how "kitsch" became a term ironically embraced by the American designers using that style.

To Recap, the main characteristics of the American Kitsch graphic design style are...

• contrasting imagery and fonts
• bold, vibrant colours
• aerodynamic shapes
• people in dramatic poses

Back To Top

Late Modern Style Graphic Design:

Samples of Late Modern Style Graphic Design

Late modernism encompasses the overall production of most recent art made between the aftermath of World War II and the early years of the 21st century. The terminology often points to similarities between late modernism and post-modernism although there are differences while the predominant term for artwork produced since the 1950's is Contemporary Art.

Known for, distorted geometric shapes, and informal layouts. The only aspect of this style that isn't informal is the type, which was devoid of decoration.

To Recap, the main characteristics of the Late Modern graphic design style are...

• distorted geometric shapes
• informal structural layout
• plain, simple, non decorative type

Back To Top

Swiss/International Style Graphic Design:

Samples of Swiss Style Graphic Design

Often referred to as the International Typographic Style or the International Style, the style of design that originated in Switzerland in the 1940s was the basis of much of the development of graphic design during the mid to late 20th century. Led by designers at the Zurich School of Arts and Krafts and the Basel School of Design, the style favoured simplicity, legibility and objectivity.

Of the many contributions to develop from the two schools were the use of, sans-serif typography, grids and asymmetrical layouts. Also stressed was the combination of typography and photography as a means of visual communication. The primary influential works were developed as posters, which were seen to be the most effective means of communication.

To Recap, the main characteristics of the International graphic design style are...

• use of negative space
• very 'clean' and simple
• sans serif fonts favoured
• asymmetrical layouts

Back To Top

 Psychedelic Style Graphic Design:

Samples of  Psychedelic Style Graphic Design

The psychedelic movement began in the mid 1960’s and had an effect on many aspects of popular culture. This included style of dress, art, literature and philosophy. The name “psychedelic” refers to drugs that were popular with the youth culture of the time. Posters for rock concerts tried to visually express the feeling of tripping out. The visual motifs of psychedelic art include Art Nouveau-inspired curvilinear shapes, illegible hand-drawn type, and intense optical colour vibration inspired by the pop art movement.

Use of abstracted curvilinear shapes, clashing colours, hard-to-read fonts. Rarely used in today’s designs, the trippy posters of the 60's are the most easily recognizable contribution of the Psychedelic style.

To Recap, the main characteristics of the Psychedelic graphic design style are...

• influenced by the prevalence of hallucinatory drugs 
• featuring abstract swirls of intense color 
• curvilinear calligraphy reminiscent of Art Nouveau. 
• intense optical colour vibration

Back To Top

Post-Modern Style Graphic Design:

Samples of Post Modern Style Graphic Design

Post-modernism didn't have much impact on graphic design until the middle of the 1980's. Initially, many designers thought it was just undisciplined self-indulgence. A hodgepodge of styles, with no unifying ideals or formal vocabularies, dreamed up by students in the new graduate programs. But in fact it was a new way of thinking about design, one that instigated a new way of designing. This mixed up style is characterized by a tilted axis, collage-like illustrations, overlying figures, and impulsive decoration. This style has been used in varying degrees since its first uses and, if used correctly, can give projects a unique expression.

They created works beginning in the 1970s without any set adherence to rational order and formal organization. They also seemed to entirely pay no attention to traditional conventions such as legibility. Yet, while post-modern design did not consist of one unified graphic style, the movement was an expressive and playful time for designers who searched for more and more ways to go against the system.

To Recap, the main characteristics of the Post Modern graphic design style are...

• collage like illustrations
• overlapping elements
• impulsive and playful
• tilted axis

Back To Top

Grunge Style Graphic Design:

Samples of Grunge Style Graphic Design

A recent design evolution, this emerged post millennium and is easily recognized by its extensive use of distressed textures, unrefined edges, and a seemingly nonsensical approach to layout.

In such grunge designs dirty stains, torn images, 'broken' icons and creased pieces of paper are as popular as hand-drawn elements and dirty textures. The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note. And dirty textures are often used as background images for navigation menus, photos and overall layouts. Usually these elements are regular objects from our daily life, replicated in their real form without any glossy effects.

To Recap, the main characteristics of the Grunge graphic design style are...

• Dirty textures and background images
• irregular lines and frames
• coffee rings, spilled out liquids and dirty stains
• torn paper and dirty edges
• hand-written elements

Back To Top

Flat Style Graphic Design:

Samples of Flat Style Graphic Design

Flat design is a current design style and trend, minimalist in nature, it was initially used in graphical user interfaces such as websites, web applications and mobile apps. The flat design style is now also commonly seen in graphical materials as posters, arts, guide documents, publishing products.

Flat design is primarily influenced by the International Typographic Style (also known as Swiss Style), Text User Interface, Modernism, and the styles emerging from Bauhaus. The International Typographic style is often considered the most substantial influence on flat design and is regarded as the starting point of flat design, although the flat design style itself would not make an appearance until the dawn of the digital age

To Recap, the main characteristics of the Flat graphic design style are...

• minimalist
• no depth
• neutral tones
• straight lines
• use of negative space

Back To Top

Quick Overview...

The Graphic Design Timeline - Click to enlarge

Back To Top

Baca selengkapnya

How To Become A Web Designer

careers careers in design careers in web photoshop web web design web design career web designer work as a web designer

How To Become A Web Designer

SEM 09.30 Komentar

Some Info About Web Designers

The role of the web designer, is to create the 'look and feel' of a website. What this actually involves can vary, depending on the size of team the designer is part of, or the type of company they are working for or where the designer is working alone or in a very small team.

The designer must combine creativity with an awareness of the tools, techniques, processes and technologies that will be used to build the website. The role sometimes also overlaps, or may even be merged with, that of the web developer or programmer, especially in smaller companies or teams.

Designers may be employed in permanent positions within a company, or may work on a freelance basis. Among freelancers, there tends to be most demand for those who are both good designers and have good all round technical expertise.

What is the job?

A web designer produces visuals of user interfaces, using software such as Adobe Photoshop or Illustrator. They usually follow a design brief that may be given as verbal instructions, a written specification or 'wire-frame' diagrams.

The designer will normally produce a separate visual for each type of screen within the product, for example the home page, first-level and lower-level pages of the website. As a minimum, these visuals must show the sites' layout, colour scheme, typography and any images or other features. However, they usually also specify, either through annotations or additional visuals, how interface elements should respond to interaction by visitors to the website. For example, this might include specifying colour or style changes for links that are clicked or rolled over, or designing animated buttons or menus.

Designers must prepare designs in a way that allows them to be easily implemented by developers programmers. This means designs must be appropriate for their intended purpose and visuals must be provided in the right format and at the correct size and resolution. Sometimes the roles are combined, with the designer-developer or designer-programmer being responsible for implementing their own designs, especially where the entire interface is animated or where a HTML and CSS based web design approach is being used.

Skills Needed:

If you want to become a web design the key skills that you will need include...

• Can use the web design process.

• Good drawing and diagramming ability.

• Awareness of design principles, elements, composition and other design theories.

• Knowledge of relevant design, image manipulation, and asset optimisation software.

• Good interpersonal communication skills, especially when dealing with specialists in other disciplines.

• Ability to manage time, prioritise tasks and work under pressure.

• Knowledge of the requirements of the relevant Health and Safety legislation and procedures.

• Basic HTML and CSS knowledge to allow you to work better with web developers.

Typical career routes

The job tends to be divided into various levels of seniority, based mostly on experience. As a general rule, the greater the seniority, the more responsibility the designer will have for the overall user experience, including the design of navigation, features and functionality. At junior levels, Designers tend to be tasked with only some aspects, typically the visual styling, of the interface.

There are no typical career routes, but many web designers come from a traditional design background, such as graphic, print or information design. Sometimes they combine this with experience or study in a more technical subject, such as computer science, engineering, mathematics or psychology. It is this combination of creative and technical disciplines that tends to set the best web designers apart and enables them to progress into more senior positions.

Essential knowledge and skills
Designers need creativity and artistic flair but also a certain amount of technical understanding. The nature of web design means that they must often design within many unknown or variable parameters, for example, the user's screen size, or the amount of content to be included on a web page.

The designer must therefore be able to identify these factors and think laterally so as to produce flexible designs that work correctly in a range of circumstances. They need to understand usability issues, the principles of interaction design, and any user-interface standards that are relevant to the website.

Training and qualifications

Although there are now various specialist web design courses available, many designers' qualifications are in more traditional art-related subjects. Architecture and product design are particularly useful backgrounds, as they tend to encourage the combinations of creative and technical thinking that web design requires, design in its broadest sense. Experience is generally valued most, however, and a good portfolio of web design work is essential.

Baca selengkapnya

Principles of Design

balance contrast design principles design theory dominance principles of design proportion repetition rhythm Unity

Principles of Design

SEM 09.29 Komentar

The Principles of Design

It is recommended that you read the notes on Design Elements before reading these notes as some of the terms used here are explained in that section.

There are 5 basic concepts or theories in the area of design, collectively known as the principles of design; they are Balance (Alignment), Rhythm (Repetition), Proportion (Proximity), Dominance (Emphasis) and Unity (Harmony). Theses principles are sometimes know by different names hence the brackets.They represent the basic rules of how to arrange a composition and create a successful design. In order words they guide us in the way we arrange the elements of design. Sometimes we look at an image or object and we find it aesthetically pleasing or easy on the eye but we may not quite understand why. The reason is that one or more of the principles of design are at work. These principles can be applied regardless of the style or genre of the design being created..

Balance:

Balance refers to the arrangements of design elements within a composition, how they relate to each other and the overall composition. Elements can have different visual weights dependent on their size, shape or colour and if positioned poorly they can unbalance a composition. There are two types of balance - symmetrical and asymmetrical.

Symmetrical balance

Symmetrical balance is where the weight of a composition is evenly distributed either side of the centre point of the composition, usually horizontally or vertically (although radial symmetry is also possible).

Asymmetrical balance

Asymmetrical balance is where the weight of a composition is not equally distributed (but is still visually balanced). This is much harder to judge than symmetrical balance but can be more visually interesting.

Contrast:

Contrast refers to the arrangement of opposite elements in a piece so as to create visual interest, excitement and drama. This can be done in a variety of ways such as through light vs. dark colours, rough vs. smooth textures, large vs. small shapes, etc.

contrast

Dominance / Emphasis:

Dominance (also known as emphasis) may seem similar to proportion but is actually more to do with the visual weight of an element. The dominant part of a composition is the one that stands out the most or appears closest to you. There are 3 stages of dominance: dominant, sub-dominant and subordinate.

dominance in weight and positioning

Dominant is the primary object/area, the one with the most visual weight, usually appearing in the foreground.

Sub-dominant refers to the secondary object/area, usually found in the middle ground of the composition.

Subordinate objects/areas carry little visual weight and usually appear to recede into the background of the composition.

Rhythm:

Rhythm can create a sense of movement in a composition by repeating or alternating elements (often but not always in a pattern). There are 3 main types of rhythm, each defined by their suggested meaning or the feeling they evoke in the viewer.

Progressive Rhythm

Progressive rhythm shows a progression of lines or forms to create a sense of moving forward or up.

Flowing Rhythm

Flowing rhythm implies a more natural sense of movement in a composition through the use or wavy lines or fluid forms usually or unequal size and length.

Regular Rhythm

Regular rhythm is where the elements used are of the same or similar size, length and weight and are positioned in a pattern (usually but not always).

Scale / Proportion:

Proportion (also known as Proximity) is simply the comparative size of elements (usually shapes) relative to each other or the overall composition. Proportion can be used in a composition to create a sense of distance or demonstrate a size difference. Proportion can also be used to create or unhinge the balance in a composition as their visual size and weight will automatically establish themselves in the composition.

Unity / Harmony:

Unity refers to the relationship or connection between the various parts within a composition and their relationship or connection to the composition as a whole, it is often achieved by utilising a number of the aforementioned principles. Unity can give a sense of entirety or wholeness to the composition or equally break it up and create a sense of variety or disharmony.

Unity

An image with good unity will draw the viewer in and focus them around the one area or a few connected areas and generally get the point across very quickly, so are therefore ideal for advertising. Images/compositions without unity can be difficult to read or visually awkward.

Disharmony

Baca selengkapnya

Attention Grabbing Design Techniques

attention grabbing techniques bright colours colors design design theory funny graphic design humour icon iconic shocking surreal

Attention Grabbing Design Techniques

SEM 09.27 Komentar

Any Of These Grab Your Attention...? The One that did says a lot about you.

People in modern day society have to deal with an overload of visual material on a daily basis. Advertisers, marketers and designers are now all fighting to get our attention. Ads, poster campaigns, street art, billboards, window displays and even the side of buses are used to promote new products and services. Designers do their best to create well laid out and visually interesting images using the design elements, principles and composition techniques.

But with all that's going on in our own lives and around us how do they stand out from the crowd and grab our attention? Here we discuss 7 commonly used attention grabbing techniques.

Humour:

Funny Image

This is where a funny image, slogan or video is used to make us laugh or smile. It is proven that people tend to remember and retell funny stories, jokes and forward funny e-mails. In this way the product or service is also being remembered. Fun is also a positive image for a company, especially one that is trying to reach a younger audience. What examples can you think of?

Sexy:

Sexy Image

Bet you didn't scroll past that image! This is a simple and straight forward technique where a sexy/beautiful man/woman is used to grab the attention of the viewers. Often the person or people being sexy or scantly clad has absolutely nothing to do with the product or service. For example an ad for bikinis would warrant having a woman wearing a bikini in the ad where as an ad for a car or perfume would not, yet it a a common practice in both.

Surreal:

Surreal Image

This refers to something that appears real but that logic tells you cannot or should not be real. For example should you awake to see a giraffe in your room, your eyes tell you it is real but your mind tells you it is not logical! These type of ads have become more common in recent years with the rise in software technologies such as Photoshop and Final Cut. These has also given life to a new type of internet ad referred to as virals.

Original:

Original Artwork

This is where a totally new idea/image/drawing/buzz word is created. It will stand out from the crowd because it is new and has not been seen before. Sounds simple but it is very difficult to create something totally new that is unlike anything seen before or at least different enough to grab attention.

Bright Colours:

Bright Coloured Attention Grabbing Technique Used In This Advertisement

Red and Yellow are traditionally the brightest colours with red being the brightest during the day and yellow the brightest at night. This is why road signs are predominantly red and yellow. Multinational companies such as McDonalds and DHL use both colours in their logos. Bright tones of all other colours can be just as effective though. For example the marketing material for the International Fleadh 2010 and 2011 in Cavan used vibrant, almost fluorescent cyan, magenta and green.

Shocking:

This technique is fairly self-explanatory in that it uses shocking imagery or language to shock the viewer into paying attention.

Iconic:

Icon (Beyonce) used in this ad image to grab attention

This is where an iconic (instantly recognisable) image, person, symbol or even voice is used to grab attention. Celebrities endorsing products falls into this category but using symbols such as the Nike 'swoosh' or the McDonalds 'golden arches' is also a form of iconic attention grabbing.

Baca selengkapnya

10 Reasons Why You Should Use Blogger To Create Your Website

Blogger CMS creating websites how to create websites web web design web development

10 Reasons Why You Should Use Blogger To Create Your Website

SEM 09.25 Komentar

Blogger is an excellent resource for creating websites

Blogger is for creating blogs not websites, right...? Wrong! Although it may have started out that way, in fact it definitely started out that way, Blogger is now an extremely effective tool to easily and freely create full blown websites. If you don't believe me look at this website ,for example, which was created using Blogger - you wouldn't think it, would you! Even the website you are on now is a Blogger hosted website.

Like WordPress (but better IMHO) it is also an excellent Content Management System (CMS) tool which is just one of the many reasons why web designers should be using it. Unlike WordPress it is totally free with no hosting costs and a free sub-domain name given, there is also no charges or fees for using plugins or connecting to a custom domain. I use it regularly and there are really very few situations where it is not capable of meeting the needs of a client and more often than not it is a better, or at least simpler, option for both me and the client. So before I give away everything in the introduction and here's 10 reasons why Blogger is great for creating websites.

Blogger Is Free

It's free, totally free, ad free, no hosting cost, free sub-domain name provided and is therefore cheaper than everything else. The sub-domain name provided will be yourwebsite.blogspot.com which is fine for a blog but for a professional website it doesn't quite cut it right? Well that brings me to my next point...

Easy Custom Domain Integration

You cannot purchase a domain name directly through Blogger but you can connect your Blogger website with any domain name in a few simple steps, Blogger are even kind enough to provide you with instructions. The old .blogspot address will also redirect to the new domain with the content from your blogger website being displayed under your chosen domain without a visitor being any the wiser. Search engines will use the custom domain name to index the site, meaning it appears as a fully fledged professional website and not a run of the mill blog.

Although domain names are generally quite cheap, as low as $5 for an annual .com license, hosting on the other hand is not as cheap. I have seen hosting costs range anywhere from $50 to $500 a year depending on the amount of space, level of security and other features that a client can require. Blogger, as already mentioned, has no hosting costs. Where's the catch you ask? 

Free Unlimited Hosting

Well, one that used to stop me from using Blogger was that it does not support PHP. But nowadays for contact forms and other standard PHP things there are ways around it such as using JotForm to create and host your form, then embedding it into your Blogger site. Another big one that used to be a problem was that there used to be a limit of 20 static pages per site, but that has since been removed, so there is now unlimited space available which most paid hosting services can't offer. How is this possible you ask, well that brings us nicely to the next point.

It is Run By Google

Blogger is part of the Google family so you are guaranteed a quality and reliable service. But returning to the previous point about storage what a Blogger account also gives you is a Google account and with that comes lots of other free stuff. You see when you set up your blog you will need to create an account, which is actually a Google account (unless you already had one of course) and therefore you simultaneously set up a YouTube account, a Google Drive account, a Google + account, a Gmail account, a Google Calendar account, a Google Places account and much more besides. All of these tools can be used to expand the possibilities for your Blogger website like storing documents (Google Drive), hosting videos (YouTube), arranging or displaying events (Google Calendar) or literally putting your business on the map (Google Maps).

Easy SEO

(SEO is Search Engine Optimisation ) Within Blogger you can also label your blog posts with keywords and submit a specific description to be used by search engines while indexing your website. As a Google product it is also very well coded and hosted on a Google owned server so speed performance is usually very good. As mentioned above a Blogger account comes hand in hand with a Google account and 2 more SEO related tools called Google Webmaster and Google Analytics. Google webmaster allows you to index your Blogger website in the Google search listings and then control various aspects of that listing such as geographic targeting, robots.txt and sitemap.xml settings all the while receiving basic data about your websites performance. Google analytics takes performance data to the next level and allows you to monitor every conceivable detail about your websites performance.

Easy To Learn & Use

Blogger is genuinely very easy to learn and easy to use. It took me about 30 mins to get up to speed with all the main features of Blogger and I honestly could not say the same for WordPress, although that may say more about me as WordPress isn't popular for no reason. But I'm entitled to my opinion, and my opinion is that Blogger is easier to use than WordPress. There are also a wide selection of templates built in to help get you started as well as thousands available for free online from very talented and generous web designers. The layout is clean and simple with the ability to drag and drop the default sections around as well as the numerous widgets which can then be added to personalise your website.

Loads Of Gadgets

There are a wide selection of gadgets within Blogger that can be added to the default header, body, footer sections. Things like site search, follow by e-mail and Ad-sense can simply be selected, edited to suit your needs and then dragged and dropped into the site layout as you see fit. As well as these relatively standard gadgets there is one gadget simply called the HTML/JavaScript Gadget. If you are a web designer or coder and feel restricted by all the templates and standard gadgets this simply allows you to code anything at all to appear in your website. I use it mainly for slideshows and custom menus. Currently there are around 1,000 widgets/gadgets to choose from so there is plenty of choice.

More Than Just Templates

The 'customise' section within Blogger allows you to customise all the default elements of your website, on desktop or mobile, using a WYSIWYG system so even without any coding knowledge you can still personalise your website to the way you want it. As I touched on in the previous point if you don't like templates and standard web gadgets you can still edit the site H.T.M.L. and C.S.S. code of your Blogger website directly to create a unique and original design or just to tweak an existing template or gadget. Within the HTML code there are even 'conditional' sections such as (without the HTML to avoid confusion), if displaying on a mobile device then do x, y and z. This makes it really easy to customise the look of the mobile site option, which I just realised I forgot to mention as another great built in feature of Blogger websites!

Can Be Used As A CMS

This point is really only relevant for web designers/developers. For me and any web designer who already knows how to code a website from scratch anyway one would think that Blogger did not hold much appeal, however the fact is that a Blogger website is easy for a client to update the pages after you have designed them and therefore lends itself very well to being used as a Content Management System. A client simply needs to log into a Google account connected, through the blog's settings, to the website and on each page of the website they will then see little wrench icons at the bottom of each section. They can then click on the icon and use the pop up editor to make the changes they need. The editor is very similar to editing a word document as well as allowing the insertion of videos, images and links with relative ease. So if the client has basic computer skills then they should be fine. It can;t get much simpler than that! And if a client is a little more tech savvy then they can just used the Blogger system directly to edit the website in the same way that you set it up. 

*If you skimmed through and noticed only 9 headings you'll have to read through to discover the hidden 10th reason included in one of the sections - I say hidden but I only remember it as I was writing the article ;)

Baca selengkapnya

Vinyl Wall Art for Interior Design

interior design interior design tips interior wall vinyls interiors vinyl wall art wall art wall vinyls

Vinyl Wall Art for Interior Design

SEM 01.00 Komentar

Sample vinyl wall art

Introduction

When it comes to design trends, the constantly changing times demand that home owners stay up to date on ‘what’s in’ and what’s out’. Finding things that never go out of style or are easy to replace makes this process easier and helps home owners to keep their rooms up to date and looking great.

One of the most popular and always on trend design trends is to use temporary wall stickers in the home. There are various art stickers used for home decoration, and one of them is vinyl wall art. Vinyl wall art comes in a variety of styles, and it’s easy to find one that’s right for any home. In addition, application and removal are both simple, making this the ideal choice for those who are in temporary living situations or want to change their décor with the seasons and times.

If you are looking for an affordable, practical and original way to decorate your home, these decals could be the right choice for you.

Different Types of Vinyl Wall Art

Vinyl wall arts come in various styles and shapes, and it’s well suited for every room and every wall. Choices include alphabet blocks, balloons, floral designs, favourite sports and entertainment characters and even storks, to name a few. You can find vinyl wall art small enough to fit over a shelf in a tiny bathroom or large enough to cover an entire wall in a child’s bedroom.

The type and style of stickers you choose to use will depend on where you are placing them. For example, if you are decorating a kid’s bedroom, their favourite characters or cartoon animals that match their bedding might be a great choice. If you’re decorating a nursery, simple words, something more whimsical or art that is in line with the theme of your baby shower would be practical.

Where to Use Wall Art Stickers

Vinyl wall art can be used in any room

One of the advantages of using vinyl wall art is the fact that you can use these stickers to decorate any room in your house. That is because they are easy to apply, and they do not leave any marks behind after you remove them. This makes them a perfect choice for those who are renting, people who tend to change their décor often or even in a child’s room where tastes and trends often change with the seasons.

Vinyl wall art is a lovely addition over a group of treasured pictures in a family room to frame out the space and add character to the wall. Motivational phrases and images are wonderful in a home gym, helping exercise buffs to stay on track and keep their hearts pumping. In an adult’s room, a loving phrase hung above the bed reminds the couple to always kiss before they say goodnight. In an office, pictures of nature make it easier to stay indoors when work needs to be done. In the kitchen, use vinyl wall art sparingly to pay homage to the chef, and in the bathroom, add a phrase or two to make your space more spa-like.

How to Apply Vinyl Wall Art

Vinyl wall art decals are not only affordable and easy to get, but they are also easy to apply. Even the novice do-it-yourself enthusiast can easily decorate a room in just a few hours using decorative decals. This is also a great project to get your children to help with, allowing them to experience the excitement of having a hand in decorating their favourite spaces. Here is what you need to do;

1. Start by dusting off the wall or the area where you want to place your vinyl wall art. Do this using a microfibre cloth or a dry rag. Paper towels should be avoided. Apart from getting rid of the dust, make sure that you remove fingerprint oils, and try not to wet the surface while doing this. If the surface is more than just slightly damp, allow it to dry before application. If you’re in a hurry, you can speed along this process with a fan or blow dryer set on low.

2. After cleaning the surface, place the vinyl wall art on your desired location using a backing still. After placing the decal, tape it on both ends. Next, lay the vinyl wall art flat on the hard surface, and start rubbing the surface using a flat piece of plastic, such as a credit card.

3. To see the results peel off the backing paper slowly. When the wax paper sticks to the decal, place it back in the same position and continue rubbing for a few minutes. After a few seconds, you can keep on peeling off the backing paper until you succeed removing the whole of it.

4. If you find that the vinyl wall art has air pockets or bubbles, rub it out lightly using a credit card or other slim piece of plastic. Rub from centre to the edges, moving the bubble along as you go. If some smaller bubbles are too difficult to remove with this process, give your vinyl wall art a day to set and most bubbles will usually disappear.

Purchasing Vinyl Wall Art

Vinyl wall art can add something special to a space

These modern home décors are easy to find, and you can buy them from local paint stores. Another convenient place to shop for vinyl wall art is from online stores. Some big box stores also carry these products, as do speciality children’s stores and boutiques. What matters most is that you find a dealer offering quality vinyl wall art at an affordable price and the selection you’re looking for to decorate each room in your house.

Conclusion

Vinyl wall art is an excellent choice for any room of your home. It brings colour and life to otherwise dull walls and allows you to change the style of your home quickly and easily, any time you’d like. Take some time to explore the many vinyl wall art options available. You just might find that this design trend is quite addictive and something you’ll want to incorporate into every room in your house. If you’re ready for a fun, new look, give vinyl wall art a try.

About the Author

Aric Shelby personally designs high-quality vinyl wall art for use in homes and commercial spaces. With a wide selection of designs at a variety of price points, it’s easy for consumers to find exactly the style they need to make their spaces look spectacular when searching Aric’s designs. Browse them all at vinylcraze.com.

Baca selengkapnya