top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

Website design for beginners: a simple and complete guide

0 votes
635 views

Website design is an important element of the website development process. If you are interested in designing the web, I am thinking you have got a creative streak. Website design is about designing a practical piece of art — but where do you kick-off? If you are wondering what you need to be aware of before you start, this guide will assist you.

Choose basics for your first website design

It’s a good idea to choose something fun and simple for your first project. An eCommerce website is more difficult and would be better to handle once you have more experience.

A blog is the best thing to start with. It will be a helpful design exercise and you’ll learn how a CMS (Content Management System) does work, that will be crucial to know for future website design solutions. Best of all — you don’t need to start again. There are a lot of templates for a blog which makes it easy to put one together.

Templates are a vital learning tool. Watching how CSS, HTML, and Javascript components are styled and come together will provide you with deeper insight into what makes a design work. You can utilize templates as a foundation to make customizations and changes.

You don't probably desire to start a blog — try pulling from your artistic hobbies or pursuits. How about constructing a showcase for your photography skills or for your accumulation of short stories? Making a design to display a passion of yours creates for a delightful first project.

 

Get inspiration from other designers

Beyond a doubt, you've come across websites that have attracted you with their fabulous design. Make an inspiration doc with links to websites you like, or bookmark them as you move. Pinterest is the best place to get great website design, you can get and book covers, pins illustrations, blogs, posters, and other kinds of design work to refer to. Web designers utilize the term "mood board" for this accumulation. If you find yourself stuck mood boards are a quick reference resource. There are some curated collections you should examine outside the discoveries you create on your own.

 

Behance is a fantastic collection of web design work, where the concentration is on creativity and quality.

Awwwards always has fresh and new work and a variety of theme compilation

Dribbble concentrates on individual designers, giving a forum to communicate and get feedback from others about their work

 

Look outside the website for sources of inspiration

A visual language that can be found anywhere informs web design, like the cover of the digital kiosk at your bank or a graphic novel. Develop an eye for identifying good design and begin to calculate why something works or doesn’t work, whatever the channel.

Be attentive to typography

We usually read without even being familiar with typefaces. Be attentive to the effect type has on as you use the content. What makes that hand-lettered sign for the local or small business do the work really well?

Typewolf is a fantastic tool to keep tabs on famous fonts. It has a lot of lists to explore, a featured site of the day, and lookbooks that have breathtaking combinations of the font. It helps to see real examples of typography being utilized, and sites like Typewolf are the best place to see their practical applications. Getting aware of different fonts will assist you to pick the right type for your first website design.

Let the fine arts affect you

There’s a huge history of art to design, a lot of artists and movements still shape the work of creative today. Search for web design sites and art history piece on the internet and have a look on a lot of monumental artistic achievements.

 

Research different types of design

There are a lot of disciplines of design to be aware of. Knowledge of illustration, product design, and even branding can further establish your creative senses.

That goes beyond web design for inspiration, Abduzeedo has amazing examples. Whether it is furniture, luggage, or poster art, you’ll see awesome examples of web design done right. Stay open to various types of design and actively find out inspiration. The more knowledge you get, the easier it can be to craft your first site.

 

Get content ready before you kick-off

Before you start designing your first website, have content ready to work with. It doesn’t need to be ideal. You can always edit and optimize for Google search engine optimization (SEO) later. But at least, have a rough content of what will go live will assist to ensure the design is prepared to accommodate it. Designing with real draft lets you have a better representation of how the site will function and look. It also lets you have the opportunity to make changes earlier in the process of design.

You will have to have a post ready to test in the CMS for blogs. Having some posts written before you launch will save struggling to write something after the fact.

 

Keep your design intuitive and simple

Whether it is navigation, writing, or CTAs, no one desires to scramble with your design.

Your web design approach should be formed in order and simplicity. Logic should lead somebody through the website with ease. And since we’re discussing the people who will be engaged with what you’ve made, this is a good place to introduce user experience (UX).

 

Understand UX (user experience) basics

A website is something beyond floating text in space. The typography, content, color scheme, imagery, and layout all collaborate to serve your stir emotion and audience. Someone travels the digital space you have made should have a clear way free from hurdles.

User experience concentrates on understanding your visitors. What are they searching for — and how will your web design make finding it so easy? UX is just about coming into the heads of your site visitors and seeing your web design through their eyes.

When constructing your first website, keep these guiding user experience rules in mind:

  • Make things intuitive and simple
  • Communicate concepts in a rational string
  • Meet your visitors’ requirements and resist the temptation to show off your skills at the usability expense

Learning about your visitors will assist you to craft a design which is tailored to their requirements and wants.

 

Understand UI (user interface) basics

If you are absolutely new to web design, you may get confused by the difference between user experience and user interface. They are two distinct concepts.

