A smartphone layout will usually look minimalist and include only the most important information to minimize excessive scrolling. But a larger display, especially a widescreen format, has a lot of usable space outside the main content. On the smartphone view of a website, excessive media can take up too much space. If you have images that are simply decorative, it may be helpful to set them to "display: none;" with a media query.
On the flip side, desktops and laptops have larger, higher-resolution screens and are better equipped to handle heavy-duty tasks. With more space, you have the option of just spreading out what content you have. However, if a website would benefit from more decorative elements, media, or features, it may be wise to make full use of a more powerful computer's capabilities.
Widescreen and desktop sized viewports can take advantage of features like testimonials, fun facts, additional imagery, animations, and much more. It's important to think through your design before you start coding. Ask yourself, Who is this site for? Who is the target audience, and what main objective am I trying to communicate? Establishing how you want your site to look and function ahead of time will help reduce errors and development time when you move into production.
Below are the common steps used in an industry web design process. Click through the slides to see more information about each step and how it's applied to a web-based project.
Project Overview
Before any design or development work is done, industry professionals meet with their prospective client to get an idea of what they are looking for. This is a great time to ask clients for reference material to better understand their vison. What colors do they want to use? What overall “feel” are they are going for?
Objectives & Personas
Once the overall vision is communicated, the designer establishes objectives and personas. Objectives set the main goal of the site and how it should work. A persona is an imaginary person who represents the average user of the site. If there is a wide target audience, multiple personas can be developed for designers to reference when making usability and design decisions.
Wireframing
With the client vision in mind, the goals outlined, and the user personas established, it's time to start loosely laying out the page. This is where the designer starts thinking about the scalability and usability of the site. How will the content of the page be presented, and how will it look on a desktop versus a tablet?
Mockups
After the wireframe layout is approved, it's time to dive into the design phase. This phase is typically done in a design app or as a static image to establish the colors, fonts, spacing, and imagery of a site. (This is often where filler text and images are used if the designer doesn't already have access to the site content.) Creating mockups before development allows the client to have a visual representation of what their site will look like before the coding begins. This way, the client can address any concerns they have about the design before all the hard work of coding has begun.
Initial Development
With final design approval from the client, the coding process begins! Using the wireframes and mockups as a guide, designers develop the site layout with client content, as discussed in the client overview, to meet the objectives that were previously outlined.
Testing & Revisions
It's important for designers and developers to test as they work, but it's often standard practice for someone who was not involved in the design process to review and test the site before it's delivered to the client. This process is often referred to as QA (Quality Assurance). This reviewer has fresh eyes and can see things that the designers and developers may have missed. The reviewer is provided the objectives and personas so that they can try to view the site through the lens of the target audience. The reviewer then reports their findings back to the developer.
Final Development & Delivery
With revisions noted, the developer makes the needed adjustments and finalizes the site for the client. At this time, with client approval, the site is made live, and the project is finished!
Although your web projects don't have a client, many steps in this process can be adapted for school projects. Developing a process early in your design career will help you stay focused and organized, and it can help you explain your decision-making process if someone asks.
