Skip to main content

New Website Concepts - Made in Figma + Wireframing

 

 I had a 'Website Refresh' draft in my portal here - At a year old, I thought "I might as well make another post," I said (In September 2020) and here we are (Feb 2021).

 I decided to take a short Figma course (Also September 2020). I'd say "Why am I not on time?" but who says there was a "time"?

My understanding of Figma...Well, I made these pages! Is it perfect? No, but the general idea is here.

 2/2021: I have added Wireframing for more ideas. The Wireframes do not match the concepts in Figma.

 Every icon sans the blog logo is from Evericons. The linked 'Concept #' lead to the actual Figma file, so take a look at it!

The Wireframes for 2/2021:

Home page:




You can see it has viewport flexibility; It should look the same no matter the screen size.

  • White background.
  • Logo front and center, maybe 250px each way.
  • Blog title.
  • One line of description
  • 5 links - Services, Projects, About, Contact, Press Features


Individual Blog Posts




I sometimes use images in my work. I can decide to have the banner image at the top of the post, or inline. There will be pictures in most posts (like this one) that would not be inline.


Footer

  • Single Copyright line
  • Social buttons on far right of footer
  • Repeat the links on the left, including one back to the top of the page (First page only)

User Flow:

Load page --> Scroll down ---> See post ---> Click or tap.


Accent colors (in the logo) would be on:

  • The read more button
  • The more button at the bottom of the page (5 blog posts per page)
  • The post title
  • The footer block 

Onto the Figma concepts! 

Concept 1:


  • The header and logo will be stationary. 
  • The blog posts (7 on a page) will move. There is a 'Read More' link available. 
  • The navigation is triggered by a drop down - You make multiple 'pages' that step through the frames of animation that would happen for a drop down list. Each option is grouped together as a 'component'
  • My audience consists of a majority of English readers, so this is presently not a problem.

Questions:

  • Deleting Frame 8 on the left of the first image deletes that entire page. Why? 
  • I didn't want to use too many icons in the footer; Though the meanings (may) transcend culture, it may interfere with screen readers.Could I use alt text?

Concept 2:



  • Icon clutter at the bottom. I can take out the Twitter and Press Features links.
  • 'You'll see I moved some aspects that aren't the same from mockup to mockup. I changed my mind later in the process.
  • Open to suggestions for where to place the search. Having it run into the blog title is not ideal.
  • Also considering putting my name under said blog title instead of a pop-up menu.

Quesions:

How can I edit aligning within components?

Concept 3:

 


 

  • I really like the navigation! It helps if you put all of it in the same text box instead of fighting with each individual component. Making text styles to reuse doesn't save the color element.
  • I don't recall where I found the background at. Most of the ones I use are from Bing's Wallpaper of the Day.
  • I found the option to fix position when scrolling; The header, navigation, and description will stay.

 Questions.

  • Can I take my pages in a project and make them a separate project?
  • Why, when I make a component, does it not include the text?
  • Why does making a text style not include the color.
  • 'Send to Back' sends things behind my page (and its background) entirely as opposed to behind certain elements. -> Fixed. I have to put an image as the background (or lock the layer).


Comments

Popular posts from this blog

What Do You Need? [AKA; List of Offered Services / My Next Role] (2020)

I am a trusted outsourced remote consultant for your company.   I enjoy having the flexibility to take on temporary projects from time to time! I start at part-time, temp work for now. If we like each other, we can renegotiate. If anything sounds weird, out there, or unusual - Feel free to e-mail me .  3 Services Offered Writing :      You want to pay me to write more of *waves hand* this blog? I am game .     I write B2C e-mails going out to over 280 people weekly. [ Example Job Description ]        Auditing :        Something doesn't work on your page or in your app. I can find it, or you can lose business. [ Here ] [ Example Job Description ]   I really enjoy testing apps and webpage concepts! I have an iPhone and Android phones ready. Technical: Still as-needed, always remote, contract, or temporary. IT Operations Tech [ Example Job Description ]     Hardware and SaaS support.     Cisco routing and switching (Networking). CCNA, A+, Sec+, Azure certified WORKING ON: Junos

Portfolio of UX/Product Feedback [Vol. 1]

I browse websites and apps, while making note of things I find frustrating for end users. You have probably been linked here from a form or my resume. If you have any questions about what I'm looking for in a role, click here .   This post is not to shame, but to point out errors and hopefully make my talent for finding and documenting such mistakes clear to someone hiring. Contents: Instances where I offer constructive feedback on someone's website, logo, or app. Actions that were taken by the developers or artists.  I'm glad you want your webpages to be the best they can be with my help; If you need your sites audited, e-mail me . Latest Update -  November 20th, 2020.   Vol. 2 is here .

Contactless Tech’s Role in the New Guest Experience ft. Intelity and The George

 Contactless hospitality technology is growing. You want to get away, and you'll be damned if a little thing like a deadly virus will stop you! But you still don't want to touch things. Ew. During the chat between INTELITY CEO Robert Stevenson and THE GEORGE Director of Operations Kerrie Hunter, you’ll learn how the historic boutique hotel has adapted a mobile-first guest experience in the wake of COVID-19—and how they see contactless technology affecting the future of hospitality. I don't remember how I found INTELITY (probably hoping to score a position with them), but I liked them enough to stay on the e-mail lists.