Pick one direction refine and move forward with.
Write a revised description about what you’re highlighting about the person/object/thing and the focus of your project. Remember, it should be more of a story than a topic. This should only be a couple sentences.
Next, move on to the site contents and wireframe(This was called Site Architecture in the examples I shared of my work last class) – think through your site content and start mapping out the hierarchy. This doesn’t need to be too prescriptive, but should highlight the different content types your website will have(images, photos, audio) and should start to use realistic copy.
Finally, move on to the design and flesh out the rest of the website. Please include 3 variations of the homepage, and one option for any additional pages. We’ll have one more pass at the design before we move on to programming.
Reading presentation, please see today’s agenda.
Content Mapping
Even though we aren’t designing very complicated systems with this project, we need to understand all the content that goes into creating it. This type of thinking will also help us with our next project(Helpful App).
When I work on content maps, I like to start with a list and outline all the pages that go into it and jot down notes of what each page has, here is an example of an initial draft of a recipe website I made:
screenshot of an outline for a recipe website. I start with a general list of all the pages, and then break each page into sections with all the content that will live on it.
If you prefer, you can also create a visual sitemap either in Figma, illustrator or an online tool like this: https://www.gloomaps.com/ something like this is more helpful when you’re working on a multipage website.
A more common approach to sitemaps
For your project, think about what content is necessary to communicate your idea. Many of us will have a single page website, but even still, you should think about the order of information and how one might go from page to page. Consider what kind of navigation your website will have.
Wireframe
A wireframe is a stripped down layout design that focuses on content, structure and hierarchy. Design and photography are omitted.
A sense of uniformity, even with placeholder content
Clear typographic hierarchy
Color is used to call attention to different things and to create a uniform look but is not meant to distract from the content.
Buttons and iconography are the same throughout
There aren’t any images.
The goal of the wireframe is to assess the hierarchy of information, test out the navigation, and have a plan for what you’ll design. Wireframes can be helpful when you’re working with a team to communicate everything that will go into the website, without focusing on the art direction and design. For yourself, it can be helpful to figure out how much content you’ll need to create and plan accordingly.
For homework, you’ll need to create a wireframe that is organized and has a default but clear designs system. Focus on the hierarchy and content. Then you’ll move on to working on your designs.
Tips for Wireframes(Please watch before working!)
Components(Reusable elements. Called“Symbols” in other programs)
Look at Coding from Life activity
Homework
Content Mapping
Wireframe
A wireframe is a stripped down layout design that focuses on content, structure and hierarchy. Design and photography are omitted.
Tips for Wireframes (Please watch before working!)
Components (Reusable elements. Called “Symbols” in other programs)
Creating Styles