Where User experience is connected with the overall feel of web design, the interface is just about the specifics. UI would be the arrangement and size of the floor buttons if you were in an elevator, while UX would contain the textures, colors, and other internal design choices of the elevator space. UI is just about letting somebody have the tools they require experiencing your website free from difficulties.

  • Keep the following user interface principles in mind when building your first website:
  • Interactive elements’ functionality should be obvious
  • Uniformity should guide usability, actions must follow logical patterns
  • Choices of design should be made with a clear purpose
  • Use the design principles to help with your beginner web design process

Certain rules guide the effective design and it is essential to understand important web design skills before you begin. They are standard practices which will make the process simple and approach a more refined final product.

 

Layout

If you really want to design and develop websites, an understanding of good layout is crucial. We suggest you keep things minimum and work with only a few factors to concentrate on the ideal placement.

Think grids when you first begin to design. Grids align elements, like images and div blocks on a web page, in a way that makes an order.

The layout structure should follow a visual hierarchy. What are the vital ideas you desire visitors to see and in what order? Visual hierarchy requires sticking to the common patterns people utilize when going through. There are two paths that the eyes of people generally follow on the website: the Z-pattern and the F-pattern. Being aware of how these patterns do work will assist you to maintain your own content.

The F-pattern is more usual for designs with thick blocks of content. The eyes of people will scan the left side of a template until things get their attention and then go through from left to right. Imagine examining the menu at a restaurant. You may ignore the bold names of dishes aligned on the left until you get to something which captures you that will urge you to read the supporting details explaining that particular dish.

A lot of people will examine something like a blog post in the F-pattern. With bulleted sentences and left-aligned text, take advantage of this design method, making the posts easy to follow and navigate.

The Z-pattern is connected with less text-heavy design. A lot of landing pages conform to this technique. All the big factors on the Conservation Guide site sticks to the Z-pattern. If you have just learned web designing, this is a simple layout trick to assist usability.

 

Color

You possess the colors of the rainbow and beyond available for you. And everyone knows that with great power comes great responsibility. The power of the color picker can be possessed of evil or good.

Here are a couple of approaches in selecting a color scheme for your first website.

 

Monochrome

Utilize a single color as the base, including darks and lights, change the amount of saturation, and play with different hues for a uniform color scheme. In spite of your niche, a monochrome website is a good design choice. And remember, whatever color you select for the text, ensure to care about readability.

 

Complementary

Take colors which are opposite on the color wheel and integrate them. Utilize complementary colors with care.

 

Typography informs tone

Think of a funeral announcement or a wedding invitation. Both are great life events, one typically more somber and the other a delightful celebration. Where a happy typeface does work well for a wedding, it does not suit for a funeral.

Keep the tone in mind when you are designing your first site. If you’re going for an amusing vibe, like a food blog, twisting in playful fonts adds up. But stick to more professional typefaces if you are designing a site for a law firm.

 

Serifs versus non-serifs

A common mistake from new designers is to mix up non-serif and serif fonts. You can tell them apart because the ends of serif letters possess stroke added horizontally or vertically or an extra line.

When most of the words we read were printed with ink on paper serifs are an artifact from the time of printing presses. Serifs attached words onto the page and made them simpler to go through. In the earlier days of the website, serifs were avoided by website designers because lower screen resolutions weakened them. Now that screens are optimized in a better way for typography with serifs, they’ve made a comeback.

Serif fonts are best used in moderation since they are more difficult. The header is a perfect area for serif fonts, and larger blocks of content benefit from a more primitive font without serifs.

 

Ornamentation versus practicality

The whorls and loops of a flourished font will add elegance and personality to a design, but don’t use frilly fonts a lot. A website is about interacting with visitors through content.

 

Technicalities of typography

We can learn a lot from typography. You’ll require knowing how to utilize line-height, different weights, and kerning in your typography as you progress as a designer. But don’t come up with modifying all the intricacies for your first website. Concentrate on ensuring everything is readable, you can play with fine-tuning the details later.

 

Start designing

Research and tutorials are invaluable to your learning, but you ultimately just require digging in and get designing. It is still an exercise problem solving and applying what you have learned even if you make something no one will ever see. If it's not amazing, don't worry.

posted Aug 29, 2019 by Raza Ansari

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button


Related Articles

