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).


Labels:

Comments

Post a Comment

Popular posts from this blog

Connecting IoT Devices to a Registration Server (Packet Tracer, Cisco)

 If you're seeing this post, I'm helping you, and you probably have LI presence: React and share this post to help me in return.   In Packet Tracer, a demo software made by Cisco Systems. It certainly has changed a lot since 2016. It's almost an Olympic feat to even get started with it now, but it does look snazzy. This is for the new CCNA, that integrates, among other things, IoT and Automation, which I've worked on here before. Instructions here . I don't know if this is an aspect of "Let's make sure people are paying attention and not simply following blindly", or an oversight - The instructions indicate a Meraki Server, when a regular one is the working option here. I have to enable the IoT service on this server. Also, we assign the server an IPv4 address from a DHCP pool instead of giving it a static one. For something that handles our IoT business, perhaps that's safer; Getting a new IPv4 address every week or so is a minimal step against an
Post a Comment
Read more

Create a Simple Network (Packet Tracer) + A Walkthrough

Again; I've done this, but now there's so many new things, I'm doing it again. The truly new portions were...everything on the right side of this diagram; The cloud needed a coax connector and a copper Ethernet connector. It's all easy to install, turn off the cloud (Weird), install the modules. Getting the Cable section of Connections was an unusual struggle - The other drop down menu had nothing within. It required going into the Ethernet options and setting the Provider Network to 'cable', which is the next step AFTER the drop-downs. The rest was typical DHCP and DNS setups, mainly on the Cisco server down there. The post is rather short - How about adding a video to it? Find out what A Record means - This site says 'Maps a name to an IP address', which is DNS. So it's another name for DNS? You can change them (presumably in a local context) to associate an IP address to another name.
Post a Comment
Read more

Securing Terraform and You Part 1 -- rego, Tfsec, and Terrascan

9/20: The open source version of Terraform is now  OpenTofu     Sometimes, I write articles even when things don't work. It's about showing a learning process.  Using IaC means consistency, and one thing you don't want to do is have 5 open S3 buckets on AWS that anyone on the internet can reach.  That's where tools such as Terrascan and Tfsec come in, where we can make our own policies and rules to be checked against our code before we init.  As this was contract work, I can't show you the exact code used, but I can tell you that this blog post by Cesar Rodriguez of Cloud Security Musings was quite helpful, as well as this one by Chris Ayers . The issue is using Rego; I found a cool VS Code Extension; Terrascan Rego Editor , as well as several courses on Styra Academy; Policy Authoring and Policy Essentials . The big issue was figuring out how to tell Terrascan to follow a certain policy; I made it, put it in a directory, and ran the program while in that directory
Post a Comment
Read more