Website Compositions
When web development teams get together to conceptualize websites, there are several factors that come into play. The team determines communication goals, constraints and what type of context will be placed onto a website. It also looks at technical constraints such as the size and resolution of the screens the site is being developed for, margins, padding, the layout and where to put advertising, among other things (Landa, 2010.)
This week, I designed a simple website that could appear on a desktop screen with a size of 1920 x 1080 as well as a mobile screen, sized 750 x 1334.
For the desktop, I chose to put the navigation toward the top so that it is one of the first thing people see. The items I chose include Home, About Us, Product, Testimonies and Contact Us. This navigation will carry throughout the site, allowing people who click into it to always can go back to the home screen by clicking “Home.”
As for font, I chose Bauhaus 93 because it was legible and stylish. According to Landa, the typography of a website should have ample x-height, modest stroke contrast, enough stroke weight that is not made up of thin strokes, and that is easy to read. Bauhaus 93 had all these characteristics.
My website logo, “Web Threads,” appears in the upper left-hand corner with a drop shadow so that it appears to lift off the page. The drop shadow can be seen on the top navigation bar, leading people to believe it is three dimensional.
I list an email address and phone number in the prominent upper right-hand corner.
The picture I chose to use looks professional and relates to the product. I shot a pile of thread spools on a wooden table.
When creating the comp, I utilized a grid to ensure items line up properly.
The mobile site composition includes all the same elements but stacked into a single column. The logo appears at the top, the picture below that, the contact numbers under that and the navigation is split into individual buttons.
I can picture people being able to use the mobile or computer screen-sized websites either by clicking or by touching.
“People now expect to touch, hear, and interact with screens,” Landa said (Landa, 2019.)
Hi Greg,
Really great work on your web design! First, I want to comment on your logo– I think it’s really creative and works perfectly with your brand, its actually what drew me in to view your post. Additionally, the layout of your homepage is very well done. The number one thing I cannot stand when visiting a website is clutter and you definitely avoided that! Everything is neatly organized, easy to read, and very straight forward.
With that being said I think you did a great job converting your design into a mobile site as well. I definitely struggled with converting my design, but you took the elements from your web homepage and seamlessly created the mobile site! I often find that mobile sites can be cluttered, difficult to read, and hard to navigate, but yours is the opposite of everything I just listed. I think your work is very well done!
-Caroline