Enumeration Types (C# Programming Guide)

An enumeration type (also named an enumeration or an enum) provides an efficient way to define a set of named integral constants that may be assigned to a variable. For example, assume that you have to define a variable whose value will represent a day of the week. There are only seven meaningful values which that variable will ever store. To define those values, you can use an enumeration type, which is declared by using the enum keyword.

C#

enum Days { Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday };
enum Months : byte { Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec };

By default the underlying type of each element in the enum is int. You can specify another integral numeric type by using a colon, as shown in the previous example. For a full list of possible types

 

You can verify the underlying numeric values by casting to the underlying type, as the following example shows.

C#

Days today = Days.Monday;
int dayNumber =(int)today;
Console.WriteLine("{0} is day number #{1}.", today, dayNumber);

Months thisMonth = Months.Dec;
byte monthNumber = (byte)thisMonth;
Console.WriteLine("{0} is month number #{1}.", thisMonth, monthNumber);

// Output:
// Monday is day number #1.
// Dec is month number #11.

The following are advantages of using an enum instead of a numeric type:

  • You clearly specify for client code which values are valid for the variable.

  • In Visual Studio, IntelliSense lists the defined values.

When you do not specify values for the elements in the enumerator list, the values are automatically incremented by 1. In the previous example,Days.Sunday has a value of 0, Days.Monday has a value of 1, and so on. When you create a new Days object, it will have a default value of Days.Sunday (0) if you do not explicitly assign it a value. When you create an enum, select the most logical default value and give it a value of zero. That will cause all enums to have that default value if they are not explicitly assigned a value when they are created.

If the variable meetingDay is of type Days, then (without an explicit cast) you can only assign it one of the values defined by Days. And if the meeting day changes, you can assign a new value from Days to meetingDay:

C#

Days meetingDay = Days.Monday;
//...
meetingDay = Days.Friday;
 

It is possible to assign any arbitrary integer value to meetingDay. For example, this line of code does not produce an error: meetingDay = (Days) 42. However, you should not do this because the implicit expectation is that an enum variable will only hold one of the values defined by the enum. To assign an arbitrary value to a variable of an enumeration type is to introduce a high risk for errors.

You can assign any values to the elements in the enumerator list of an enumeration type, and you can also use computed values:

C#

enum MachineState
{
    PowerOff = 0,
    Running = 5,
    Sleeping = 10,
    Hibernating = Sleeping + 5
}

Enumeration Types as Bit Flags

You can use an enumeration type to define bit flags, which enables an instance of the enumeration type to store any combination of the values that are defined in the enumerator list. (Of course, some combinations may not be meaningful or allowed in your program code.)

You create a bit flags enum by applying the System.FlagsAttribute attribute and defining the values appropriately so that AND, OR, NOT and XORbitwise operations can be performed on them. In a bit flags enum, include a named constant with a value of zero that means "no flags are set." Do not give a flag a value of zero if it does not mean "no flags are set".

In the following example, another version of the Days enum, which is named Days2, is defined. Days2 has the Flags attribute and each value is assigned the next greater power of 2. This enables you to create a Days2 variable whose value is Days2.Tuesday and Days2.Thursday.

C#

[Flags]
enum Days2
{
    None = 0x0,
    Sunday = 0x1,
    Monday = 0x2,
    Tuesday = 0x4,
    Wednesday = 0x8,
    Thursday = 0x10,
    Friday = 0x20,
    Saturday = 0x40
}
class MyClass
{
    Days2 meetingDays = Days2.Tuesday | Days2.Thursday;
}

To set a flag on an enum, use the bitwise OR operator as shown in the following example:

// Initialize with two flags using bitwise OR.
meetingDays = Days2.Tuesday | Days2.Thursday;

// Set an additional flag using bitwise OR.
meetingDays = meetingDays | Days2.Friday;

Console.WriteLine("Meeting days are {0}", meetingDays);
// Output: Meeting days are Tuesday, Thursday, Friday

// Remove a flag using bitwise XOR.
meetingDays = meetingDays ^ Days2.Tuesday;
Console.WriteLine("Meeting days are {0}", meetingDays);
// Output: Meeting days are Thursday, Friday

To determine whether a specific flag is set, use a bitwise AND operation, as shown in the following example:

// Test value of flags using bitwise AND.
bool test = (meetingDays & Days2.Thursday) == Days2.Thursday;
Console.WriteLine("Thursday {0} a meeting day.", test == true ? "is" : "is not");
// Output: Thursday is a meeting day.

Using the System.Enum Methods to Discover and Manipulate Enum Values

All enums are instances of the System.Enum type. You cannot derive new classes from System.Enum, but you can use its methods to discover information about and manipulate values in an enum instance.

string s = Enum.GetName(typeof(Days), 4);
Console.WriteLine(s);

Console.WriteLine("The values of the Days Enum are:");
foreach (int i in Enum.GetValues(typeof(Days)))
    Console.WriteLine(i);

Console.WriteLine("The names of the Days Enum are:");
foreach (string str in Enum.GetNames(typeof(Days)))
    Console.WriteLine(str);
 READ MORE
...