Designing Your Website

Name: Designing Your Website
Author: Matthew Brown

This chapter will cover how to identify inspiration for website design and the creation of wireframes and mockups using the NinjaMock application. This chapter…

Preview the first lesson free — get full access to all 4 lessons.

Request a demo Sign in

Course: On-Demand

Hello, thanks for joining. In this chapter, we will be looking at methods for identifying website design inspiration, creating wire frames and mock-ups using NinjaMock, and how to effectively use white space in your designs. We'll begin by looking at website inspirations. You can gain inspiration from any number of places in your daily life: from the friends around you, from billboards, or signs that you see in grocery stores. But there are some sites that are actually used commonly for inspiration. We will go through a few of these. The first we see displayed here is Awwwards. Awwwards is a pretty good site. I enjoy it, it's one of my favorites. They do a review of the site of the day. You can see here this is the site of the day. They rate the sites based on design, usability, creativity, content, and whether it's mobile or not, and it gives them a score out of 10. And you can actually visit the sites that are being ranked for that day. But if you scroll down, you will see lots of different sites, lots of different opportunities for inspiration that you can view through and see what other people have created, what's available out there, how folks are designing their sites, how they're laying out images, how are they laying text, the fonts and colors they're using. Any number of ways to gain inspiration. The next site that we could gain inspiration from is Pinterest. If you go to Pinterest and you do web design landing page inspiration, you get lots of different content that you can browse through to come up with ideas on how you want to layout or design your site. Pinterest is a good source of inspiration as well. It's kind of what the site is designed for. But again, you can go and you can find lots of different things to help you decide what you want to do, or at least point you in a direction of where you want to go. The next site is Designspiration. Designspiration is a good site as well. You can browse and you can take a look at some of the inspirational images, inspirational sites that folks have out there and get some ideas, some context to how you want to build your site. It's a vintage, most of the content on this site is vintage content, vintage comics, marketing ads, and things like that. So this is definitely something that you could look into for inspiration. And the next site we wanted to look at was Grain Edit. Grain Edit is more of a blog, but it posts out there some good information, some good content in terms of how you can look at design. And some of the design awards for sites are posted out here as well. Again, just a way to get some inspiration for the site and the content that you're wanting to build out. Thanks for watching. Next, we will take a look at creating wire frames using NinjaMock.

Beginner Provider : Matthew Brown 4 Lessons · 18m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

This chapter will cover how to identify inspiration for website design and the creation of wireframes and mockups using the NinjaMock application. This chapter will also cover the effective use of whitespace in website design.

What You'll Learn

Identify website design inspiration
Create wireframes using the NinjaMock application
Create website mockups using the NinjaMock application
Apply whitespace effectively in website design

Key Takeaways

The chapter covers how to identify inspiration for website design.
Wireframes and mockups are created using the NinjaMock application.
Effective use of whitespace is an important element of website design.

Frequently Asked Questions

What does this chapter cover?

It covers identifying inspiration for website design, creating wireframes and mockups using the NinjaMock application, and the effective use of whitespace in website design.

What tool is used to create wireframes and mockups in this chapter?

The NinjaMock application is used to develop both wireframes and website mockups.

What skills does this chapter help build?

It builds skills in design methods, design tools, design web format, interactive web design, web design, and website architecture.

What lessons are included in this chapter?

The lessons are Identifying Inspiration, Develop Wireframe using NinjaMock, Develop Website Mockups using NinjaMock, and Using White Space Effectively.