A logo is an important aspect of your brand that identifies your company, organization, or product to your audience.
Conduct research about your industry to create a logo that will stand the test of time and properly represent your brand’s message and personality. Keep an eye out for logo trends in your industry that you’d like to emulate in your own unique way.
See the “Hire a Professional” section for how to hire a professional to create your logo.
Source: Vital Tips For Effective Logo Design at Smashing Magazine
Before planning the design, consider your goals for the website.
Web design is the visual appearance of a website. The style of a website should support the content (the text and images). Design is an opportunity to solidify the brand and to create a good user experience.
Brainstorm how users will interact with your site. Will they be reading your site for information or to complete a task? Will they be searching for something specific or browsing to learn more? Answers to these questions will guide which types of content to create and what type of functionality to plan for.
Everything you design or code for the website should support your site and user goals. This is a good way of keeping a project in scope and on track.
Design “mockups” or “prototypes” can be created by hand, or in programs like Adobe Photoshop or Illustrator. Mockups are the result of planning and brainstorming the following topics:
User Experience (UX) considers how users interact with a product, such as a website. A website with good UX is:
Source: User Experience Basics at usability.gov
A first step to designing a web page is a wireframe; a representation of the page layout without style, design, or color. Wireframes plan where each type of information will go. They can be sketches on paper or created on the computer with wireframe programs or web apps such as the following resources:
Phrase your links to other web pages or documents without saying “click here”. The World Wide Web Consortium (W3C) recommends the following: “When calling the user to action, use brief but meaningful link text that:
Source: Tips for Webmasters at w3.org
Fill your website with relevant and straightforward content. Examples of text content are paragraphs of text, a bulleted list of facts, blog posts, or even Frequently Asked Questions (FAQ).
Images are a great way to convey information and add visual style to a website. Be sure you have permission to use images. Copying images from a Google Images search means potentially using copyrighted or protected content. Use Open Source or free for Commercial Use images on your website. You can also purchase stock photos and attain the rights to use them. Give the image creator credit (“attribution”) if required.
Color contrast is also important for accessibility. Accessible websites are available to as many people as possible. This includes those with disabilities, like color blindness. Make sure color isn’t the sole way to distinguish important visual features. A color contrast test is available at webaim.org:
Fonts are digital type families like Helvetica, Arial, Times New Roman, and Comic Sans. The word “font” originally referred to metal type, but has become synonymous with digital typefaces and is a layman’s term for text style.
Different fonts convey different personalities and tone. Comic Sans is a fun and youthful typeface compared to Times New Roman.
Typography (the art of arranging type in a meaningful and appealing way) can be controlled with CSS on the web. This includes font size, color, line height, letter spacing, and list styles.
For best legibility, font sizes should be at least 16px for content. Headings will generally be larger in size.
A website is created with coding languages, such as HTML, CSS, and Javascript.
HTML is a language used to create websites. It provides structure and context to all the words you see on the internet.
There are element tags that define content as things like paragraphs, images, links, or headings. This is how the browser reads the information to display to users.
Attributes called “classes” and “IDs” are added to HTML tags so that they can be targeted more easily and efficiently.
The whole page structure of an HTML page is similar to the format of a letter. Both have a top section (the “head”) with helpful information as well as a “body” section with the main content. In HTML this is called “head” and “body” respectively. Body is what users see on the internet.
CSS is a language used to style websites. It changes colors, sizes, fonts, and more to customize the presentation of your web content.
CSS uses the classes and IDs defined in the HTML to create styles. Classes, IDs, and element tags are used to create the “selector” of a style. Properties like “color” or “font-size” are paired with values like “blue” or “24px”.
Styles created with CSS are referenced by HTML in the “head” of an .html document.
Languages like Javascript are often used to add effects and functions beyond what HTML and CSS can do. They can also make websites work better in older browsers and on mobile devices. jQuery is a commonly used “library” of Javascript. jQuery or other scripts are added with script tags in the head of an HTML document, or at the bottom of the body.
Content Management Systems (CMS) are an alternative to handing coding everything.
WordPress.com is a very popular blogging platform with the ability to act like many types of websites. There are themes and styles available for free and for purchase.
Squarespace is a CMS site-builder with the ability to drag-and-drop your site’s layout and content.
Drupal is another CMS that can be further extended for more complex and technical projects.
Depending on your priorities, you may choose to create your new website on your own, or hire a professional web worker.
Creating a website yourself for the first time requires investing time to learn about web design and coding.
You can work with a WYSIWYG (“What You See Is What You Get”) editor or code “by hand” with HTML and CSS. WYSIWYG editors are often found in Content Management Systems (CMS) like WordPress.
There are pre-made designs and templates available – for purchase and for free – which can speed up the process. They are a great way to get started.
Instead of learning everything about creating websites from scratch, you can hire a web professional and focus your expertise on your field or business.
You can hire an individual, a team, or a company to create a website. An individual may be referred to as a “freelance” designer/developer or an “independent contractor”. Some contractors will do either design or code, while others can perform both. A team or company who creates websites is often referred to as a “web agency” or “design firm”.
You can hire a web professional online, network in person, or search newspapers. For example, if a local business has a website you admire, you can try to contact the website owner to find who created it. This information may be at the bottom of a web page or can be inquired about via email or a contact form.
Professional web designers or developers may charge hourly rates or project fees. The price for a website will depend on the size and scope of the website as well as the experience and skill of who is hired.
Swipe to view more
