website project ideas
[lwptoc]
Before we tackle what “website project ideas” is all about? Let’s get into what the average web project looks like. When someone comes to you and says “We need a website”, your first job as a designer is to ask “why?”.
Once you decide that the client needs a website, you generate the scope from the website project ideas and make a proposal. The scope (sometimes called the statement of work) is a specific description of the work you’re going to do – what type of website is it, does the client have any website project ideas, who is the audience, does it need any custom components such as a login system or other back-end database functionality, etc.
The proposal is a document both you and the client sign agreeing to stick to the scope and outlines the timeline, cost, and delivery method of the finished product. It also makes clear that anything the client requests that are outside the agreed-upon scope will cost extra money, and will most likely extend the timeline.
There’s a bunch of legal information included with these documents, which protects both you and the client if an issue comes up. If you’re freelancing, make sure you have these documents!
When freelancing, you’ll often see them combined and called a contract. Legal documents are a larger discussion than we have time for here today, but feel free to ask me about them in the Q& if you’re interested.
Anyway, after the scope and proposal are complete, you move on to what we called the “discovery phase” at my design agency job.
Often, the project you’re working on will be unique enough that finding documentation about similar projects is a challenge. Also, since none of us can be experts in everything, chances are the topic of your new project will be outside your knowledge base.
You may spend quite a bit of time researching before you even open Photoshop. Don’t skip this step! You can’t create a website that meets the audience’s needs if you don’t understand the audience and their needs. The scope sets the expectation and you will only be limited by your website project ideas.
After you understand what the project is all about, you can move on to the design phase. Always start with paper! Sketching on paper is fast, easy, and collaborative. On paper, you can think about the user experience without getting caught up in fonts or colors, and easily pump out iteration after iteration until you land on something that works.
And also important, you don’t get attached to it – it’s a lot easier to throw away a paper sketch you drew in one minute than a full-color Photoshop mockup that took you four hours.
After you get the rough website project ideas down, you can get a little more specific with a wireframe on gridded paper. This gives you a better idea of what will actually fit on the page, but it’s still on paper!
Once you nail down your paper wireframes, you can move on to digital wireframes. Here, you can work on things like pixel widths and font sizing, but it’s still in a black and white environment where it’s fast and you’re not emotionally attached.
Here is where the process is starting to get a little fuzzy. In the past, we’d move from paper wireframes to Photoshop mockups, but now more and more designers are making prototypes of the projects.
These are kinds of wireframes for the website’s structure. In a quick HTML prototype (there are some software options, as well), you can link pages together and work on the architecture. The benefit is that it’s still a fast process because you’re not doing any visual design.
There are also emerging applications – Macawis an example – that is like Photoshop but output HTML and CSS for your project idea. Something to keep an eye on. Still, chances are you, your employer or your client will want to see a pixel-perfect mockup, which you can make with Photoshop or similar software(such as Sketch).
This is where you decide on colors, fonts, spacing, and the look of all the website’s visual elements. Mockups are what beginner designers usually think of as the entire web design process, and they jump straight to this step.
But as you can see, mockups are only one step of turning your project ideas into action. They’re important (and fun!), but you can create a successful website if you skip the other steps.
After you know what the website is going to look like and how people are going to interact with it, it’s time for the front-end development– writing the HTML, CSS, and JavaScript. (If you made an interactive prototype, you may already have some code).
We could go on forever about all the coding best practices I recommend, so I’m not going to go into them here, but feel free to ask me in the Q&A. Anyway, during and after coding, make sure you’re testing to make sure that everything works across browsers and devices.
Also, make sure the site is SEO (search engine optimization) friendly, so when people search for keywords related to the site’s topic, the site will come up in the search results.
And last but not least, hand off the site to your client. Train them on how to create and edit pages, and make sure they have all the design assets they need.
Unless you wrote post-launch maintenance and updates into your contract (which I don’t recommend), you’re now done and ready to get paid! So moving on to web design careers. School is a great place to start – good job! You can also freelance at any time, including while you’re in school if you feel confident in your skills.
