Wireframing: The first steps of web design
- What do you want to get across to viewers of your portfolio site?
The portfolio site is simply a showcase of my work on the World Wide Web. I want visitors to my portfolio site feel as though I'm a professional, competent and good designer. My work samples will be used to demonstrate this to the web site users. I also want to get across that I offer marketing solutions for small businesses and individuals - branding, identity, logos, website design, photography, SEO (Search Engine Optimization) and maybe local lead generation. In addition, I would also like to get across to viewers of my portfolio site, that I am looking for job oppurtunities in web design.
- What content belongs to your site? What's the relative importance of each peice of content?
I would like to redesign and create a single page portfolio to showcase my work and the services I offer to clients. I would like the one page portfolio to be simple, clean and easy to navigate. The most prominient pieces will be the work itself, thus everything else is just a distraction.
- Can you list out the details or content that would be on a portfolio web page?
Project Category, Project Images, Title of Pieces, Description, (<) Previous pieces, (>) Next Piec
Site Map: This is the sitemap of my one page portfolio website. On the homepage, the main area of focus will be the tagline and a CTA (Call to action). Below it I'm still unsure as I'm working out the details by sketching on pen and paper.
Sketches: I've enjoyed wireframing and I've found it difficult to create a wireframe in Adobe Photoshop, as it's not very flexible and takes hours. The quickest way was to sketch and draw thumbnails on pen and paper as it allowed to experiment and try new ideas as they occured. I think the hard bit is translating the sketches into a static design, I also find that if the details in my sketches are vague and undefined it seems to have a lot of potential.
Wireframes: This is the first iteration of my one page portfolio. I have found wireframing to be much more difficult than I orignally thought as I find it must have to be perfect before I can start the visual design of the site.
note: the best way to view these images is to open image in a new tab and then zoom in, as skillshare seems to reduce the size of the images.