Webdesign in Koh Samui, Thailand • Samui Multimedia

Webdesign

1. What is webdesign ?

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of webdesign include web graphic design, interface design, authoring, including standardised code and proprietary software, user experience design, and search engine optimization.

many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term webdesign is normally used to describe the design process relating to the front-end (client side) design of a website including writing mark up.

Web design partially overlaps web engineering in the broader scope of web development.

Web designers are expected to have an awareness of usability and if their role involves creating mark up then they are also expected to be up to date with web accessibility guidelines.

2. Skills and techniques

2.1 Marketing and communication design

Marketing and communication design on a website may identify what works for its target market. This can be an age group or particular strand of culture, thus the designer may understand the trends of its audience.

Designers may also understand the type of website they are designing, meaning, for example, that (B2B) business-to-business website design considerations might differ greatly from a consumer targeted website such as a retail or entertainment website.

Careful consideration might be made to ensure that the aesthetics or overall design of a site do not clash with the clarity and accuracy of the content or the ease of web navigation, especially on a B2B website.

Designers may also consider the reputation of the owner or business the site is representing to make sure they are portrayed favourably.

2.2. User experience design and interactive design

Users understanding the content of a website often depends on users understanding how the website works. This is part of the user experience design.

User experience is related to layout, clear instructions and labeling on a website. How well a user understands how they can interact on a site may also depend on the interactive design of the site. If a user perceives the usefulness of that website, they are more likely to continue using it. Users who are skilled and well versed with website use may find a more unique, yet less intuitive or less user-friendly website interface useful nonetheless.

However, users with less experience are less likely to see the advantages or usefulness of a less intuitive website interface. This drives the trend for a more universal user experience and ease of access to accommodate as many users as possible regardless of user skill. Advanced interactive functions may require plug-ins if not advanced coding language skills.

Choosing whether or not to use interactivity that requires plug-ins is a critical decision in user experience design. If the plug-in doesn’t come pre-installed with most browsers, there’s a risk that the user will have neither the know how, nor the patience to install a plug-in just to access the content. If the function requires advanced coding language skills, it may be too costly in either time or money to code compared to the amount of enhancement the function will add to the user experience.

There’s also a risk that advanced interactivity may be incompatible with older browsers or hardware configurations. Publishing a function that doesn’t work reliably is potentially worse for the user experience than making no attempt. It depends on the target audience if it’s likely to be needed or worth any risks.

2.3. Page layout

Part of the user interface design is affected by the quality of the page layout. For example, a designer may consider if the sites page layout should remain consistent on different pages when designing the layout. Page pixel width may also be considered vital for aligning objects in the layout design.

The most popular fixed-width websites generally have the same set width to match the current most popular browser window, at the current most popular screen resolution, on the current most popular monitor size.

Most pages are also center-aligned for concerns of aesthetics on larger screens. Fluid layouts increased in popularity around 2000 as an alternative to HTML-table-based layouts and grid-based design in both page layout design principle, and in coding technique, but were very slow to be adopted. This was due to considerations of screen reading devices and windows varying in sizes which designers have no control over. Accordingly, a design may be broken down into units (sidebars, content blocks, embedded advertising areas, navigation areas) that are sent to the browser and which will be fitted into the display window by the browser, as best it can.

As the browser does recognize the details of the reader’s screen (window size, font size relative to window etc.) the browser can make user-specific layout adjustments to fluid layouts, but not fixed-width layouts. Although such a display may often change the relative position of major content units, sidebars may be displaced below body text rather than to the side of it.

This is a more flexible display than a hard-coded grid-based layout that doesn’t fit the device window. In particular, the relative position of content blocks may change while leaving the content within the block unaffected. This also minimizes the user’s need to horizontally scroll the page.

2.4. Typography

Web designers may choose to limit the variety of website typefaces to only a few which are of a similar style, instead of using a wide range of typefaces or type styles. Most browsers recognize a specific number of safe fonts, which designers mainly use in order to avoid complications.

Most layouts on a site incorporate negative space to break the text up into paragraphs and also avoid center-aligned text.

2.5. Motion graphics

The page layout and user interface may also be affected by the use of motion graphics. The choice of whether or not to use motion graphics may depend on the target market for the website.

Motion graphics may be expected or at least better received with an entertainment-oriented website. However, a website target audience with a more serious or formal interest (such as business, community, or government) might find animations unnecessary and distracting if only for entertainment or decoration purposes.

This doesn’t mean that more serious content couldn’t be enhanced with animated or video presentations that is relevant to the content. In either case, motion graphic design may make the difference between more effective visuals or distracting visuals.

3. Responsive webdesign

Responsive webdesign (RWD) is a webdesign approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

A site designed with RWDadapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule.
– The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
– Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
– Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
– Server-side components (RESS) in conjunction with client-side ones such as media queries can produce faster-loading sites for access over cellular networks and also deliver richer functionality/usability avoiding some of the pitfalls of device-side-only solutions.

3. Find a webdesign template

We mainly use Envato model banks.
The link below, allows you to access many models that can be used directly.
We own an Envato license which allows us to use and distribute these models and their adaptations without copyright concerns.
Webdesign templates on Envato

Share this page